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
Les rôles spécifiques des balises html, head et body.
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 le Web
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é.
Important : si vous êtes sur une machine sous Windows, pensez à aller dans affichage et demander d'afficher les extensions de fichier.
01° En utilisant au besoin le rappel ci-dessous sur les balises a, utiliser les 3 URLS présentes dans votre fichier chanson.html de l'activité précédente pour générer 3 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 !
Demandez de l'aide si vous n'y arrivez pas malgré le rappel.
(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 !
✌ 02° 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.
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 ?
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.
03° 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.
Attention aux noms : ils contiennent des underscores.
📁 test_liens
📁 pages_test
📄 page_1.html
📄 page_2.html
📄 page_3.html
Code source de page_1.html :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html><htmllang="fr"><head><metacharset="UTF-8"/><title>TEST DES LIENS</title></head><body><main><h1>Voici la page 1</h1></main></body></html>
Code source de page_2.html :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html><htmllang="fr"><head><metacharset="UTF-8"/><title>TEST DES LIENS</title></head><body><main><h1>Voici la page 2</h1></main></body></html>
Code source de page_3.html :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html><htmllang="fr"><head><metacharset="UTF-8"/><title>TEST DES LIENS</title></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.
04 ✌° 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.
<!DOCTYPE html><htmllang="fr"><head><metacharset="UTF-8"/><title>TEST DES LIENS</title><linkrel="stylesheet"href="style_1.css"/></head><body><nav><p><ahref="page_1.html">PAGE 1</a></p><p><ahref="page_2.html">PAGE 2</a></p><p><ahref="page_3.html">PAGE 3</a></p></nav><main><h1>Voici la page 1</h1></main></body></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.
05° 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.
Tenter de créer les liens entre ces 4 pages. Normalement, vous ne devriez pas y parvenir !
Question : pourquoi est-ce que cela ne fonctionne pas ?
Voilà la structure des enregistrements :
📁 test_liens
📁 pages_test
📄 page_1.html
📄 page_2.html
📄 page_3.html
📁 encore_plus_loin
📄 page_4.html
...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.
2.2 Adresse relative, cas des fichiers placés dans des dossiers différents
Point de départ d'une adresse relative
Une adresse est 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
<ahref="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
<ahref="../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
06 ✌° Finaliser les quatre pages pour que les liens fonctionnent.
07 ✔° Utiliser votre éditeur de code pour créer la page HTML dont le contenu est fourni ci-dessous.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html><html><head><metacharset="utf-8"/></head><body><h1>Ma première page avec une image</h1><p>Sigle de Blender 3D, un logiciel gratuit permettant de réaliser des scénes animées en 3D :</p><imgsrc="https://doc.infoforall.fr/commun/images/accueil_blender_150.png"></body></html>
Choisir comme nom d'enregistrement web_image.html. Rajouter bien l'extension .html.
Visualiser le résultat en allant dans le bon répertoire et en cliquant sur ce fichier HTML.
Ne passez pas à la suite tant qu'aucune image ne s'affiche dans le navigateur. Demandez de l'aide au besoin.
3.1 la Balise img
Après des années de pages HTML remplies uniquement de textes, grande nouveauté en 1993 : l'apparition de la balise orpheline <img>.
A - Trouver l'URL d'une image
Pour cela, il faut :
cliquer jusqu'à atteindre l'image directement dans un site, il ne faut pas rester sur la page de Google Image !
faire un clic droit dessus
utiliser ouvrir l'image dans un nouvel onglet et
copier son URL réelle qui se trouvera alors dans la barre des adresses.
Exemple : trouver l'URL de cette image :
Si vous trouvez pas https://doc.infoforall.fr/commun/images/accueil_blender_150.png, pensez à me demander de l'aide.
B - Utiliser la balise img
La balise d'ouverture <img> doit contenir un attribut src (pour source) qui doit contenir l'URL de votre image.
Notez la présence d'un guillemet qui signale le début d'URL et d'un autre guillemet qui signale la fin de l'URL :
08 ✌° Modifier maintenant le fichier HTML suivant de façon à
chercher l'URL d'une image correspondant à un thème qui vous intéresse aujourd'hui.
afficher un titre qui correspondrait à votre image (en utilisant une balise <h1> par exemple)
afficher l'image (en utilisant une balise <img> (à vous de configurer correctement src) avec une largeur fixée à 300 pixels (en configurant correctement width)
afficher une phrase qui explique ce que représente l'image (en utilisant un élément p composé de <p> et </p>)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html><html><head><metacharset="utf-8"/></head><body><h1>Ma première page avec une image</h1><p>Sigle de Blender 3D, un logiciel gratuit permettant de réaliser des scénes animées en 3D :</p><imgsrc="https://doc.infoforall.fr/commun/images/accueil_blender_150.png"></body></html>
Attention, deux remarques :
Ne récuperez pas l'adresse du moteur de recherche mais trouvez l'URL de l'image en allant sur le site lui-même.
Il est possible que certaines images ne s'affichent pas car le serveur du site stockant l'image peut refuser de fournir l'image à quelqu'un d'autre que lui-même.
3.2 Informatique et droit : les licences
Normalement, il ne faut pas utiliser les URL d'images d'un autre site Web que le votre.
Pourquoi ?
Simplement car vous utilisez les ressources du site pour afficher des images sur le votre. C'est comme si vous utilisiez le compteur électrique de quelqu'un d'autre pour éclairer votre propre maison !
Même si vous enregistrez les images sur votre serveur personnel, vous n'avez pas nécessairement le droit de les afficher sur vos pages sans autorisation de l'auteur de l'image. Pour cela, il suffit de voir si la licence de l'image est du type CREATIVE COMMONS ou DOMAINE PUBLIC.
DOMAINE PUBLIC : vous pouvez utiliser l'image comme vous voulez.
CREATIVE COMMONS : vous pouvez utiliser l'image sous certaines conditions.
BY : vous devez donner l'identité du créateur de l'image
SA : (pour Share Alike) vous devez accepter que votre création soit partagée également en tant que CREATIVE COMMONS.
NC : utilisation non commerciale uniquement
COPYRIGHT : vous n'avez pas le droit d'utiliser l'image, à moins d'en payer les droits si le propriétaire accepte.
09° Créer maintenant une page qui contient au moins deux images dont les balises <img ...> sont directement à la suite. Les deux images devront avoir une largeur de 200 pixels à l'affichage. A vous de gérer en utilisant l'attribut width.
Il faudra donc que votre page contienne deux balises <img> l'une à la suite de l'autre.
Pensez également aux autres balises de base (<html>, <head>, <body>) : votre page HTML ne doit pas comporter que les balises images mais être une vraie page HTML.
10° Observer l'affichage de votre page via un navigateur. Les deux images sont-elles l'une à côté de l'autre ou l'une en dessous de l'autre ?
Comme vous l'avez constaté, les balises images ne sont pas des balises dites "block" qui passent automatiquement à la ligne. Les images s'affichent donc l'une derrière l'autre, on ne passe à la ligne que s'il n'y a plus assez de place.
L'une des manières les plus simples de créer une image par ligne ? La placer dans une balise <p>.
11° Modifiez votre code en plaçant les deux balises <img> dans leur propre balise paragraphe :
<p> <img ...> </p> <p> <img ...> </p>
3.3 La balise image n'est ni une balise block, ni une balise inline
La balise img n'est pas une balise block : le navigateur ne place pas l'image sur une ligne indépendante mais peu placer plusieurs images sur la même ligne.
Deux balises images directement l'une derrière l'autre :
<img ...> <img ...>
Deux balises images insérées chacune dans un paragraphe :
<p> <img ...> </p><p> <img ...> </p>
En réalité, ce n'est pas non plus une simple balise inline. En effet, on ne peut pas choisir la largeur d'une balise inline. Pour faire court, la balise img est inline-block : elle ne passe pas à la ligne, mais on peut choisir sa largeur.
3.4 Créer un lien avec une image plutôt qu'un texte
On peut placer un lien sur une image. Il suffit pour cela de placer la balise <img> à l'intérieur d'une balise <a> !
Dans ce cas, on obtient un lien en cliquant sur une image et pas un lien en cliquant sur un texte. Un exemple ci-dessous où on arrive sur le site de Blender3D en cliquant sur l'image :
13 ✌° Utiliser une image sur votre page pour créer un lien vers un site de votre choix : en cliquant sur l'image, cela doit ouvrir une page vers un site Web.
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.
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
<imgsrc="cc.gif"alt="Logo CC"><imgsrc="mes_images/Open_Source.gif"alt="Logo Open Source">
Pour l'instant, vous êtes parvenus à afficher des images qui sont déjà stockées sur un serveur distant.
Le problème ?
Vous utilisez les ressources du site pour afficher votre page. Pas très civique.
Si ce site supprime son image ou la place ailleurs, votre page ne parviendra plus à afficher l'image. C'est gênant.
Nous allons faire autrement : nous allons enregistrer les images sur notre propre ordinateur et afficher l'image en fournissant directement son adresse sur notre propre disque dur.
Nous allons donc maintenant enregistrer les images en les plaçant dans le même dossier que le fichier HTML.
4.1 Adressage relatif des images
Imaginons trois fichiers (un html et deux images) placés dans le même dossier :
📁 travail
📄 ma_page.html
📄 mon_image.png
📄 mon_autre_image.png
Pour afficher les deux images à l'aide du fichier HTML ma_page.html, il suffit d'insérer ceci dans le code :
1
<imgsrc="mon_image.png">
1
<imgsrc="mon_autre_image.png">
On remarquera bien qu'il ne s'agit pas d'adresses absolues : elles ne commencent pas par un slash.
On donne bien ici des adresses relatives à la position du fichier HTML.
Comme on ne donne pas d'indication supplémentaire, cela veut dire qu'on doit chercher l'image dans le même répertoire que le fichier HTML. C'est une adresse relative à la position du fichier HTML.
14 ✔° Notez ceci dans votre éditeur de texte :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html><html><head><title>WEB LOCAL</title><metacharset="utf-8"/></head><body><p>Voici une première image :</p><p><imgsrc="image_1.png"></p><p>Et hop, une deuxième :</p><p><imgsrc="image_2.png"></p></body></html>
Enregistrer alors le fichier sous le nom ma_page.html dans un dossier snt créé dans votre répertoire de travail.
15 ✔° Utiliser l'explorateur de votre système d'exploitation pour aller dans ce dossier et ouvrir votre fichier HTML en utilisant un clic-droit et choisir Firefox comme navigateur.
Vous devriez constater que les images ne sont pas présentes à l'écran. C'est normal : vous ne les avez pas placées dans le dossier !
Pour l'instant, votre dossier doit ressembler à ceci :
📁 snt
📄 ma_page.html
16 ✔° Télécharger deux images de votre choix (de type png ou jpg) et les placer dans le dossier snt, à côté de votre fichier HTML.
Cela donnerait une structure du type :
📁 snt
📄 ma_page.html
📄 LE_NOM_DE_VOTRE_IMAGE1
📄 LE_NOM_DE_VOTRE_IMAGE2
17 ✔° Modifier les noms des images dans le dossier en les renommant comme dans le fichier HTML :
image_1.png
image_2.png
Cela donnerait une structure du type :
📁 snt
📄 ma_page.html
📄 image_1.png
📄 image_2.png
18 ✌° Actualiser votre page sur Firefox ou relancer la page : vous devriez voir vos images sur la page maintenant. Sinon, il faut me demander conseil. Sûrement un nom qui ne concorde pas ou le fait que les images ne soient pas au bon endroit.
19 ✌° Réaliser les tâches suivantes :
Ouvrir dans votre éditeur de texte votre page HTML traitant de votre chanson (clic-droit sur ce fichier, ouvrir avec...).
Trouver deux images (libres de droit si vous comptez publier votre page un jour ou l'autre) qui sont liées à votre chanson.
Sauvegardez vos deux images localement dans le même répertoire que votre fichier HTML/
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.
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.
20° Utiliser l'exemple ci-dessous et le modifier pour être certain d'avoir compris le principe.
1
2
3
4
5
<p>Nous pouvons <spanstyle="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, <spanstyle="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.
6.1 Balise span ("inline")
La balise-conteneur générique block (engendrant un passage à la ligne) est la balise div.
La balise-conteneur générique inline (n'engendrant aucun passage à la ligne) est la balise span (sans passage à la ligne).
1
<p>Voici <spanstyle="color:green;">comment encadrer</span> des choses.<p>
Nous donnerons plus d'utilité à ces balises génériques lorsque nous aborderons le CSS.
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 fairedes commentaires sur plusieurs lignes<p>Ah ah ah</p>Et que les balises contenues dans le commentaire n'aurontaucun effet --><p>C'est la fin, avec un nouvel affichage</p>
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 Alt de 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 19 11 2023
Dernière modification : 26 11 2023
Auteur : ows. h.
