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>.
1.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>
1.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.
01° 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.
02° 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é WEBSNT.
En utilisant Enregistrer Sous ou Save As, enregistrer ce fichier texte sous le nom page1.html dans WEBSNT.
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.
03° Aller dans le répertoire WEBSNT 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 ?
1.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".
04 ✌° 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.
1.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 :
Nous avons vu la balise p (de type "block") permettant de signaler qu'on veut un paragraphe. Il en existe beaucoup d'autres.
2.1 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>
05° 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.2 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>
06° 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.3 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>
07° 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.4 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.
08° 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...
Il est temps de créer notre première page contenant des liens puisque nous avons vu comment cela fonctionne dans l'activité précédente.
09° En utilisant au besoin le rappel ci-dessous sur les balises a, et les URLs de la question 06, modifier chanson.html pour créer des liens vers les bonnes URLS plutôt que de simplement les afficher.
Le contenu interne du lien devra être simplement le nom du site, et l'attribut href devra bien entendu contenir la bonne URL. Attention aux guillemets !
(Rappel).1 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 !
✌ 10° Comment parvenir à faire ouvrir le lien automatiquement dans un nouvel onglet ? Si ce n'est pas encore fait, modifier le code HTML pour que les trois liens s'ouvrent dans un nouvel onglet.
11° Envoyez-vous ce fichier HTML via l'ENT. Faire de même avec moi.
Il reste encore une chose à faire. Vous savez maintenant réaliser des liens vers des pages situées sur un site extérieur. Mais comment pourriez-vous indiquer au navigateur d'aller chercher une page dont le code html est stocké dans le même répertoire que la première ?
3.2 Adresses relatives et liens internes
Définition
Une adresse relative est une adresse qu'on donne par rapport à la localisation d'une autre ressource.
Une adresse relative est donc une adresse qui ne commence
ni par le nom d'un serveur
ni par le nom d'un disque dur ou d'un ordinateur
Application au Web
Imaginons que vous ayez deux pages HTML situées au même endroit.
📁 PAGES_WEB
📄 page_1.html
📄 page_2.html
Elles sont donc enregistrées dans le même répertoire nommé PAGES_WEB.
Pour créer un lien vers page_2.html depuis le code de page1.html, il suffit d'insérer une adresse relative et non pas une URL totale : on reste au même endroit, pas la peine de donner une adresse externe.
✌ 12 (à faire vérifier et valider)° Enregistrer les deux pages suivantes au même endroit en respectant les noms affichés :
Premier fichier à enregistrer sous le nom page_1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html><html><head><title>Page n°1</title></head><body><h1>Ma super page 1 !</h1><p>Et j'ai même fait une page 2. Vous pouvez y aller en cliquer sur le lien ci-dessous.></p><p>Mon super-lien : <ahref="page_2.html">Aller en page 2</a></p></body></html>
Deuxième fichier à enregistrer sous le nom page_2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html><html><head><title>Page n°1</title></head><body><h1>Ma page 2</h1><p>Si vraiment vous voulez retourner à l'accueil, suivez le lien ci-dessous.></p><p>Vers l'accueil : <ahref="page_1.html">Accueil de mon super site</a></p></body></html>
Tester l'une des pages et vérifier qu'on parvient bien à naviguer de l'une à l'autre en utilisant le lien.
Activité publiée le 25 09 2023
Dernière modification : 25 09 2023
Auteur : ows. h.
