Activité n°3 : Élaborer une page web avec Thimble

Revenir à l'activité précédente. ¹

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

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.

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

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

https://thimbleprojects.org/icnboissy/394657 ⁴

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

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 ^{8 5} ;
   • 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> 6. 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 ^{8 5}.

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.

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

1. http://icn-isn-boissy.yj.fr/wp/2018/01/07/activite -n2-retoucher-une-peinture-celebre/
2. https://www.mozilla.org/fr/
3. https://thimble.mozilla.org/fr/
4. https://thimbleprojects.org/icnboissy/394657
5. https://images.nga.gov/en/search/show_advanced_sea rch_page/?service=search&action=do_advanced_se arch&language=fr&artist_last_name=&ope n_access=Open+Access+Available&qw=%22Open%20Ac cess%20Available%22&page=1&qw=%22Open+Acce ss+Available%22%20and%20%22Painting%22
6. https://developer.mozilla.org/fr/Apprendre/Commenc er_avec_le_web/Les_bases_HTML#Images
7. https://fr.wikipedia.org/
8. https://images.nga.gov/en/search/show_advanced_sea rch_page/?service=search&action=do_advanced_se arch&language=fr&artist_last_name=&ope n_access=Open+Access+Available&qw=%22Open%20Ac cess%20Available%22&page=1&qw=%22Open+Acce ss+Available%22%20and%20%22Painting%22
9. http://paletton.com
10. https://fr.wikipedia.org/wiki/Couleur_du_Web#Notat ion_courte_avec_trois_chiffres_hexad%C3%A9cimaux
11. https://fonts.google.com/
12. https://thimbleprojects.org/icnboissy/400129/
13. http://icn-isn-boissy.yj.fr/wp/2018/01/12/activite -n4-interagir-avec-les-images-grace-a-javascript-p 5-js/