Qu'est-ce que le Web ? Qu'est-ce qui le caractérise le plus ?
Il s'agit de la notion de documents hypertextes accessibles via des liens (ou hyperliens).
Mais comment parvient-on à créer ces liens ? Comment parvenir à expliquer un graphique à l'aide d'un document purement textuel ?
Nous allons avoir besoin de communiquer avec le navigateur et pour cela d'utiliser le langage qu'il comprend : le HTML.
C'est ce code qui est reçu et interprété par votre navigateur (tout comme votre script Python est reçu et interprété par l'interpréteur Python).
Logiciels : Il faudra utiliser un éditeur de code. On propose ici d'utiliser soit :
Un éditeur de texte basique, qui ne fait que éditeur de texte :
Notepad tout court sur Windows (déjà installé mais pas de coloration syntaxique), ou
Editeur de texte sur Linux (déjà installé mais pas de coloration syntaxique), ou
Soit un logiciel nommé environnement de développement qui fait éditeur de texte en rajoutant beaucoup de choses bien pratique pour faire du développement :
Notepad ++ sur Windows (Notepadqq sur Linux), gratuit, simple mais à l'apparence un peu austère, ou
Sublim Text, shareware (gratuit pour les étudiants), mais licence propriétaire ou
VS Codium (Microsoft), opens source, gratuit, moderne ou
Atom ancien produit de Github, aujourd'hui possédé par Google, ou
Le protocole HTTP fait communiquer deux programmes :
Un programme client HTTP qui se connecte à
un programme serveur HTTP.
Le protocole HTTP est basé sur une communication en 3 étapes :
Requête - Traitement - Réponse
Le client envoie sa requête (à l'aide d'une URL).
Le serveur reçoit et analyse la requête
Le serveur renvoie sa réponse (elle contient souvent un texte nommé code-source HTML)
B - Code de réponse
La réponse HTTP contient notamment un code de réponse. Vous connaissez certainement le 404.
Voici quelques codes courants :
Code 200 : le serveur dit que tout s'est bien passé.
Code 404 : le serveur ne trouve aucune ressource correspondant à la requête.
Code 300 : le serveur dit que la ressource n'a pas été modifiée depuis la dernière fois que le client lui a demandé. Le client doit juste aller voir dans sa mémoire-cache.
Code 500 : le serveur rencontre une erreur de programmation en tentant de résoudre la requête....
C - Le programme client usuel : le navigateur Web
Nous avons déjà défini ce programme comme un interpréteur de code HTML dans les activités précédentes.
Donons maintenant une définition plus précise :
Un navigateur Web est un programme capable de réaliser plusieurs tâches, notamment :
Communiquer en HTTP avec un serveur distant ;
Interpréter le code HTML pour produire un affichage ;
Générer un historique des documents Web déjà visités ;
...
Quelques exemples de navigateur Webs :
Firefox de la fondation Mozilla,
le moteur libre Chromium, produit par Google
Chrome, une surcouche propriétaire de Chromium, produit par Google.
Brave, une surcouche libre de Chromium, produit par Brave Software.
Safari pour Apple
...
Attention, tous les navigateurs n'ont pas le même degré de sécurité.
Le code-source d'un navigateur libre est accessible et lisible par tous. Il ne peut pas, à priori, pas contenir d'instructions malveillantes.
Dans le cas d'un navigateur propriétaire, vous ne voyez que les effets apparents du programme. Vous ne pouvez pas savoir exactement ce que fait ce programme sur votre propre système.
1.2 URL
URL veut dire Uniform Resource Locator.
Chaque URL ne renvoie qu'une ressource unique, sans ambiguïté possible.
Structure d'une URL
http://info.cern.ch/hypertext/WWW/TheProject.html
L'URL est composée de 3 parties :
Le protocole : on explique dans quelle "langue" on parle.
Ici, c'est http.
L'adresse du serveur à joindre : on explique à qui on veut parler. On commence par placer :// pour indiquer le début du transfert du nom de serveur.
Ici, c'est info.cern.ch.
L'adresse de la ressource voulue sur ce serveur :
Ici /hypertext/WWW/TheProject.html.
Le premier / indique que l'adresse est donnée depuis la racine du site, son "point de départ".
Explications : /hypertext/WWW/TheProject.html
/ : part de la racine
hypertext/WWW/ : va dans le dossier hypertext puis dans le sous-dossier www puis
TheProject.html : localise le fichier nommé TheProject.html
1.3 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 ;
...
1.4 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.
1.5 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.
01 ✔° Utiliser ce lien qui va ouvrir une toute petite page basique.
ACTION 1 : cliquer sur chacun des liens pour vérifier qu'ils fonctionnent correctement et qu'ils ouvrent un nouvel onglet vers la destination.
ACTION 2 : survoler l'un des liens à la souris et rester statique au dessus. Que constate-on ?
ACTION 3 : faire un clic droit et sélectionner Code-source de la page.
Vous devriez obtenir le code HTML permettant de générer ce lien à l'écran :
1
<ahref="https://www.infoforall.fr/activite/snt/"title="1er exemple de lien"target="_blank">SNT de infoforall.fr</a>
02° On décide d'écrire la balise de cette façon :
1
2
3
4
<ahref="https://fr.wikipedia.org/wiki/Langage_de_balisage"title="Langage de balisage">
langage de balisage
</a>
Questions
Donner la ou les lignes de la balise d'entrée
Donner la ou les lignes du contenu interne
Donner la ou les lignes de la balise de fermeture
...CORRECTION...
Donner la ou les lignes de la balise d'entrée : 01-02
Donner la ou les lignes du contenu interne : 03
Donner la ou les lignes de la balise de fermeture : 04
1.6 L'élément a pour créer des liens
A - Rôle du contenu interne : le visuel du lien
3
<a>SNT de infoforall.fr</a>
Lorsqu'on transmet la balise ci-dessus au navigateur, on l'informe
qu'on veut créer un lien (c'est la présence des deux balises a qui l'indique) et
que le texte faisant office de lien est le contenu interne (SNT de infoforall.fr)
Mais il manque une information fondamentale : quelle est l'URL de la ressource voulue ?
B - ATTRIBUTS de la balise d'OUVERTURE
Une balise d'ouverture peut contenir des éléments descriptifs supplémentaires qu'on nomme attributs.
La structure à respecter est :
1
<baliseattribut1="valeur1"attribut2="valeur2">
Nom de l'attribut
Signe =
Valeur de l'attribut entourée par des guillemets
Un espace entre les différents attributs
ERREUR TYPIQUE A EVITER : n'oubliez pas de signaler la fin de votre balise d'ouverture en plaçant le chevron >.
C - Attribut href : fournir l'URL de destination
L'attribut href permet de transmettre l'URL du lien qu'on veut créer.
Dans tous les exemples ci-dessous, on met en évidence le début de la balise d'ouverture et la fin de la balise d'ouverture.
1
<ahref="https://www.infoforall.fr/activite/snt/">SNT de infoforall.fr</a>
Version sur plusieurs lignes
1 Ouverture
2 Contenu interne
3 Fermeture
<ahref="https://www.infoforall.fr/activite/snt/">
SNT de infoforall.fr
</a>
Le navigateur sait qu'il doit chercher l'URL derrière la séquence de texte href=" et qu'elle est finie lorsqu'il retombe sur un ".
D - Attribut title pour le texte au survol
Cet attribut permet de transmettre le texte que vous voulez voir apparaître à l'écran en survolant le lien (mais attention : le texte doit être fourni entre des guillemets)
Version sur une ligne
1
<ahref="https://www.infoforall.fr/activite/snt/"title="1er exemple de lien">SNT de infoforall.fr</a>
<ahref="https://www.infoforall.fr/activite/snt/"title="1er exemple de lien"target="_blank">
SNT de infoforall.fr
</a>
Notez bien la présence du signe = et des guillemets.
Il faut les mettre, sinon le navigateur risque rapidement d'être perdu.
C'est vous le cerveau. L'ordinateur n'en a pas !
03° Quel est le nom de l'attribut qui permet de trouver l'URL de destination du lien ? Dans le lien ci-dessous, quelle est l'URL de destination ?
1
2
3
4
<ahref="https://fr.wikipedia.org/wiki/Langage_de_balisage"title="Langage de balisage">
langage de balisage
</a>
...CORRECTION...
C'est l'attribut href qui permet de fournir l'URL du lien.
L'URL est href est https://fr.wikipedia.org/wiki/Langage_de_balisage.
1.7 Compléter une adresse incomplète
Certaines URL présentes sur une page semblent parfois incomplètes : il n'y a pas de nom de site !
Imaginons que le site www.infoforall.fr vous envoie le code HTML suivant :
1
2
3
<ahref="/snt/">
page d'accueil de la SNT
</a>
Il s'agit d'une adresse absolue provenant du site www.infoforall.fr. Puisque le premier slash signifie "depuis la racine du site", c'est comme si nous avions envoyé ceci :
1
2
3
<ahref="https://www.infoforall.fr/snt/">
page d'accueil de la SNT
</a>
ACTION 2 : Localiser le bout de texte "langage de balisage" suivant au début du texte. Sélectionner le texte et cliquer sur Code Source de la Sélection.
Il est possible qu'un site désactive sur sa vue le fait de réaliser des clics gauche ou droit (Pronote par exemple...). Que faire dans ce cas ?
Il faut ouvrir la console d'inspection à la main.
F12
Menu du navigateur, chercher outils supplémentaires/plus d'outils, outils de développements...
05° Vérifier que le code HTML de ce lien est similaire à celui-ci :
<a href="/wiki/Langage_de_balisage" title="Langage de balisage"> langage de balisage </a>
L'URL n'est pas complète puisqu'elle n'indique pas le nom du site visé.
Question : quelle est l'URL réelle ?
...CORRECTION...
<a href="/wiki/Langage_de_balisage" title="Langage de balisage">langage de balisage</a>
L'URL derrière l'attribut href est /wiki/Langage_de_balisage"
Il manque le nom du site devant : https://fr.wikipedia.org
L'URL complète est donc
Il manque le nom du site devant : https://fr.wikipedia.org/wiki/Langage_de_balisage"
Dans cette partie, vous allez voir qu'il ne faut ABSOLUMENT jamais avoir confiance en la validité d'un lien affiché sur un site Web ou reçu via un email. Falsifier l'adresse de destination est extrêmement facile...
06 ✔° Sous Firefox, sélectionner le texte de n'importe lequel des liens présents sur la page Wikipédia. Sur l'exemple ci-dessous, j'ai sélectionné le lien INFORMATIQUE.
En utilisant un clic droit, sélectionner maintenant Examiner ou Inspecter en fonction de votre navigateur. Le choix se trouve normalement un peu en dessous de Code Source.
Vous devriez obtenir ceci : le bout de code du lien dans son contexte total
Nous allons maintenant nous amuser à modifier le code source HTML de la page pour vérifier que le navigateur modifie l'affichage.
Modifier le texte affiché
07° Dans la fenêtre du bas qui vient d'apparaître, faire un double-clic sur l'un des mots qui apparaît dans le code source (ici le informatique entouré par la balise d'ouverture et la balise de fermeture). Modifier le texte en le remplaçant par un autre texte, cliquer ailleurs sur la page et vérifier que l'affichage de la page est bien modifié.
✌ 08° Modification de la destination du lien : faire un double-clic sur le texte situé derrière href du lien dans le code de l'inspecteur visible ci-dessus. Modifier l'adresse fournie derrière href. Par exemple, href="/wiki/Chat".
Cette fois, vous devriez constater qu'en cliquant sur le mot indiquant le lien, on part vers la page... des chats.
Attention, nous ne venons pas de modifier la page de Wikipédia, ce serait de la dégradation !
La page HTML côté serveur est toujours fournie à l'identique par le serveur.
Le code que vous venez de modifier est simplement le code HTML côté client que votre navigateur est en train d'analyser et qui est stocké sur votre ordinateur après son envoi par le serveur HTTP de Wikipédia.
09° Question : peut-on faire une confiance aveugle aux liens qu'on trouve sur le Web ? Pourquoi les e-mails des banques ou autres précisent souvent que les e-mails officiels ne contiennent jamais de lien ?
Le lien devrait vous mener vers une page parlant de chat. Attention donc aux liens. Rien ne prouve qu'il vous mènera effectivement vers le site annoncé sur le texte du document.
Ne cliquez donc jamais sur un lien important sans vérifier sa validité avec l'inspecteur. Le mieux est encore de taper directement l'adresse dans la barre d'URL.
Alors comment peut-on vérifier la validité d'un lien ?
Le survoler à la souris est déjà un bon réflexe : en bas à gauche de la plupart des navigateurs la destination du lien apparaît. Le lien pourrait encore être changé à la volée une fois le clic effectué mais la plupart du temps, les arnaqueurs ne s'embêtent pas à être aussi sournois.
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.
2.2 Structure d'une page Web basique
A - Code HTML et visuel obtenu
Le code-source HTML vu précédemment (titre + 3 liens) est inséré dans la balise body de notre page Web :
<!DOCTYPE html><html><head><title>TITRE ONGLET</title><metacharset="utf-8"/></head><body><h1>INTRODUCTION AUX LIENS HTML</h1><ahref="https://www.infoforall.fr/act/snt"title="1er exemple de lien"target="_blank">
SNT de infoforall.fr
</a><ahref="https://py-rates.fr/"target="_blank"title="2e exemple de lien">
Py-rates
</a><ahref="https://www.w3schools.com/html/default.asp"target="_blank"title="Encore un exemple de lien">
W3School
</a></body></html>
Visuel créé par le navigateur après analyse du code HTML
On pourrait croire qu'il s'agit du même visuel que la dernière fois, mais un détail en plus a été rajouté : dans le navigateur, l'onglet visible dans le menu horizontal possède un texte, son "titre" que j'ai nommé TITRE ONGLET
B - Description de notre balise head
On y place des informations qu'on veut transmettre au navigateur pour lui permettre de réaliser un bon affichage. Mais ne sont pas les choses à afficher dans la page elle-même, juste des informations annexes : l'auteur de la page, la langue...
Ligne 4 : la balise <title> permet de choisir le nom de l'onglet.
Ligne 5 : la balise <meta> est dite orphelinecar elle n'est composée que d'une seule balise. Pas de contenu interne et pas de balise de fermeture. On donne l'encodage de caractères (charset) utilisé pour décoder correctement ce code-source HTML. UTF-8 est l'encodage courant aujourd'hui, pas juste ASCII.
REMARQUE : on peut rajouter / à la fin d'une balise orpheline pour indiquer qu'elle est finie car orpheline.
C - Description de notre balise body
Cette balise contient les choses qu'on veut voir à l'écran.
8
9
10
..
..
29
<body><h1>INTRODUCTION AUX LIENS HTML</h1><ahref="https://www.infoforall.fr/act/snt"
...
</body>
2.3 Pas de passage à la ligne automatique en HTML
Vous avez vu que les trois liens s'affichent sur une seule ligne à l'écran alors que dans le code-source on trouve beaucoup de passages à la ligne...
En HTML, passer à la ligne dans le CODE-SOURCE ne crée pas de passage à la ligne à l'AFFICHAGE.
Exemple de code-source avec passages à la ligne
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html><html><head><title>PASSAGE OU PAS ?</title></head><body>
Premier test sur la première ligne.
Et hop,
la troisième ligne.
</body></html>
Visuel provoqué
Visuel créé par le navigateur après analyse du code HTML
Le but de cette activité va être de vous apprendre à mettre en forme votre page Web : gérer les passages à la ligne par exemple.
Important : si vous êtes sur une machine sous Windows, pensez à aller dans affichage et demander d'afficher les extensions de fichier.
10 ✔° Effectuer les actions suivantes pour réaliser votre première page Web :
Ouvrir votre éditeur de texte (attention, pas de traitement de texte !). Par exemle Notepad++ ou VSCodium.
Réaliser un copier-coller du code-source suivant dans l'éditeur.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html><html><head><title>PASSAGE OU PAS ?</title></head><body>
Premier test sur la première ligne.
Et hop,
la troisième ligne.
</body></html>
Si les balises ne sont pas en couleur :
chercher l'onglet Langage/Language dans votre logiciel et sélectionner H puis HTML pour indiquer que notre code est un code HTML.
Si UTF-8 n'est pas indiqué en bas à droite de la fenêtre du logiciel
chercher l'onglet Encodage/Encoding et sélectionner Convertir en UTF-8. Sinon, rien à faire.
11 ✔° Réaliser les actions suivantes en demandant de l'aide si vous ne savez pas le faire :
Aller dans votre répertoire de travail et créer un nouveau répertoire nommé WEBNSI.
En utilisant Enregistrer Sous ou Save As, enregistrer ce fichier texte sous le nom page1.html dans WEBNSI.
N'oubliez pas l'extension .html.
De la même façon, notez bien .html, pas .hml, .hmlt ou je ne sais quoi d'autre.
Si tout s'est bien passé, vous avez créé votre première page Web. Reste à la visualiser.
12° Aller dans le répertoire WEBNSI et cliquer sur le fichier page1.html pour que le navigateur l'interprète et vous montre le résultat.
Alors, comment passer à la ligne ?
2.4 Elément (type block) paragraphe p
p pour paragraphe
L'élément p est un élément en 3 parties qui permet de définir des paragraphes à l'intérieur de votre texte.
C'est un élément de type block : il provoque un passage à la ligne et sera réglable en largeur.
<p>Premier test sur la première ligne.</p>
Exemple d'utilisation
Exemple Code-source
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html><html><head><title>AVEC BALISE P</title></head><body><p>Premier test sur la première ligne.</p><p>Et hop,</p><p>la troisième ligne.</p></body></html>
Résultat à l'affichage
Visuel créé par le navigateur après analyse du code HTML
13 ✌° Réaliser une page Web nommée page2.html dans laquelle on trouvera deux phrases situées dans deux paragraphes différents.
Le ✌ dans la question signale qu'il faut faire appel à l'enseignant pour valider votre manipulation.
2.5 Trois remarques
A - Attention : cloturez vos balises !
Notez bien à placer > pour signaler la fin de votre balise d'ouverture et de votre balise de fermeture.
<p> pour la balise d'ouverture
</p> pour la balise de fermeture
B - Elément HTML ?
Le mot élément HTML caractérise l'ensemble des trois parties des balises classiques et la partie unique des balises orphelines.
Elément <p> désigne donc <p>, son contenu interne et </p>.
Néanmoins, par abus de langage, on utilise souvent simplement le mot "balise".
Balise <p> désigne <p>, son contenu interne et </p>.
Balise d'ouverture désigne <p>.
Balise de fermeture désigne </p>.
C - Balise orpheline ?
Tous les éléments HTML ne sont pas en trois parties.
Certaines balises n'ont qu'une partie. On dit qu'elles sont orphelines car il n'y a ni contenu interne, ni balise fermeture.
Elles sont moins nombreuses. Nous verrons par exemple :
<img> pour insérer une image
<br> pour insérer un petit saut de ligne
Nous avons vu la balise p (de type "block") permettant de signaler qu'on veut un paragraphe. Il en existe beaucoup d'autres.
2.6 Elément (type block) titre h1 à h6
h pour header (en-tête)
L'élément h1 est un élément en 3 parties qui permet de définir un titre de niveau 1.
C'est un élément de type block : il provoque un passage à la ligne et sera réglable en largeur.
Il existe 6 types de titre, allant de h1 à h6.
<h1>I - Le HTML</h1>
Le h signifie header, en-tête en anglais.
Exemple
Visuel créé par le navigateur après analyse du code HTML
Code HTML
Voici le lien vers la page dont le code est fourni ci-dessous :
VOIR LA PAGE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html><html><head><title>LES TITRES</title><metacharset="utf-8"/></head><body><h1>Titre de niveau 1</h1><h2>Titre de niveau 2</h2><h3>Titre de niveau 3</h3><h4>Titre de niveau 4</h4><h5>Titre de niveau 5</h5><h6>Titre de niveau 6</h6><p>Un simple paragraphe ici.</p></body></html>
14° Réaliser une page Web correctement articulée et nommée chanson.html dans laquelle on trouvera :
Un titre contenant le titre de la chanson justement.
Un paragraphe d'une phrase ou deux résumant de quoi parle la chanson.
Un paragraphe d'une phrase ou deux résumant le style musical de cette chanson.
A vous de choisir la chanson.
Titre de la chanson (à remplacer) :
Cette chanson parle de ...
Cette chanson est issue du style musical ...
2.7 Elément (type liste) ordonnée ol
ol pour ordered list
L'élément ol est un élément en 3 parties qui permet de contenir des éléments li. Le tout sera interprété comme une liste numéroté.
C'est un élément de type block : il provoque un passage à la ligne et sera réglable en largeur.
La structure est donc semblable à cela :
1
2
3
4
5
<ol><li>...</li><li>...</li><li>...</li></ol>
Exemple avec affichage et code correspondant
Visuel créé par le navigateur après analyse du code HTML
<!DOCTYPE html><html><head><metacharset="utf-8"/></head><body><h1>Exemple de liste ordonnée</h1><p>Les 4 piliers de l'informatique :</p><ol><li>Données</li><li>Algorithmique</li><li>Langage</li><li>Machine</li></ol></body></html>
15° Sous les paragraphes précédents, rajouter dans chanson.html une liste ordonnée contenant les URL de trois pages Web disponibles qui parle de cette chanson ou de cet artiste.
Il faudra donc afficher quelque chose qui ressemble à ceci (en remplaçant les URL par de vraies URLs...) :
3 sites parlant de cette chanson :
URL1
URL2
URL3
Attention : pas de liens, juste les urls.
2.8 Balise liste non ordonnée ul ("block")
ul pour unordered list
L'élément ol est un élément en 3 parties qui permet de contenir des éléments li. Le tout sera interprété comme une liste à puces.
C'est un élément de type block : il provoque un passage à la ligne et sera réglable en largeur.
La structure est donc semblable à cela :
1
2
3
4
5
<ul><li>...</li><li>...</li><li>...</li></ul>
Exemple avec affichage et code correspondant
Visuel créé par le navigateur après analyse du code HTML
<!DOCTYPE html><html><head><metacharset="utf-8"/></head><body><h1>Exemple de liste NON ordonnée</h1><p>Les 4 piliers de l'informatique :</p><ul><li>Données</li><li>Algorithmique</li><li>Langage</li><li>Machine</li></ul></body></html>
16° Sous les paragraphes précédents, rajouter dans chanson.html une liste non ordonnée contenant les informations suivantes :
Interprète ou groupe.
Date de sortie
Durée
2.9 Trois balises sémantiques mark, strong et em ("inline")
Syntaxe et sémantique
La syntaxe correspond à la façon dont il faut écrire les choses.
La sémantique correspond au sens qu'on donne aux choses.
Ainsi, lorsqu'un programme automatique d'analyse d'un moteur de recherche tombe sur ces deux bouts de code HTML, on peut leur donner deux sens différents :
1
<h1>Concevoir une page Web</h1>
1
<p>Concevoir une page Web</p>
Dans le premier cas, puisque c'est un titre, le moteur de recherche saura qu'il s'agit certainement d'une page qui explique comment concevoir une page Web.
Dans le deuxième cas, il s'agit juste d'une phrase, noyée dans le reste de la page.
Si quelqu'un veut obtenir une page expliquant comment faire une page Web, le moteur de recherche classera mieux le cas 1 que le cas 2.
Bien choisir ces balises permet donc d'indiquer aux moteurs de recherche de quoi parle votre page.
Visuel de balises "inline"
Contrairement aux balises "block", les balises "inline" ne provoquent pas de passages à la ligne.
Vous allez en voir 3 ci-dessous : mark, strong et em.
Visuel créé par le navigateur après analyse du code HTML
<!DOCTYPE html><html><head><title>SEMANTIQUE</title><metacharset="utf-8"/></head><body><h1>Les 3 balises sémantiques classiques</h1><ul><li>La balise mark</li><p>On veut indiquer que le contenu est vraiment <mark>très important</mark>.</p><li>La balise strong</li><p>On veut indiquer que le contenu est <strong>important</strong>.</p><li>La balise em</li><p>em vient de emphase : on veut que le lecteur distingue <em>ces mots</em> du reste du texte.</li></ul></body></html>
Les balises "inline" mark, strong et em
Ces balises provoquent deux choses :
Affichage :
mark : les navigateurs ont tendance à afficher le contenu interne surligné en jaune fluo.
strong : les navigateurs ont tendance à afficher le contenu interne en gras.
em : les navigateurs ont tendance à afficher le contenu interne en italique.
Sémantique :
mark : le contenu est vraiment très important vis à vis du thème de la page.
strong : le contenu est important vis à vis du thème de la page.
em : le contenu est notable vis à vis du thème de la page. em vient de emphase.
Remarquez bien qu'elles sont toutes les trois de type "inline" : elles ne provoquent pas de passage à la ligne.
17° Rajouter maintenant les paroles de cette chanson (si la chanson dépasse 40 lignes, vous pouvez couper pour n'en garder qu'une quarantaine).
Consignes
Utiliser des balises p autour de chaque strophes
Séparer les lignes(vers) des strophes en utilisant des balises (orphelines) <br>. Il suffit de la placer à la fin de chaque ligne. Elle crée un passage à la ligne, mais plus petit que celui des paragraphes.
Utiliser des balises em, afficher le refrain en italique.
Utiliser des balises strong pour noter en gras la strophe qui vous semble centrale dans cette chanson
Utiliser trois fois des balises mark pour indiquer le mot qui revient le plus dans cette chanson. On ne l'indique que trois fois car sinon, c'est long...
Nous avons vu qu'il existe 3 balises "inline" donnant un sens particulier aux mots qu'elles entourent : <mark>, <strong> et <emy>.
Mais on peut également donner un sens aux différentes parties de texte qu'on trouve dans <body> en utilisant les balises "block" suivantes :
La balise <header> indique que cette partie est l'en-tête ou l'introduction de la partie. L'en-tête d'infoforall est le titre notée en gros en haut de page.
La balise <nav> indique que son contenu correspond à une barre de navigation.
La balise <main> indique qu'il s'agit du contenu principal de votre page.
La balise <article> indique qu'il s'agit d'un article contenant un contenu suffisant pour être lue de façon autonome.
La balise <aside> indique qu'il s'agit d'une note annexe, un point de détail ou une remarque plutôt éloignée du sujet réel de la page.
La balise <section> indique qu'il s'agit d'une partie de votre contenu.
La balise <footer> indique qu'il s'agit du pied de page (les références du site, les moyens de contacter les auteurs …) ou la conclusion de votre article.
Voilà comment on pourrait structurer une page HTML :
18° Tester le code HTML ci-dessous qui remplit un peu les balises de la partie <body>. Il vous permet de voir l'effet de quelques unes des balises blocs les plus utilisées.
Copier le code dans l'éditeur de texte
Sauvegarder le fichier quelque part où vous parviendrez à le retrouver facilement.
Lancer la page dans le navigateur en double cliquant dessus dans le répertoire où vous l'avez enregistrée.
<!DOCTYPE html><html><head></head><body><header><h3>Le titre de mon site</h3></header><nav><ul><li>Accueil</li><li>Partie 1</li><li>Partie 2</li></ul></nav><main><h1>Le titre de ma page.</h1><h2>1 Première partie</h2><p>Bla bla.</p><h2>2 Deuxième partie</h2><p>Encore du blabla.</p></main><footer><p>Pour contacter le webmaster, on met son adresse ici.</p><p>Pour l'instant, il préfère rester discret :</p><p>le contenu n'est pas très conséquent.</p></footer></body></html>
Pour voir plus clairement l'enchainement des balises, nous allons rajouter des couleurs de fond aux différentes balises. Le principe du CSS lui-même sera vu un peu plus bas. Pour l'instant, nous ne l'utiliserons que pour mettre en valeur les différentes balises.
Gérer directement depuis l'attribut style telle que nous allons utiliser ici est une mauvaise pratique dans le cadre d'une vraie page Web.
<head> en fond noir / black.
<body> en fond gris / grey
<header> en fond noir / black
<nav> en fond noir / black
<body> en fond noir / black
19° Utiliser le code-source HTML modifié avec couleurs. Répondre ensuite aux questions.
<!DOCTYPE html><html><headstyle="background-color:black;"></head><bodystyle="background-color:grey;"><headerstyle="background-color:red;"><h3>Le titre de mon site</h3></header><navstyle="background-color:blue;"><ul><li>Accueil</li><li>Partie 1</li><li>Partie 2</li></ul></nav><mainstyle="background-color:green;"><h1>Le titre de ma page.</h1><h2>1 Première partie</h2><p>Bla bla.</p><h2>2 Deuxième partie</h2><p>Encore du blabla.</p></main><footerstyle="background-color:yellow;"><p>Pour contacter le webmaster, on met son adresse ici.</p><p>Pour l'instant, il préfère rester discret :</p><p>le contenu n'est pas très conséquent.</p></footer></body></html>
Questions
La balise <head> (dont le fond devrait être noir au vu de la ligne 4) est-elle visible ?
La balise <body> (dont le fond devrait être gris au vu de la ligne 7) est-elle visible ?
...CORRECTION...
Le fond noir de la balise <head> n'apparait pas à l'écran. C'est normal : son contenu n'est pas normalement un contenu destiné à être affiché. Elle ne doit contenir que des informations à transmettre au client (le navigateur par exemple) pour qu'il affiche correctement le reste.
Par contre, on voit que le fond gris englobe bien toutes les autres balises colorées : la balise <body> est bien le conteneur de toutes les balises dont le contenu est affiché.
3.2 - Attribut style
Les indications comme style qu'on trouve à l'intérieur d'une balise d'ouverture se nomment des attributs.
L'attribut style permet de forcer le style CSS depuis le HTML, qui est une mauvaise pratique de programmation comme nous l'avons déjà dit. Mais cela permet d'obtenir un prototype rapidement.
<footerstyle="background-color:yellow;">
Le string (délimité par des guillemets) fourni de l'autre côté du signe = correspond donc à du CSS.
background-color:yellow; est donc du code CSS.
On impose donc ici que la propriété CSS background-color (couleur de fond) doit être réglée (attention, avec : en CSS plutôt qu'un signe =) à une valeur yellow.
Dernière remarque : on devra placer un point-virgule ; à la fin de chaque réglage de propriété CSS.
✎ 20° Modifier un peu les couleurs de fond (propriété background-color) ou les couleurs de texte (propriété color).
Il existe de très nombreux sites présentant le code couleur HTML. Le site w3schools notamment possède une telle page et de très nombreuses pages très pédagogiques sur les différentes technologies web (HTML, CSS, Javascript ...) : couleurs HTML sur w3schools.
Si vous voulez modifier les deux à la fois, il faudra écrire quelque chose comme
<footerstyle="background-color:black;color:red;">
Comme il y a le stylo, il faut placer votre code sur votre copie numérique.
Décaler votre code dans l'éditeur de code
Sélectionner l'ensemble. CTRL + C pour copier
SHIFT + TAB pour décaler dans l'autre sens.
Noter #Q20 sur votre copie
Laisser une ligne vide puis taper #!html en le décalant de 4 espaces.
Imaginons maintenant qu'on désire avoir le fond des paragraphes de la partie <main> en olive. Quitte à piquer les yeux, autant voir les choses en grand.
Voici le code qu'on pourra écrire pour l'instant :
<!DOCTYPE html><html><head></head><bodystyle="background-color:grey;"><headerstyle="background-color:red;color:white;"><h3>Le titre de mon site</h3></header><navstyle="background-color:blue;"><ul><li>Accueil</li><li>Partie 1</li><li>Partie 2</li></ul></nav><mainstyle="background-color:green;"><h1>Le titre de ma page.</h1><h2>1 Première partie</h2><pstyle="background-color:olive">Bla bla.</p><pstyle="background-color:olive">Encore du Bla bla.</p><pstyle="background-color:olive">Toujours du Bla bla.</p><h2>2 Deuxième partie</h2><pstyle="background-color:olive">Encore du blabla.</p></main><footerstyle="background-color:yellow;color:DarkGoldenRod;"><p>Pour contacter le webmaster, on met son adresse ici.</p><p>Pour l'instant, il préfère rester discret :</p><p>le contenu n'est pas très conséquent.</p></footer></body></html>
21° Utiliser ce code pour visualiser le problème qu'il va causer....
Comme vous pouvez le voir, le problème vient du fait que la couleur de fond n'est placée que sur les paragraphes, pas sur l'espace entre les paragraphes...
Le visuel que vous devriez obtenir
Comme faire alors ?
La solution est d'enfermer vos paragraphes dans une balise-conteneur de type block, une balise <div> : elle va contenir les paragraphes.
Et, c'est sur cette balise <div> que nous allons fixer la couleur de fond.
<!DOCTYPE html><html><head></head><bodystyle="background-color:grey;"><headerstyle="background-color:red;color:white;"><h3>Le titre de mon site</h3></header><navstyle="background-color:blue;"><ul><li>Accueil</li><li>Partie 1</li><li>Partie 2</li></ul></nav><mainstyle="background-color:green;"><h1>Le titre de ma page.</h1><h2>1 Première partie</h2><divstyle="background-color:olive"><p>Bla bla.</p><p>Encore du Bla bla.</p><p>Toujours du Bla bla.</p></div><h2>2 Deuxième partie</h2><pstyle="background-color:olive">Encore du blabla.</p></main><footerstyle="background-color:yellow;color:DarkGoldenRod;"><p>Pour contacter le webmaster, on met son adresse ici.</p><p>Pour l'instant, il préfère rester discret :</p><p>le contenu n'est pas très conséquent.</p></footer></body></html>
22° Visualiser dans ce nouveau code que :
La balise <div> contient bien les trois balises <p> voulues entre sa balise d'entrée (ligne 24) et sa balise de sortie (ligne 28)
La propriété background-color est fixée sur la balise <div>
Les balises <p> des lignes 25-26-27 ne possèdent plus d'attribut style : elles font hériter de celle de leur conteneur.
Faire interpréter ce code par un navigateur Web pour visualiser deux choses :
L'espace entre les paragrahes est bien de la bonne couleur de fond
Les paragraphes ont hérité de la couleur de fond de la balise <div>.
Voici le résultat que cela devrait donner :
Le visuel que vous devriez obtenir
4.1 Parent et Child
Lorsqu'une balise contient d'autres balises, on dit qu'elle est la balise-mère des balises directement contenues dans celle-ci.
Ici la balise <div> est donc la balise-mère (on dira parent en anglais) des trois balises <p>.
A l'inverse, ces trois balises <p> sont des balises-filles de la balise <div>. En anglais, on dira child ou children au pluriel.
Par défaut, les balises enfants/childrenhéritent des propriétés CSS de leur balise parent.
Toute cette structure se nomme un arbre à cause de l'imbrication des balises les unes dans les autres.
Visualisation de l'arbre DOM en version montante
On peut également le représenter dans l'autre sens :
Visualisation de l'arbre DOM en version descendante
4.2 Balise div ("block")
La balise div est une balise de type block qui n'a aucune sémantique associée. Il s'agit juste d'un conteneur capable de contenir plusieurs autres balises.
Son intérêt est donc principalement de pouvoir partager ses propriétés de fond coloré avec ses enfants.
On dit qu'elle est la balise block générique, celle qu'on utilise lorsqu'on ne sait pas quelle autre balise utiliser.
24
25
26
27
28
<divstyle="background-color:olive"><p>Bla bla.</p><p>Encore du Bla bla.</p><p>Toujours du Bla bla.</p></div>
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.
La balise <meta> est orpheline.
5.2 Indication de la langue
L'indication de la langue utilisée sur la page HTML se fait à l'aide d'un attribut applicable à la balise <html> :
<htmllang="fr">
23 ✌° Modifier une dernière fois votre fichier chanson.html : insérer les indications de la balise <head> pour que le navigateur affiche BONJOUR dans l'onglet de votre page et indiquer avec <html> la langue utilisée.
Pour la gestion de la copie numérique :
Décaler votre code dans l'éditeur de code
Sélectionner l'ensemble. CTRL + C pour copier
SHIFT + TAB pour décaler dans l'autre sens.
Noter #Q23 sur votre copie
Laisser une ligne vide puis taper #!html en le décalant de 4 espaces.
