Une page web personnelle ou d'association

Votre club de marche n'a pas de page. Votre petite-fille vous demande où voir vos aquarelles. Aujourd'hui, vous fabriquez une page web : un titre, du texte, vos photos, une adresse de contact. Elle s'ouvrira sur n'importe quel téléphone.

Objectif : À la fin, vous saurez faire fabriquer une page web simple, avec un titre, du texte et vos photos.

La vidéo

Les sous-titres sont affichés par défaut.

Transcription (le texte de la vidéo)

Dans cette leçon, vous fabriquez une vraie page web. Pour vous-même, pour votre club, pour votre association. Un titre, du texte, vos photos, une adresse de contact. Elle restera chez vous aujourd'hui : nous la mettrons en ligne à la dernière leçon de cette étape. À la fin, vous saurez la fabriquer et la relire avant de la montrer.

Une page personnelle ou d'association répond à quatre questions. Qui sommes-nous. Que faisons-nous. Quand et où. Comment nous joindre. Rien de plus. Une page courte est lue, une page longue est survolée. La forme compte autant que le contenu. Demandez une seule colonne, du texte large, des titres nets, un affichage correct sur téléphone. La plupart de vos visiteurs liront sur un écran de la taille d'une main. Ajoutez une exigence rarement demandée. Le contraste. Du texte noir sur fond blanc se lit à tout âge.

Trois précautions pour les photos. Le poids : une photo de téléphone pèse plusieurs mégaoctets, et la page devient lente. Faites-les réduire. Le rangement : placez-les dans le même dossier que la page, avec des noms courts, sans accent ni espace. Les droits : vos propres photos, ou des images libres de droits. Si des personnes sont reconnaissables, demandez leur accord. Pour des enfants, celui des parents. Et sur la page elle-même, jamais d'adresse privée ni de numéro personnel. Un lieu de rendez-vous public et une adresse de courriel suffisent.

Regardez l'écran. Nous demandons une page pour un club de marche. Une colonne, texte large, contraste fort, lisible sur téléphone. Un titre, une présentation, les sorties du mois, deux emplacements de photos, une adresse de courriel. Et surtout, aucune adresse postale. L'IA répond avec la page et les noms de fichiers à utiliser. Elle a même ajouté une description écrite pour chaque image. Nous enregistrons, nous glissons nos photos dans le même dossier, sous ces noms exacts. Double-clic : les photos apparaissent. L'une pèse quatre mégaoctets, nous la faisons réduire. Dernière relecture, à la place d'un inconnu. Aucun nom de famille, aucun numéro. La page peut être montrée.

À vous maintenant. Choisissez le sujet de votre page. Vous-même, votre club, votre association. Écrivez la demande avec le contenu voulu et la forme. Sans adresse postale, sans numéro personnel. Enregistrez la page dans un dossier neuf. Placez vos photos dedans, renommées sans accent ni espace. Ouvrez la page, puis regardez-la sur votre téléphone. Vous ne pouvez rien casser.

Retenez ceci. Quatre questions suffisent à une bonne page. Qui, quoi, quand et où, comment joindre. Les photos vont dans le même dossier, sous des noms simples, et elles se réduisent avant publication. Rien de privé ne figure sur une page publique. Relisez toujours comme le ferait un inconnu. Dans la prochaine leçon, nous ferons travailler une feuille de calcul toute seule.

L'idée

Une page dit qui, quoi, quand et où, et comment joindre. Rien de privé n'y figure.

La démonstration

Voici l'exemple, entièrement fait sous vos yeux, avant que vous ne le fassiez vous-même.

Nous fabriquons la page d'un club de marche. Nous écrivons dans Claude : « Fabriquez une page web pour le Club de marche des Trois Vallées. Une seule colonne, texte large, contraste fort, lisible sur téléphone. Contenu : un titre, une phrase de présentation, les trois sorties du mois. Puis deux emplacements pour des photos et une adresse de courriel. Ne mettez aucune adresse postale. Donnez-moi ensuite les noms de fichiers à utiliser pour les photos. »

Exemple de réponse : « Voici votre page. J'ai prévu deux emplacements d'image nommés sortie-mai.jpg et groupe.jpg. Placez ces deux photos dans le même dossier que le fichier de la page. J'ai ajouté une description écrite pour chaque image, lue par les logiciels des personnes malvoyantes. Remplacez le texte de présentation par le vôtre. »

La page s'affiche dans le cadre. Deux carrés vides marquent les photos, avec leur nom dessous. Nous enregistrons la page, puis nous glissons nos deux photos dans le même dossier, sous ces noms exacts. Double-clic : les photos apparaissent.

Une photo pèse quatre mégaoctets. Nous demandons comment la réduire, et nous appliquons la méthode indiquée. La page s'ouvre alors sans attente.

Dernière relecture, en nous mettant à la place d'un inconnu. Aucune adresse, aucun numéro, aucun nom de famille. La page peut être montrée.

L'exercice guidé

Vous ne pouvez rien casser.

Vous ne pouvez rien casser. 1. Collez la demande ci-dessus en remplissant les crochets avec votre projet réel. 2. Enregistrez la page dans un dossier neuf, puis placez vos photos dans le même dossier. 3. Renommez vos photos avec les noms exacts indiqués, sans accent ni espace. 4. Ouvrez la page d'un double-clic, puis regardez-la aussi sur votre téléphone. 5. Relisez-la comme le ferait un inconnu, et retirez toute information qui vous gêne.

La consigne à copier :

Fabriquez une page web pour [qui : moi-même, mon association, mon club]. Une seule colonne, texte large, contraste fort, lisible sur téléphone. Contenu : un titre, une phrase de présentation, [ce qu'il faut annoncer : les sorties du mois, mes activités, mes horaires], et [le nombre] emplacements pour des photos. N'écrivez aucune adresse postale et aucun numéro de téléphone. Ajoutez une description écrite pour chaque image. Donnez-moi ensuite les noms de fichiers exacts à utiliser pour mes photos.

Trois vérifications

Cochez chaque phrase quand elle est vraie pour vous :

Je vois ma page s'ouvrir avec son titre, son texte et mes photos affichées.
Je vois que la page reste lisible sur l'écran de mon téléphone.
Je vois que chaque photo a une description écrite.
Je vois qu'aucune adresse postale ni aucun numéro personnel n'y figure.

Le quiz de la leçon

5 questions. La réponse est expliquée tout de suite. Vous pouvez réessayer autant de fois que vous voulez : aucune note n'est gardée.

1. Votre page affiche un carré vide à la place de la photo. Quelle est la cause la plus fréquente ?

2. Votre association veut une page. La présidente propose d'y mettre son adresse et son numéro. Que dites-vous ?

3. Votre page met dix secondes à s'afficher. Vous y avez mis quatre photos prises au téléphone. Que faites-vous ?

4. Une photo de la sortie du club montre douze personnes de face, dont deux enfants. Que faites-vous ?

5. L'IA propose d'ajouter un formulaire qui recueille les noms et adresses des visiteurs. Que faites-vous ?

Garder votre place

Et maintenant

D'ici demain, rassemblez dans un dossier les éléments de votre page : le titre, trois phrases de présentation, et deux photos que vous avez le droit d'utiliser. Renommez les photos sans accent ni espace. La page se fabriquera ensuite en dix minutes. Nous vous reposerons une question dans 3 jours.

Comment avez-vous trouvé cette leçon ?

Deux questions, dix secondes. Vos réponses servent à corriger les leçons suivantes : c'est notre seul moyen de savoir ce qui passe mal.

Les mots de cette leçon

Page web: Un fichier qui s'affiche dans un navigateur, avec du texte, des images et des liens.
Mégaoctet: Une unité de poids pour un fichier. Une photo de téléphone en pèse souvent plusieurs.
Description d'image: Un texte court attaché à une photo, lu à voix haute par les logiciels des personnes malvoyantes.
Contraste: L'écart entre la couleur du texte et celle du fond. Un contraste fort se lit à tout âge.
Données personnelles: Toute information qui identifie quelqu'un : nom, adresse, téléphone, photo de son visage.

Tout le glossaire