Revenir à l’activité précédente.

1ère étape : Créer un compte sur Mozilla Thimble

Thimble est un éditeur de code en ligne permettant de réaliser des pages web à l’aide des langages HTML, CSS et le JavaScript. Cet éditeur est un projet de la Fondation Mozilla, à l’origine du navigateur Firefox.

Attention : Pour fonctionner Thimble a besoin d’utiliser des cookies. Au lycée il faut donc modifier les règles de conservation de l’historique dans l’onglet Vie privée des paramètres de Firefox, ou utiliser le navigateur Chrome.

Demander au professeur une adresse mail à utiliser avec Thimble et créer un compte sur le site :

https://thimble.mozilla.org/fr/

2ème étape : Apprendre les bases des langages HTML et CSS avec Mozilla

Suivre ce tutoriel, qui s’appuie sur les guides en ligne développés par la fondation Mozilla :

https://thimbleprojects.org/icnboissy/394657

3ème étape : Créer une page pour vos peintures

Modifier la page web réalisée avec Thimble :

1. Cliquer sur , puis sur Envoyer un fichier… et téléverser :
   • le GIF animé que vous avez fait avec GIMP ;
   • l’image de la peinture que vous avez choisie sur images.nga.gov ;
   • l’image de la peinture que vous avez modifiée avec GIMP (après détourage, insertion d’un fond et modification des couleurs).
2. Insérer les trois images dans votre pages à l’aide de la balise <img>. Si la licence l’exige, donner l’origine des images utilisées.
3. Insérer une courte description de l’image (par exemple issue de l’encyclopédie en ligne Wikipedia).
4. Rajouter tous les liens hypertextes pertinents. Notamment, faire en sorte que lorsque l’on clique sur l’image originale on arrive sur le site images.nga.gov.

4ème étape : Adapter le style de la page

1. 1. Choisir, à l’aide du site paletton.com, un jeu de couleurs adapté aux couleurs de la peinture que vous avez choisie.
   2. Modifier le fichier style.css en utilisant les codes couleur choisis avec le site (les codes hexadécimaux des couleurs apparaissent au survol de la souris, mais pour les utiliser dans le fichier css, il faut rajouter un ‘#’ devant).
   3. Choisir sur fonts.google.com une ou plusieurs polices de caractère adaptées à votre page web, en cliquant sur .
   4. Utiliser les polices de caractère choisie sur votre page à l’aide de commandes du type :

      • <link href="https://fonts.googleapis.com/css?family=Macondo" rel="stylesheet">

        insérées dans le fichier index.html

      • et

        font-family: 'Macondo', cursive; 

        insérées dans le fichier style.css.

   5. Effectuer toutes les modifications des fichiers html et css que vous jugez pertinentes.

À la fin votre page doit ressemblez à celle-là :

https://thimbleprojects.org/icnboissy/400129/

Puis passer à l’activité suivante.