Raconte Une Histoire

Introduction

Dans ce project, tu vas apprendre comment créer ta propre page web pour raconter une histoire, une blague ou un poème

Ressources en ligne

Nous recommandons d’utiliser trinket pour écrire HTML & CSS en ligne. Ce projet contient les trinkets suivants (un ‘trinket’ est un code HTML & CSS disponible et éditable en ligne sur le site https://trinket.io/):

‘Raconte une Histoire’ - Point de départ – jumpto.cc/web-story

Les enfant peuvent aussi partir d’un trinket vierge (jumpto.cc/trinket-blank) pour écrire leur propre code HTML & CSS, ou bien partir de ce trinket contenant le squelette de base HTML & CSS (jumpto.cc/trinket-template).

Il y a aussi un trinket présentant une solution possible (en anglais):

‘Raconte une Histoire’ terminé

Ressources hors-ligne

ce projet peut être réalisé hors-ligne si vous le préférez. Vous pouvez accéder aux ressources du projet en cliquant sur le lien ‘Download Project Materials’ pour ce projet. Ce lien contient un dossier ‘Project Resources’, qui contient les ressources dont auront besoin les enfants pour réaliser ce projet hors-ligne. Vérifiez que chaque enfant a accès à une copie de ces ressources. Ce dossier contient les fichiers suivants:

Template/Template.html
Template/style.css
Tell a Story/Story.html
Tell a Story/style.css
Tell a Story/buildings.png
Tell a Story/sun.png

Vous trouverez une solution aux défis de ce projet dans le dossier ‘Club Leader Resources’, qui contient les fichiers:

StoryFinished.html
style.css
boy.png
girl.png

Objectifs d’Apprentissage

écrire de l’HTML:
- balise div et grouper des éléments;
- balise img et les liens vers des images;
- entêtes h1 - h6.

Défis

“Fais des changements” - modifier du code HTML et un style CSS;
“Continue!” - utiliser des balises et des styles pour créer une histoire complète.

Utiliser ce projet hors-ligne

Si les enfants réalisent ce projet hors-ligne, ils devront sauver les images qu’ils veulent utiliser dans le même dossier que leur fichier Story.html.

They can then just add the name of the file in their img tags:

Ensuite ils n’ont plus qu’à ajouter le nom de leur fichier dans leurs balises img:

Trouver une histoire à raconter

Avant de commencer à coder, il faut trouver une histoire à raconter.

Pense à l’histoire que tu veux raconter. Ça pourrait être:
- Une histoire célèbre
- Une histoire que tu as inventée
- Quelque chose qui t’est arrivé ou à quelqu’un que tu connais

Ce n’est pas forcément une histoire. Ça peut être une blague, un poème ou ce que tu veux!

Défi: Fais des changements

Edite le code HTML et CSS pour modifier ta page web

Tu peux changer les couleurs utilisées dans la page, et tu peux aussi utiliser des polices de caractères différentes, comme Arial, Comic Sans MS, Impact et Tahoma.

Si tu as besoin d’aide, tu peux t’inspirer du projet ‘Bon anniversaire’

Raconte ton histoire

Ajoutons une partie à ton histoire.

Va à la ligne 17 du code, et ajoute une balise ouvrante <div>, puis une balise fermante</div>
Ajoute un paragraphe de texte dans ta nouvelle balise <div>.
Pour finir, tu peux ajouter une image dans ta nouvelle partie, en ajoutant ce code dans ta balise <div>:
As tu remarqué que les balises <img> sont un peu différentes des autres balises? En effet, elles n’ont pas pas de balise fermante!
Pour utiliser une image d’internet, il faut que tu ajoutes entre guillemets dans ta balise sa source, c’est à dire son adresse (on dit aussi URL).
Suis ce lien jumpto.cc/web-images, et choisis une image que tu aimerais ajouter à ton histoire.
Fais un clic droit sur l’image, et choisis ‘copier l’adresse de l’image’.
Colle l’adresse entre les guillemets dans ta balise <img>. Tu devrais voir ton image apparaître!
Si tu as un compte Trinket, tu peux aussi ajouter tes propres images à ta page! Il te suffit de cliquer sur l’icône image dans trinket et ensuite cliquer sur ‘télécharger’ (ou ‘upload’)
Trouve ton image sur ton ordinateur, puis dépose la dans Trinket
Tu n’as ensuite plus qu’à ajouter le nom de ta nouvelle image entre guillemets dans ta balise <img>, comme ceci