Falsification d'une page web

https://snt.ababsurdo.fr/le-web/2-falsification/ 

Mise en place de l'environnement de développement

Téléchargement de l'article original

1. Si ce n'est pas déjà fait, dans votre dossier personnel, créez un dossier SNT. Durant toute l'année scolaire, les travaux de SNT seront enregistrés dans ce dossier.

2. Créez un sous dossier SNT/web.

3. Rendez-vous sur un site web d'information de référence ( L'Humanité, Le Figaro, Le Monde, Libération, etc. ), et choisissez un article que vous allez falsifier.

4. Enregistrez la page de l'article dans le dossier SNT/web, en choissant article.html comme nom de fichier : Fichier > Enregistrer sous…. Vous devez maintenant avoir deux éléments dans le répertoire SNT/web : un fichier article.html et un dossier article_fichiers.

Configuration du logiciel

1. Ouvrir le logiciel Brackets, puis ouvrir le fichier article.html que vous venez de télécharger.

2. Activez l'aperçu en direct : Fichier > Aperçu en direct. Le navigateur Chrome doit s'ouvrir avec l'article que vous avez précédemment enregistré.

3. Séparez votre écran en deux, en mettant à gauche Chrome, à droite Brackets (ou inversement). Votre écrant doit alors afficher quelque chose qui ressemble à la capture d'écran suivante.

Modification de la page

1. Dans Brackets, recherchez (en utilisant le menu Rechercher) le titre de l'article (qui apparaît dans une balise <h1>). Modifiez-le (à votre guise1), enregistrez le fichier, et observez l'article modifié sur la page de gauche.

2. De même, effectuez les modifications suivantes :

   • mettez votre nom comme auteur de l'article ;

   • le titre de l'onglet ;

   • quelques mots de l'article.

3. Appelez le professeur pour vérifier votre travail.

4. Créez une archive article-ELEVE1-ELEVE2.zip du fichier article.html et du dossier article_fichiersque vous rendrez dans le dossier partagé de la classe.

Objectifs de ce module : écrire le fichier de style associé à votre première page.

Pré-requis On suppose qu’ont été vues les notions de :

• tutoriel openclassrooms : partie 2 : CSS

Notions abordées

• mise en page avec css

activités en classe :

Les groupes sont identiques à ceux du module précédent.

Chaque groupe récupère les fichiers html et les images associées crées lors du dernier module.

• Créer un fichier act1_a.css (décliner en act1_b.css etc.) et l’ouvrir dans notepad++

• Appeler le fichier de style dans le fichier html : act1_a.html crée précédemment.

• Dans votre fichier de style, ajouter les styles suivants :

• Tous les changements de style doivent se faire uniquement en manipulant le CSS, le code HTML ne doit pas changer !

  1. h1 : rouge très foncé, taille triple de la normale, souligné, police arial, centré

  2. h2 : rouge plus clair, taille 1.5x la normale, gras, police arial, aligné à gauche

  3. p : noire, taille normale, corps de police normal, police verdana, aligné à gauche.

  4. liens : en vert

  5. la couleur du fond : gris très clair

  6. Dans chaque paragraphe, un mot sera surligné dans la couleur de votre choix

  7. Positionner les 4 images ainsi : la première flotte à gauche, la deuxième flotte à droite, la troisième est en dessous du texte et la 4ème au dessus.

  8. Redimensionner les images pour qu’elles occupent toutes environ la même surface

• Comme la dernière fois, tester localement toutes les propriétés introduites.

• Le fichier et les images associées sont déposés sur le serveur ftp de free dans le même dossier que votre fichier. Même remarque que précédemment, il est possible que l’accès au FTP de free soit bloqué, je proposerai une solution locale.

• Tester les ajouts online.

• Tous les fichiers sont déposés et partagés sur google drive dans le dossier “module 2” crée lors de l’activité précédente.

• Aider les autres groupes dans leur travail

• Tutoriel openclassrooms : css, partie 3 : structure

•