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 est destiné à faire 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 (nous verrons qu'il utilise une URL).
Le serveur reçoit et analyse la requête
Le serveur renvoie sa réponse (nous verrons qu'elle contient parfois un texte nommé code-source HTML)
B - Une notion connue : le code de réponse
La réponse HTTP contient un nombre, le code de réponse. Vous connaissez certainement le 404. Les voici :
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
Firefox de la fondation Mozilla,
le moteur libre Chromium, produit par Google
Chrome, une surcouche propriétaire de Chromium, produit par Google.
Safari pour Apple
Brave, une surcouche libre de Chromium, produit par Brave Software.
Safari pour Apple
...
1.2 URL
URL veut dire Uniform Resource Locator.
Chaque URL ne renvoie qu'une ressource unique, pas d'ambiguïté possible.
http://info.cern.ch/hypertext/WWW/TheProject.html
L'URL est composée de plusieurs parties :
Le protocole : on explique dans quelle "langue" on parle. Ici http.
L'adresse du serveur à joindre : on explique à qui on veut parler. On commence par placer des caractères indiquant qu'on commence à donner l'adresse d'un serveur : ://. Ici, le serveur est info.cern.ch.
L'adresse de la ressource 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 :
/ : 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.
Il ne s'agit pas d'un langage de programmation, le code-source HTML est un texte très organisé qui exprime avec des mots l'affichage désiré.
Ce code-source HTML est placé dans la réponse HTTP que fournit le serveur au client. Le client va ensuite l'interpréter et réaliser l'affichage correspondant.
Requête - Traitement - Réponse
B - Exemple
1
2
3
4
5
6
7
<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>
Le navigateur interprète alors ce code-source pour savoir ce qu'il doit afficher à l'écran.
Visuel créé par le navigateur après analyse du code HTML
C - Voir le code-source
Un clic-droit sur une page Web permet de sélectionner l'affichage du code-source de la page.
1.4 Balise HTML
A - Séparation des informations
L'idée principale du HTML est d'utiliser des balises pour séparer sans ambiguïté
la signification qu'on veut donner à l'élément (un lien, un titre, une remarque annexe, une conclusion...)
le contenu d'un élément (un texte ?, une image ?, ...)
les informations supplémentaires nécessaires au navigateur pour qu'il puisse faire son travail.
En anglais, "balise" est traduit par tag.
B - Balise : structure classique en trois parties
La plupart des éléments HTML sont composés de trois parties jouant des rôles différents :
1
<h1>INTRODUCTION AUX LIENS HTML</h1>
une balise d'ouverture qui signale au navigateur qu'on commence à décrire un élément
<h1> signale qu'on veut créer un titre.
le contenu interne donnant les informations brutes à afficher.
<h1>INTRODUCTION AUX LIENS HTML
une balise de fermeture qui signale qu'on en a fini avec cette balise.
<h1>INTRODUCTION AUX LIENS HTML</h1>
C - Quelques exemples
Pour un paragraphe : <p>texte du paragraphe<p>
Pour un titre : <h1>texte du titre<h1>
Pour un lien : <a>texte du lien<a>
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.5 La balise 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.5 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.
La première ligne <!DOCTYPE html> permet de signaler que le document est réalisé en HTML.
La balise <html> contient l'intégralité du document HTML. Le contenu interne de la balise HTML est composé de deux autres balises.
La balise <head> va contenir des données qu'on veut transmettre au navigateur mais qui ne seront pas affichées sur la page : le titre à mettre dans l'onglet, la langue utilisée ou l'auteur par exemple.
La balise <body> va contenir ce qu'on désire voir afficher par le navigateur. C'est dans cette balise qu'on placera le code HTML de l'activité précédente par exemple, celle avec les trois liens.
B - Tabulation et appartenance
La notion de balises contenues dans d'autres balises est extrêmement importante.
Pour visualiser facilement ce qui est contenu dans quoi, on utilise le système de tabulation : on décale de 4 espaces vers la droite la balise contenue dans une autre balise ou on appuie sur la touche TAB (celle à gauche du A).
Ainsi, on voit bien que <html> contient deux balises car elles ont été tabulées : <head> et <body>.
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 Balise paragraphe p ("block")
Le HTML possède une balise qui exprime le fait qu'on désire créer un paragraphe : un texte séparé des autres textes par un espace au dessus et un espace en dessous.
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>
Pour gérer correctement le passage à la ligne, il suffit d'entourer vos paragraphes par une balise d'ouverte <p> et une balise de fermeture </p>.
Résultat à l'affichage
Visuel créé par le navigateur après analyse du code HTML
Ce type de balise qui isole un contenu sur une ligne indépendante se nomme une balise "block".
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 Balise titre h1 à h6("block")
Lorsqu'on veut indiquer au navigateur qu'un texte correspond à un titre, un sous-titre..., on doit l'entourer avec l'une des balises h1 h2 h3 h4 h5 h6.
Le h signifie header, en-tête en anglais.
Résultat à l'affichage
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 Balise liste ordonnée ol ("block")
Description
Lorsqu'on veut indiquer au navigateur qu'on veut qu'il affiche une liste numérotée on utilise une balise ol, pour ordered list.
1
2
3
<ol> contenu interne</ol>
On doit rajouter un contenu interne particulier : les lignes. Pour cela, on utilise des balises "block" nommées li, comme ligne. C'est le fait que ce soit une li qui permettra au navigateur de savoir qu'il faut la numéroter.
1
2
3
4
5
<ol><li>...</li><li>...</li><li>...</li></ol>
Exemple de résultat à l'affichage
Visuel créé par le navigateur après analyse du code HTML
On voit bien que la balise ol contient des balises li.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html><html><head><title>LES LISTES</title><metacharset="utf-8"/></head><body><h1>Liste des activités de SNT sur le Web</h1><ol><li>Parlons d'Internet et du Web</li><li>Comprendre les URLs</li><li>HTML et hyperliens, introduction au HTML</li><li>Page Web en HTML, construire une vraie page</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")
Description
Lorsqu'on veut indiquer au navigateur qu'on veut qu'il affiche une liste sans numéro on utilise une balise ul, pour unordered list.
1
2
3
<ul> contenu interne</ul>
On doit rajouter un contenu interne particulier : les lignes. Pour cela, on utilise des balises "block" nommées li, comme ligne. C'est le fait que ce soit une li qui permettra au navigateur de savoir qu'il faut placer un symbole devant.
1
2
3
4
5
<ul><li>...</li><li>...</li><li>...</li></ul>
Exemple de résultat à l'affichage
Visuel créé par le navigateur après analyse du code HTML
On voit bien que la balise ul contient des balises li.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html><html><head><title>LES LISTES</title><metacharset="utf-8"/></head><body><h1>Liste des activités de SNT sur le Web</h1><ul><li>Parlons d'Internet et du Web</li><li>Comprendre les URLs</li><li>HTML et hyperliens, introduction au HTML</li><li>Page Web en HTML, construire une vraie page</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>
Dans la balise <head>, nous pouvons donner au navigateur plein d’informations qui n’ont pas à être affichées dans la fenêtre d’affichage du navigateur. Nous pouvons ainsi lui donner :
Le texte à mettre dans l'onglet du navigateur à l'aide d'une balise nommée <title>
<head><title>TITRE ONGLET</title></head>
L’encodage de la page : l'ordinateur ne stocke pas de lettres mais uniquement des nombres. L'encodage correspond donc à la technique utilisée pour faire la traduction nombre-caractère. L’encodage UTF-8 est devenu la norme pour l’instant.
Et encore d'autres choses que nous verrons plus tard.
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.
