2 - Rappels sur le HTML, le retour
La première partie des rappels a traité des points suivants
- Structure globale d'une page HTML, organisée par ses balises
- Les balises de type block comme p ou h1
- La balise générique div
- La balise de lien a pour créer des liens sur le Web
Nous allons continuer en regardant maintenant les points qui nécessitent de savoir où sont enregistrés les fichiers :
- La balise de lien a pour créer des liens vers un fichier de la même machine
- Les balises orphelines img permettant d'afficher des images
Vous verrez également quelques points importants pour la réalisation de pages HTML.
Logiciels : Il faudra utiliser un éditeur de code. On propose ici d'utiliser Atom produit par Githhub, aujourd'hui possédé par Google, ou Notepad ++ (Notepadqq sur Linux). Sublim Text est également une alternative de qualité.
Evaluation ✎ : 05-11 (Appel direct en classe svp sur cette activité)
Documents de cours : open document ou pdf
Résumé : Version HTML ou imprimable ou PDF (couleur ou gris)
1 - Gérer les liens vers les pages locales
Pour l'instant, vos liens ne désignent que des pages situées sur le Web. Vos URL correspondent à des ressources présentes sur un site Web (en joignable en http ou https).
Mais lorsqu'on crée une page et qu'on la place sur un serveur, elle peut facilement joindre les autres pages de votre site sans avoir besoin de donner le nom du serveur : vous êtes déjà sur la machine qui contient ces fichiers HTML !
Dans ce cas, il suffit de ne donner que la dernière partie de l'URL et on parle d'adresse locale.
Passons à l'exercice pratique :
01° Dans l'un de vos dossiers de travail, reproduire la structure ci-dessous en créant un dossier et un sous-dossier. Créer ensuite les trois fichiers HTML différents nommées page_1.html, page_2.html, et page_3.html à l'aide des trois codes ci-dessous.
📁 test_liens
📁 pages_test
📄 page_1.html
📄 page_2.html
📄 page_3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>TEST DES LIENS</title>
<link rel="stylesheet" href="style_1.css" />
</head>
<body>
<main>
<h1>Voici la page 1</h1>
</main>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>TEST DES LIENS</title>
<link rel="stylesheet" href="style_1.css" />
</head>
<body>
<main>
<h1>Voici la page 2</h1>
</main>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>TEST DES LIENS</title>
<link rel="stylesheet" href="style_1.css" />
</head>
<body>
<main>
<h1>Voici la page 3</h1>
</main>
</body>
</html>
|
Sauvegardez bien les 3 fichiers différents dans le même dossier pages_test et en leur donnant le nom qui apparaît dans les codes HTML. C'est important pour la localisation de vos pages via les liens.
02° Créer maintenant des liens permettant d'atteindre les pages 2 et 3 depuis la page 1. Il faudra par exemple placer les liens suivants dans une balise nav. Faire ensuite de mêmes avec les pages 2 et 3 : vous devrez au final pour passer d'une page à l'autre sans aucun problème. Sinon, pensez à demander conseil.
<p><a href="page_1.html">PAGE 1</a></p>
<p><a href="page_2.html">PAGE 2</a></p>
<p><a href="page_3.html">PAGE 3</a></p>
...CORRECTION...
Voici le code de la page 1. Pour la page 2 et 3, on a la même chose en corrigeant la ligne 17 pour afficher le bon numéro de la page.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 | <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>TEST DES LIENS</title>
<link rel="stylesheet" href="style_1.css" />
</head>
<body>
<nav>
<p><a href="page_1.html">PAGE 1</a></p>
<p><a href="page_2.html">PAGE 2</a></p>
<p><a href="page_3.html">PAGE 3</a></p>
</nav>
<main>
<h1>Voici la page 1</h1>
</main>
</body>
</html>
|
Normalement, cela marche sans aucun problème en donnant juste le nom du fichier de la page à atteindre. Pourquoi ? Tout simplement car on donne une adresse relative à la position actuelle du fichier HTML qui contient le lien.
Si vous regardez bien l'adresse fournie, vous pourrez voir qu'elle ne commence pas par un slash / .
Adresse relative - Cas des fichiers placés dans un même dossier
Imaginons un code situé dans le fichier page_1.html.
Un lien sur cette page indique href="page_2.html" sans plus d'indication.
Comme l'adresse ne commence pas un slash, il s'agit d'une adresse relative : cela veut dire qu'il faut chercher un fichier HTML nommé "page_2.html" dans le même dossier que celui de la page page_1.html.
📁 test_liens
📁 pages_test
📄 page_1.html
📄 page_2.html
📄 page_3.html
Ici, il existe bien un document page_2.html dans le même dossier que page_1.html.
Compliquons les choses : nous voudrions créer un quatrième fichier nommé page_4.html qui se trouvera dans un sous-sous dossier qu'on nommera encore_plus_loin.
03° Créer le fichier page_4.html au bon endroit (c'est à dire dans le dossier encore_plus_loin). Il faudra customiser cette 4e page pour la distinguer des trois premières.
Voilà la structure des enregistrements :
📁 test_liens
📁 pages_test
📄 page_1.html
📄 page_2.html
📄 page_3.html
📁 encore_plus_loin
📄 page_4.html
04° Rajouter les liens entre les quatre pages.
Normalement, cela ne fonctionne pas pour la page 4. Pourquoi ?
...CORRECTION...
Simplement parce que le fichier page_4.html ne se situe pas au même endroit que les trois autres. Ainsi, si on cherche page_4.html dans le dossier pages_test, on ne le trouve pas.
📁 test_liens
📁 pages_test
📄 page_1.html
📄 page_2.html
📄 page_3.html
📁 encore_plus_loin
De la même façon, lorsqu'on est sur la page page_4.html, on ne parvient pas à trouver page_1.html, page_2.html et page_3.html puisqu'on cherche dans le dossier encore_plus_loin.
📁 encore_plus_loin
📄 page_4.html
Il faut falloir indiquer le chemin à suivre pour retrouver page_4.html, à savoir : aller dans le sous-répertoire encore_plus_loin.
Il faut écrire le lien en rajoutant l'accès relatif.
Adresse relative - Cas des fichiers placés dans des dossiers différents
Une adresse est dite adresse relative lorsque son point de départ est le fichier actuel et pas la racine du site (racine identifiée par /).
📁 test_liens
📁 pages_test
📄 page_1.html
📄 page_2.html
📄 page_3.html
📁 encore_plus_loin
📄 page_4.html
Si on fournit une adresse relative dans le fichier page_1.html, on part de pages_test.
Si on fournit une adresse relative dans le fichier page_4.html, on part de encore_plus_loin.
Atteindre un fichier situé dans un sous-dossier
Il suffit de fournir le chemin à suivre, en utilisant des slashs après chaque nom de dossier.
Ainsi, pour atteindre page_4.html situé dans encore_plus_loin à partir d'un lien fourni dans page_1.html, il faut indiquer ceci :
1 | <a href="encore_plus_loin/page_4.html">Vers la page 4</a>
|
Cela veut donc dire :
- Partant du dossier pages_test (car le lien est dans page_1.html)
- Aller dans le dossier encore_plus_loin
- Et tenter d'y trouver le fichier page_4.html
Atteindre un fichier situé hors du dossier actuel
Si on part d'un lien fourni dans page_4.html, on ne doit pas descendre dans les dossiers pour atteindre les autres fichiers html. Au contraire, il faut remonter.
Pour signaler qu'on doit remonter l'arborescence, il faut simplement noter .. puis un slash / qui indique qu'on donne la suite de l'adresse derrière.
Par exemple, pour trouver page_1.html à partir d'un lien donné dans page_4.html, il faut écrire ceci :
1 | <a href="../page_1.html">Vers la page 1</a>
|
Cela veut dire :
- Partant du dossier encore_plus_loin qui est le dossier du fichier page_4.html)
- Remonter dans le dossier supérieur (ou dossier parent) et
- Tenter d'y trouver le fichier page_1.html
✎ 05° Finaliser les quatre pages pour que les liens fonctionnent.
...CORRECTION...
Exemple de code pour le fichier page_1.html :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 | <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>TEST DES LIENS</title>
<link rel="stylesheet" href="style_1.css" />
</head>
<body>
<nav>
<p><a href="page_1.html">PAGE 1</a></p>
<p><a href="page_2.html">PAGE 2</a></p>
<p><a href="page_3.html">PAGE 3</a></p>
<p><a href="encore_plus_loin/page_4.html">PAGE 4</a></p>
</nav>
<main>
<h1>Voici la page 1</h1>
</main>
</body>
</html>
|
Exemple de code pour le fichier page_4.html :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 | <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>TEST DES LIENS</title>
<link rel="stylesheet" href="style_1.css" />
</head>
<body>
<nav>
<p><a href="../page_1.html">PAGE 1</a></p>
<p><a href="../page_2.html">PAGE 2</a></p>
<p><a href="../page_3.html">PAGE 3</a></p>
<p><a href="page_4.html">PAGE 4</a></p>
</nav>
<main>
<h1>Voici la page 4</h1>
</main>
</body>
</html>
|
Et si on doit remonter de deux niveaux ?
Il suffit de placer deux fois les points.
1 | <a href="../../page_1.html">Vers la page 1</a>
|
2 - Les images
Maintenant que vous savez créer des adresses relatives à la position du fichier qui lance l'appel, vous allez pouvoir afficher des images.
Pour insérer des images dans une page html, il va falloir utiliser la balise <img>.
HTML gère par exemples les formats suivants :
- les png : compression mais sans perte de qualité de l'image, couche de transparence possible
- les jpeg (ou .jpg) : plus de compression mais une dégradation de la qualité de l'image, pas de transparence
- les gif : peu de qualité mais possibilité de transparence et de créer des gif animés
Comme on veut afficher une image, il faut lui donner le nom et la localisation de l'image à travers l'attribut src, pour source.
Nous allons faire quelques exemples avec l'image du sigle Creative Commons et du sigle des codes OpenSource. Nous en profiterons pour donner quelques indications sur ces licences.
06° Téléchargez les images ci-dessus (clic-droit, enregistrer sous) et placez les comme indiqué ci-dessous : en gros, on met la première au même endroit que la page html et l'autre dans un sous-dossier nommé mes_images.
📁 travail
📄 page_1.html
📄 cc.png
📁 mes_images
📄 Open_Source.png
Adressage relatif
Pour afficher cc.png à partir d'un code source situé dans fichier page_1.html, c'est facile : comme l'image est dans le même dossier que le fichier HTML, donnez simplement son nom (src="cc.png") permet de la trouver avec l'adressage relatif.
Pour afficher l'image encodée dans le fichier Open_Source.png à partir d'un code dans fichier page_1.html, c'est plus délicat : il faut indiquer la position du dossier contenant l'image à l'aide de son adresse relative, sachant qu'on part du dossier travail où se trouve la page html d'appel : src="mes_images/Open_Souce.png"
07° Rajouter les lignes suivantes dans votre fichier HTML pour afficher correctement les deux images sur votre page.
1
2 | <img src="cc.png">
<img src="mes_images/Open_Source.png">
|
Normalement, nous avons :
Les deux images sont l'une à côté de l'autre la balise img agit comme une balise inline (comme <a>) et pas comme une balise block (comme <p>).
Enfin presque : en réalité, nous verrons que c'est une balise inline-block :
- Comme les balises inline, elle ne force pas le passage à la ligne
- Comme les balises block, elle permet de fixer la largeur de la balise avec l'attribut width.
On voit également que la balise <img> est une balise orpheline : elle ne contient que des attributs et n'a pas de balise de fermeture. Du coup, on peut rien placer entre ouverture et fermeture puisqu'on ne place qu'une seule balise.
Le seul moyen de donner des informations au navigateur est donc d'utiliser les attributs.
En HTML4, elle devait finir par /, comme sur les lignes 1 et 2 ci-dessous. C'était plus clair car on voyait clairement qu'on la fermait directement. Mais depuis HTML5, il n'y a plus d'obligation de le faire.
HTML 4 - Ligne 1
HTML 4 - Ligne 2 | <img src="cc.png" />
<img src="mes_images/Open_Source.png" />
|
Avec HTML5, ce n'est plus obligatoire.
HTML 5 - Ligne 1
HTML 5 - Ligne 2 | <img src="cc.png">
<img src="mes_images/Open_Source.png">
|
Enfin, l'attribut src peut également contenir une URL pointant vers un site externe distribuant l'image.
08° Rajoutez une ou deux images en utilisant directement l'URL d'une image distribuée par un site Web. Pour trouver son adresse, il suffit souvent de faire un clic droit et de rechercher le choix 'Copier l'adresse de l'image'.
Tentez de récupérer une image ayant une adresse courte. Pour cela, ne restez pas sur la page présentant l'ensemble de images du moteur de recherche. Il faut cliquer sur l'image et tenter de prendre son adresse sur le site Web sur laquelle elle apparaît.
Si votre adresse est très très longue, c'est qu'il s'agit d'une adresse intégrant directement les données dans l'URL de la ressource. Ca évite au serveur de fournir les données lorsqu'on utilise cette adresse : les données de l'image sont directement stockées dans l'adresse !
Exemple d'URL d'image correcte car courte
http://detechter.com/wp-content/uploads/2013/08/python.png
En insérant une URL de ce type, vous utiliserez les ressources du serveur du site Web detechter.com.
Exemple d'adresse d'image en version longue, données intégrées
Le site comme Google ne désirent pas qu'on utilise leur propre ressource énergétique pour afficher vos images sur votre propre site. Il fournisse alors les images dans les vignettes visibles sur une recherche avec une très très longue URL qui contient en réalité directement les octets de l'image...
Ce que vous allez voir ci-dessous est juste la succession d'octets en base 64, un ensemble de 64 chiffres.
Comme vous pouvez le voir, cette fois, on n'utilise pas le protocole http mais un protocole data : on reste en local, les données de l'image sont directement codées dans l'URL.
data:image/jpeg;base64,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
Texte alternatif
L'attribut alt permet d'afficher un texte alternatif si l'image ne peut s'afficher correctement pour une raison ou une autre (ici, j'ai volontairement fait l'erreur de remplacer les .png par des .gif).
1
2 | <img src="cc.gif" alt="Logo CC">
<img src="mes_images/Open_Source.gif" alt="Logo Open Source">
|
09° Testez le code fourni juste au dessus.Ca devrait donner le test ci-dessous.
Width et heigth
Autres attributs qui sont normalement obligatoires si vous voulez que votre page ne bouge pas constamment au fur et à mesure du téléchargement des images : les attributs width et height.
Ainsi, normalement, il faut noter ceci dans votre code:
1
2 | <img src="cc.png" alt="Logo CC" width="150" height="150">
<img src="mes_images/Open_Source.png" alt="Logo Open Source" width="165" height="165">
|
Les valeurs à fournir sont en pixels. Il suffit d'aller les chercher dans les propriétés de l'image.
Attention, si vous dimensionnez l'image avec des valeurs plus petites, l'image reste aussi lourde qu'avant en terme d'octets ! Il s'agit uniquement des dimensions d'affichage.
Mais c'est assez lourd à faire. C'est quelque chose qu'un générateur automatique de page html (en Php ou en Pyhton) pourrait faire de façon automatique par contre.
Title : texte au survol
L'attribut title qui permet d'afficher un texte lorsqu'on survole l'image.
1
2 | <img src="cc.png" alt="Logo CC" width="150" height="150" title="LOGO CC">
<img src="mes_images/Open_Source.png" alt="Logo Open Source" width="165" height="165" title="LOGO OPEN SOURCE">
|
10° Testez.Ca devrait donner le résultat ci-dessous.
Image et Lien
Plutôt que de placer un texte à l'intérieur d'une balise a de lien, on peut utiliser une image.
A titre d'exemple, voilà une image-lien permettant d'accéder à la page Wikipédia traitant de l'Open Source. Si vous cliquez dessous, vous allez être transporté là-bas. Et, il faudra revenir ici à la main...
1
2
3 | <a href="https://fr.wikipedia.org/wiki/Open_source">
<img src="mes_images/Open_Source.png" alt="https://fr.wikipedia.org/wiki/Open_source" width="165" height="165" title="https://fr.wikipedia.org/wiki/Open_source">
</a>
|
✎ 11° Créer deux liens en utilisant des images. Votre choix.
3 - Balise br
Nous avons vu une première balise orpheline la balise img.
Nous allons voir deux autres balises orphelines.
La balise br qui permet de passer à la ligne dans un paragraphe et la balise hr qui permet de placer une barre de séparation dans votre page.
1
2
3
4
5 | <p>Nous pouvons écrire une phrase et passez simplement à la ligne.<br>
Nous pouvons ainsi avoir un vrai paragraphe avec des passages à la ligne sans espace.</p>
<p>Par contre, le prochain paragraphe est bien séparé du précédent.</p>
<hr>
<p>L'élément séparateur est bien visible je pense.</p>
|
Ce qui donne :
Nous pouvons écrire une phrase et passez simplement à la ligne.
Nous pouvons ainsi avoir un vrai paragraphe avec des passages à la ligne sans espace.
Par contre, le prochain paragraphe est bien séparé du précédent.
L'élément séparateur est bien visible je pense.
4 - Balise générique inline : span
Nous avons vu que la balise div permet de créer un conteneur pour agir sur plusieurs balises à la fois. Mais c'est une balise block. On passe à la ligne avant la balise d'ouverture et après la balise de fermeture.
Mais comment faire pour afficher un texte en rouge sur plusieurs mots, mais pas tout le paragraphe ?
Et bien, il faut entourer votre sélection par un balise permettant de créer un conteneur, mais un conteneur qui ne passe pas à la ligne : la balise span.
12° Utiliser l'exemple ci-dessous et le modifier pour être certain d'avoir compris le principe.
1
2
3
4
5 | <p>Nous pouvons <span style="color:green;">écrire une phrase</span> et passez simplement à la ligne.<br>
Nous pouvons ainsi avoir un vrai paragraphe avec des passages à la ligne sans espace.</p>
<p>Par contre, <span style="color:red;">le prochain</span> paragraphe est bien séparé du précédent.</p>
<hr>
<p>L'élément séparateur est bien visible je pense.</p>
|
Vous devriez obtenir ceci
Nous pouvons écrire une phrase et passez simplement à la ligne.
Nous pouvons ainsi avoir un vrai paragraphe avec des passages à la ligne sans espace.
Par contre, le prochain paragraphe est bien séparé du précédent.
L'élément séparateur est bien visible je pense.
Balises génériques
Retenons donc que la balise-conteneur générique block (avec passage à la ligne) est la balise div.
La balise-conteneur générique inline est la balise span (sans passage à la ligne).
5 - Web sémantique
Il reste encore quelques balises importantes. Pas pour l'apparence qu'elles engendrent mais pour le sens que le moteur de recherche va leur donner.
Nous n'allons en voir que quelques unes, pour comprendre le principe uniquement.
Les trois balises que nous allons voir sont des balises inline.
Si vous voulez mettre un bout de texte en emphase, il suffit de le placer dans une balise em. Vous transmettez alors l'idée que ce bout de phrase à une certaine importance dans votre article. Par défaut, ce texte va apparaître en italique, mais nous verrons qu'on peut en faire ce qu'on veut avec le CSS.
Si vous voulez indiquer qu'un bout de texte est très important, il suffit de le placer dans une balise strong. Par défaut, ce texte va apparaître en gras.
Si vous voulez indiquer qu'un bout de texte est extrêmement important, il suffit de le placer dans une balise mark. Par défaut, ce texte va apparaître surligné en jaune. Difficile de faire plus visible.
13° Utiliser l'exemple ci-dessous et le modifier pour être certain d'avoir compris le principe.
1
2
3
4
5 | <p>Nous pouvons <em>écrire une phrase</em> et passer simplement à la ligne.<br>
Nous pouvons ainsi avoir un vrai paragraphe avec des passages à la ligne sans espace.</p>
<p>Par contre, <strong>le prochain</strong> paragraphe est bien séparé du précédent.</p>
<hr>
<p>L'élément séparateur est bien <mark>visible</mark> je pense.</p>
|
Vous devriez obtenir ceci
Nous pouvons écrire une phrase et passer simplement à la ligne.
Nous pouvons ainsi avoir un vrai paragraphe avec des passages à la ligne sans espace.
Par contre, le prochain paragraphe est bien séparé du précédent.
L'élément séparateur est bien visible je pense.
On ne peut pas ouvrir et fermer les balises dans n’importe quel ordre :
On commence par <p> donc il faut finir par </p>.
Ainsi <p> … <em> … </em> … </p> est une structure correcte : <p> englobe bien <em>.
Par contre, <p> … <em> … </p> … </em> n’est pas une structure correcte : <p> et <em> sont imbriquées l’une dans l’autre sans que l’une englobe l’autre.
6 - Commentaires
Il reste à voir comment insérer un commentaire qui sera présent dans le code mais qui ne sera pas affiché à l’écran.
<!-- Commentaires -->
Les commentaires dans un fichier HTML sont indiqués par des chevrons. Les voici :
Le début du commentaire est codé par <!--.
La fin de la zone de commentaire est codée par -->.
Voici un exemple d'utilisation de commentaires sur une ligne puis sur plusieurs lignes :
<p>Je veux mettre un <mark>élément</mark> en balise mark</p>
<!-- Ici je place un commentaire, une explication -->
<p>Et ici, je reviens sur un contenu à afficher</p>
<!-- Le plus beau, c'est qu'on peut faire
des commentaires sur plusieurs lignes
<p>Ah ah ah</p>
Et que les balises contenues dans le commentaire n'auront
aucun effet -->
<p>C'est la fin, avec un nouvel affichage</p>
Ce code va provoquer l'affichage suivant :
Je veux mettre un élément en balise mark
Et ici, je reviens sur un contenu à afficher
C'est la fin, avec un nouvel affichage
14° Rajouter un commentaire signalant où se trouve le début de votre code et un autre pour signaler le début de votre liste. Le commentaire devrait apparaître dans une couleur différente du reste du texte sur votre éditeur.
7 - FAQ
Structure de la balise main
Un petit complément pour la forme :
On peut aller encore plus loin dans la codification des informations à afficher en fournissant des balises à l'intérieur de la balise <main> :
Contenu possible de la balise main
La balise <main> peut contenir par exemple les balises suivantes :
- D'autres balises <header>, <nav> ou <footer> pour l'introduction, un menu de navigation spécifique et une conclusion
- Des balises <article> pour les parties quasi-indépendantes du reste
- Des balises <section> pour délimiter les différentes parties de la page (I-II-III ect ...)
- Des balises <aside> pour les petits textes traitant d'un sujet presque annexe au sujet principal.
Avec une balise <main> composée d'autres balises, on peut obtenir ceci :
<body>
<header>Header de la page</header>
<main>
<header>Introduction de la page</header>
<nav>Navigation du main</nav>
<section>Contenu principal</section>
<footer>Conclusion de la page</footer>
</main>
<footer>Bas de page</footer>
</body>
Si votre page comporte plusieurs parties, vous pourriez aussi utiliser cette structure :
<body>
<header>Header de la page</header>
<main>
<header>Introduction de la page</header>
<nav>Navigation du main</nav>
<section>
<h2>Première partie</h2>
<p>Bla bla</p>
</section>
<section>
<h2>Seconde partie</h2>
<p>Bla bla aussi</p>
</section>
<footer>Conclusion de la page</footer>
</main>
<footer>Bas de page</footer>
</body>
Heureusement pour nous, il n'est pas obligatoire de suivre cela dans le détail. Par contre, structurer un minimum sa page est nécessaire. D'ailleurs la différence d'utilisation des différentes balises est parfois suffisamment floues pour être interchangées sans trop de problèmes.
Outils trouver-modifier
Et si on décide de changer le nom d'un fichier html, il faut changer son nom dans toutes les pages ? Oui. Et ça peut être long.
Pour l'instant, vous n'avez pas la possibilité de créer un menu générique dont on donnerait le code à un endroit. Ce serait plus simple : il suffirait de modifier ce code pour modifier toutes les pages (un peu comme avec le CSS). Il faut pour cela utiliser un langage de progammation générant automatiquement la page html à envoyer à l'utilisateur. Or, pour l'instant, vous savez coder vous même la page, pas le faire écrire par un autre programme.
Comment faire alors ?
C'est là qu'intervient l'une des fonctionnalités importantes d'un bon éditeur de code : la recherche et le remplacement automatique d'un ensemble de caractères par un autre ensemble.
Dans Notepad++ ou Notepadqq :
Aller dans le menu RECHERCHE puis REMPLACER.
En choisissant l'onglet Rechercher dans les fichiers d'un dossier ET en choisissant correctement le dossier à traiter et en sélectionnant sous-dossier, vous pouvez alors modifier (dans tous les fichiers du répertoire sélectionné) automatiquement une chaîne de caractères pour la remplacer pour une autre.
Avec Atom, il faut :
- appuyer sur
Altde façon à afficher le menu. - Dans le menu Find, vous trouverez deux fonction de recherche : Find in Buffer vous permet de chercher une séquence de mots dans le fichier actuel et Find in Project vous permet de chercher cette séquence dans tous les fichiers contenus dans un dossier et ses sous-dossiers.
Puissant mais dangereux parfois. Pensez toujours à vous demander si d'autres choses ne risquent pas d'être modifiées au passage avant d'appuyer sur OK...
Activité publiée le 11 12 2019
Dernière modification : 13 01 2021
Auteur : ows. h.