Formation · tes documents
Ta signature de mail en HTML : ton nom, ton numéro, ta photo, ton logo.
En bref Ce que tu fais : tu donnes tes coordonnées et deux images, Claude écrit le fichier, tu le regardes et tu le poses.Tu obtiens une signature propre, légère, qui reste lisible sur un téléphone.Compte vingt minutes, dont cinq pour l'essai d'envoi.En deux mots le contexte de cette leçonDans les leçons d'avant, Claude a écrit pour Marie des lettres et des messages. Ici, c'est ce qui finit chacun de tes mails. Au bas de chaque mail, il y a ta signature. C'est souvent la seule chose de toi que le destinataire garde sous les yeux. Dans l'onglet Code, Claude écrit un fichier signature.html avec ton nom, ton métier, ton téléphone, ton mail, ton site, ta photo et ton logo, à tes couleurs. Tu la regardes, puis tu la poses dans Gmail ou dans Outlook.
Une signature à tes couleurs , regardée dans ton navigateur, posée dans Gmail et Outlook , avec la différence entre une image hébergée et une image intégrée.
Avant cette leçon Tu arrives ici directement ? Ces leçons préparent ce qu'elle suppose (le dossier, les outils installés) :
Windows
Mac
Touche ton ordinateur ci-dessus : les commandes du guide s'adaptent. Testé sous Windows 11. Les passages Mac suivent la documentation d'Apple et d'Anthropic.
Ce que tu vas faire
Le dossier et la demande à Claude La regarder dans ton navigateur Les images : hébergées ou intégrées La poser dans Gmail La poser dans Outlook, sur le web et dans l'appli Le piège : une signature trop lourde ou en une seule image
La leçon d'avant Contester une erreur et récupérer ton argent : vérifier, réclamer, relancer, le médiateur →
Avant tout : un logo et une photo (fictifs) dans un dossier
Pour s'entraîner, la leçon travaille pour Marie Lefèvre , conseillère à l'« Atelier des Noyers », une entreprise inventée. Télécharge la trousse de la signature : un faux logo, un avatar dessiné (ce n'est la photo de personne) et un petit mot. Pour la tienne, tu prendras ton vrai logo et une photo de toi, carrée, de face, bien éclairée.
Les deux images de la trousse : à gauche m2s-logo.png , le logo inventé de l'Atelier des Noyers ; à droite m2s-photo.png , un avatar dessiné. Tes coordonnées, ton logo, ta photo Claude écrit signature.html Tu regardes, tu ajustes Posée dans Gmail / Outlook Un seul fichier de départ, que tu copies ensuite dans ta messagerie.
01
Le dossier et la demande à Claude
Où : onglet Code de l'application Claude, dans le dossier ma-signature . S'il n'existe pas encore, crée-le dans l'explorateur de fichiers (le Finder sur Mac) : ouvre Documents, clic droit, Nouveau, Dossier, puis copie dedans les deux images de la trousse (clic droit sur le zip, « Extraire tout » ; sur Mac, un double-clic).
Ouvre l'application Claude, puis l'onglet Code . Sous la zone où tu écris, clique sur Choisir… (ou sur le nom du dossier déjà choisi), puis sur Ouvrir un dossier… . Dans la fenêtre Sélectionner un dossier , ouvre Documents. Choisis ma-signature , puis clique sur le bouton Sélectionner un dossier . La première fois, l'app demande Faire confiance à cet espace de travail ? : c'est ton dossier, clique sur Faire confiance à l'espace de travail . Son nom s'affiche ensuite à la place de « Choisir… » : c'est là que Claude travaille.
Le menu de Choisir… : Ouvrir un dossier… est tout en bas. Un dossier déjà ouvert reste dans la liste Récents . Tu as maintenant m2s-logo.png et m2s-photo.png dans le dossier. Écris à Claude tout ce qui doit apparaître. Dis-lui aussi comment la construire : c'est ce qui fait qu'elle tient dans une vraie messagerie.
À écrire dans Claude Code Copier
Écris-moi une signature de mail dans un fichier signature.html.
Marie Lefèvre, conseillère en rénovation, Atelier des Noyers.
Téléphone 01 00 00 00 00, mail marie.lefevre@exemple.example,
site atelier-des-noyers.example.
À gauche la photo m2s-photo.png, à droite mon nom en gras, mon métier,
puis téléphone, mail et site en liens cliquables. Le logo m2s-logo.png
va plus petit en dessous. Couleurs : brique #B5532E et bleu nuit #232A3C.
Construis-la avec un tableau HTML et des styles écrits dans chaque balise,
600 pixels de large au plus, texte en vrai texte (pas dans une image),
polices courantes. Pour l'instant les images sont appelées par leur nom de fichier.
Pourquoi ? tableau, styles dans chaque balise, vrai texteLes messageries lisent le HTML bien plus pauvrement qu'un navigateur. Une mise en page faite de tableaux et de styles écrits dans chaque balise est ce qui se comporte le plus pareil d'une messagerie à l'autre : c'est la méthode habituelle des mails HTML. Je ne l'ai pas mesurée pour chaque messagerie, d'où l'essai d'envoi à la fin.
Le texte en vrai texte, c'est pour que ton numéro puisse être copié, qu'un téléphone propose de l'appeler et qu'un lecteur d'écran le lise.