.

Introduction

Internet est parfois un piège où il est difficile de distinguer le vrai du faux.

pour vous audez à y voir plus clair, allez chercher votre travail dans le dossier qui se rapporte à la séance du jour en suivant l’arborescence décrite ci-dessous

.

I Exemple de « Fake » fabriqué à partir d’une page d’Amazon

.

Attention : Cette page ne peut pas être trouvée sur le site réel d’Amazon. Elle a juste été fabriquée pour les besoins de l’exercice.

Mettre ce « Fake » en ligne est facile, mais l’insérer dans le site d’Amazon est pratiquement impossible.

De plus, cet acte est pénalement répréhensible.

.

.

II Utiliser l’inspecteur qui est présent dans le navigateur « Chrome »

.

Cliquez par « clic-droit » sur une image d’une page internet (au choix) pour faire apparaître un menu déroulant et choisissez « inspecter ». Deux fenêtres apparaissent à droite de l’écran.

• La fenêtre du haut contient le code HTML. C’est la fenêtre qui contient les éléments qui compose la page Web
• La fenêtre du bas est une feuille de style. C’est une fenêtre qui contient les attributs graphiques de ces éléments, tel que la couleur ou la taille.

Le contenu de la fenêtre de contenu se présente par exemple ainsi (L’exemple choisi ci-dessous est différent du votre mais les exemples se ressemblent)

Si vous avez fait un clic-droit sur une image, l’inspecteur selctionne une portion de texte en html qui contient une lien hypertexte (commençant par « htpp ou « htpps) et dont la fin, avant les guillemets est l’extension .jpeg » ou .png ». Ces extensions sont propres aux images.

Pour sélectionner le lien en entier, faites un double-clic dessus.

.

.

III Modifier le contenu qui apparaît dans la fenêtre des éléments contenant des fichiers de type HTML

.

ATTENTION : Si vous faites un clic simple sur la page et non pas un clic-droit, votre clic vous emenera vers une autre page et, lorsque vous reviendrez sur votre page de travail, vous retomberez sur l’original de la page : VOUS AUREZ DONC PERDU VOTRE TRAVAIL !

.

1° Copier un lien hypertexte d’une image (au choix)

Faites un clic droit sur le lien déjà sélectionné. La partie soulignée correspond à un lien vers une autre image.

Sélectionner « Copier » ou utiliser le raccourci clavier Ctrl+C

.

2° Remplacer une autre image par celle que vous venez de copier

.

Sur une page du Web (au choix), faite un clic-droit et choisissez « Inspecter »

Sélectionner par double clic sur le lien hypertexte correspondant à cette nouvelle image dans l’inspecteur

Remplacer le contenu entre guillemets par l’autre lien que vous avez « copier » précédemment.

Faites un clic droit ailleurs dans la fenêtre de l’inspecteur. La nouvelle image apparait sur la page Web

.

Nota Bene : Faites des copies d’écran et n’oubliez de les enregistrez sous votre nom (ou vos 2 noms)

.

3° Changer le titre de la photo

Rechercher quelle partie doit être remplacée pour modifier le titre qui accompagne la photo que vous avez choisie

.

.

III Modifier le contenu qui apparaît dans la fenêtre d’attributs graphique contenant des fichiers de type .CSS

.

Le contenu de la fenêtre de contenu se présente par exemple ainsi (L’exemple choisi ci-dessous est différent du votre mais les 2 exemples se ressemblent)

.

1° Modifier les paramètres

Recherchez ceux qui vous sont présentés ici, tel que la largeur (width), ou l’ aspect-ratio (présent un peu plus bas)

Rechercher quelle partie doit être remplacée pour modifier la couleur du titre qui accompagne la photo que vous avez choisie.

MODIFIEZ AINSI PLUSIEURS TITRES ET PLUSIEURS IMAGES

.

.

IV Rendez votre travail

.

Faites une copie d’écran de votre travail final (reportez-vous à l’annexe en haut, au début des menus déroulant de la 2nd SNT sur la page d’accueil du site tube a essai).

Postez-la (ou déplacez-là) dans le dossier réponse de la séance 6, sur le réseau du lycée à l’emplacement indiqué dans l’arborescence présentée en début de séance, en haut de cette page.

.