Tell a Story. Introduction HTML & CSS

Dimension: px

Commencer à balayer dès la page:

Download "Tell a Story. Introduction HTML & CSS"

Jean-Pascal Jean-Paul Godin
il y a 8 ans
Total affichages :

1 HTML & CSS 1 Tell a Story All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Introduction Dans ce project, tu vas apprendre comment créer ta propre page web pour raconter une histoire, une blague ou un poème Liste de vérification d activité Follow these INSTRUCTIONS one by one Tester votre projet Click on the green flag to TEST your code Sauvegarder votre projet Make sure to SAVE your work now 1

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

2 Etape 1: Trouver une histoire à raconter Avant de commencer à coder, il faut trouver une histoire à raconter. A faire 1. 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! Etape 2: Edite ton histoire Commençons par éditer le contenu HTML et le style CSS de la page web de l histoire A faire 1. Ouvrir ce lien Trinket : jumpto.cc/web-story. Si tu es sur la version en ligne, tu peux aussi utiliser la version embarquée de Trinket: 1. Comme tu l as vu dans le project Bon anniversaire, le contenu de la page web doit être entre les balises (ou tag ) <body> et </body> (regarde la ligne 7 du code). 2

Ça peut être une blague, un poème ou ce que tu veux! Etape 2: Edite ton histoire Commençons par éditer le contenu HTML et le style CSS de la page web de l histoire A faire 1.

3 2. Peux tu citer les balises qui sont utilisées pour créer les différentes sections de la page web? <h1> est un titre. Tu peux utiliser les niveaux 1 à 6 pour créer des titres de tailles différentes; <div> est un raccourci pour division. C est une façon de regrouper des éléments ensemble. Dans cette page web, tu l utiliseras pour grouper les éléments de chaque partie de ton histoire; <img> est une image; <p> est paragraphe de texte. 3

Tu peux utiliser les niveaux 1 à 6 pour créer des titres de tailles différentes; <div> est un raccourci pour

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,

4 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 Sauvegarde ton projet Etape 3: Raconte ton histoire Ajoutons une partie à ton histoire. A faire 1. Va à la ligne 17 du code, et ajoute une balise ouvrante <div>, puis une balise fermante </div> 4

Si tu as besoin d aide, tu peux t inspirer du projet Bon anniversaire Sauvegarde ton projet Etape 3: Raconte ton histoire

5 2. Ajoute un paragraphe de texte dans ta nouvelle balise <div>. 3. Pour finir, tu peux ajouter une image dans ta nouvelle partie, en ajoutant ce code dans ta balise <div> : <img src=""> 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! 4. 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. 5. Fais un clic droit sur l image, et choisis copier l adresse de l image. 5

sont un peu différentes des autres balises? En effet, elles n ont pas pas de balise fermante! 4.

Si tu as un compte Trinket, tu peux aussi ajouter tes propres images à ta page!

6 6. Colle l adresse entre les guillemets dans ta balise <img>. Tu devrais voir ton image apparaître! 7. 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 ) 8. Trouve ton image sur ton ordinateur, puis dépose la dans Trinket 6

7 9. Tu n as ensuite plus qu à ajouter le nom de ta nouvelle image entre guillemets dans ta balise <img>, comme ceci <img src="mon_image.png"> Sauvegarde ton projet 7

8 Défi: continue! Utilise ce que tu as appris dans ce projet pour finir ton histoire! Voici un exemple: Save Your Project 8

Documents pareils

DECOUVRIR. Le portail La recherche Les présentations & documents

DECOUVRIR. Le portail La recherche Les présentations & documents Slideshare DECOUVRIR Le portail La recherche Les présentations & documents J accède au portail slideshare... http://www.slideshare.net/ Téléchargement de fichiers Recherche Espace d identification Les