Code

L’AUTEUR

Sean McManus vit en Grande-Bretagne. Il est membre du Code Club, une association de bénévoles qui enseigne la programmation et le web design dans une école primaire de Londres. Il est également l’auteur de plusieurs livres de programmation et de web design, dont Raspberry Pi pour les Nuls.

Tu trouveras sur son site www.sean.co.uk (en anglais) toutes sortes d’informations utiles.

Textes : Sean McManus Consultant : Max Wainwright Illustrations : Venitia Dean Titre original an langue anglaise : How to code in 10 easy lessons Édition française : Antartik Traduction : Nathalie Garsuault © Marshall Editions, 2015, pour l’édition originale © Fleurus Éditions, 2016, pour l’édition en langue française

Salut la Terre !

Dépôt légal : août 2016 ISBN : 9782215157533 Code MDS : 592326 Imprimé en Chine Loi n° 49-956 du 16 juillet 1949 sur les publications destinées à la jeunesse.

Tous droits réservés. Aucune partie de ce livre ne peut être reproduite, stockée ou transmise par quelque moyen électronique, mécanique, de reprographie, d’enregistrement ou autre que ce soit sans l’accord préalable des ayants droits.

CTJV_01-37 1st.indd 2

18/4/2016 2:06 PM

SOMMAIRE INTRODUCTION _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 4 ÉTAPE 1 : COMPRENDRE LA PROGRAMMATION _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 6 ÉTAPE 2 : MAÎTRISER TES OUTILS _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 10 ÉTAPE 3 : PRENDRE TES MARQUES _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 16 ÉTAPE 4 : NE PAS TE RÉPÉTER _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 22 ÉTAPE 5 : FAIRE DES CHOIX _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 26 ÉTAPE 6 : UTILISER LES VARIABLES _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 32 ÉTAPE 7 : IMAGINER TON JEU _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 38 ÉTAPE 8 : CONCEVOIR TON JEU DE PLATEFORME _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 44 ÉTAPE 9 : CRÉER TON SITE WEB _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 50 ÉTAPE 10 : LE DESIGN DE TON SITE WEB _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 56 ADRESSES UTILES _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 62 GLOSSAIRE _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 63 INDEX _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 64

CTJV_01-37 1st.indd 3

18/4/2016 2:06 PM

ÉTAPE 2

10

MAÎTRISER TES OUTILS

Avant de pouvoir créer ton jeu, tu vas devoir apprendre à utiliser les outils qui te permettront de concevoir tes programmes. Ce chapitre va t’aider à démarrer sous Scratch, à écrire ton premier programme et à tester l’éditeur graphique, ainsi que la bibliothèque des sons.

POUR COMMENCER

Connecte-toi au site web de Scratch (scratch.mit.edu) puis clique sur « Rejoindre Scratch » en haut de l’écran pour créer ton identifiant et ton mot de passe. Afin de préserver ton anonymat, ton identifiant doit être différent de ton nom, et le mot de passe que tu choisis doit être compliqué à deviner. On va aussi te demander ton mois et ton année de naissance, le pays où tu vis, ton adresse mail et si tu es un garçon ou une fille. Certaines de ces informations seront utilisées par l’équipe de Scratch pour savoir qui sont les utilisateurs de cet outil et d’autres serviront à retrouver ton mot de passe en cas d’oubli.

Clique sur « Créer » en haut de l’écran.

Et voilà, tu es prêt à commencer !

Une fois connecté, Scratch va sauvegarder automatiquement ton travail. Pour retrouver tes programmes, clique sur ton identifiant en haut à droite puis sélectionne « Mes projets ».

S

Rejoindre Scratch Il est facile (et gratuit !) de s’inscrire pour un compte Scratch Choisir un nom d’utilisateur Scratch Choisir un mot de passe Confirmation du mot de passe

Profil Mes projets Paramètres du compte Se déconnecter

LE

PENS B O N R É L’AUT E À TOUJO FLEXE ORIS !

UR DE CO ATION À U S DEMAND ER MM N INFOR UNIQUER ADULTE AV A EN LI MATIO NT GN N TE CO S PERSONN E DES NCER NANT ELLES .

CE !ns U T S A UPER Scratch sa e

it d ter ux tes te, il te suff ut de e v u t p Si ha un com r » en et, ouvrir sur « Crée ées un proj ir cr r clique . Mais si tu pour pouvo n e ! a r l i l’écr nt t’inscr on travai auta egarder t sauv

CTJV_01-37 1st.indd 10

18/4/2016 2:06 PM

ÉTAPE 2 : MAÎTRISER TES OUTILS 11

ACTION !

Dans une pièce de théâtre, les scripts sont les textes que lisent les acteurs. Dans un programme Scratch, les scripts sont les instructions que tu vas donner à tes lutins. Tu pourras les faire bouger, parler, dessiner, émettre des sons ou modifier leur apparence. Tu prépareras tes scripts dans l’aire des scripts, le grand carré à droite de l’écran.

Créer un jeu, c’est un peu comme mettre en scène une pièce de théâtre ou un film. D’ailleurs, Scratch utilise le même vocabulaire. L’action se déroule sur la scène où tu vas faire évoluer tes personnages.

Les lutins représentent les acteurs et les éléments de décor d’une pièce. Les voitures de course, les chevaux, les extraterrestres et même les objets inanimés comme une barrière ou un arbre sont considérés comme des lutins.

Tu les trouveras dans la liste des lutins, sous la scène.

Scène

Arrière-plan

L’arrière-plan est le décor qui apparaît en fond, derrière les lutins. Par exemple, pour simuler une action dans l’espace, tu choisiras un arrière-plan étoilé.

Lutins

Aire des scripts

Script

Fichier d Édition d Conseils A propos Sans-titre4 par Super Codeur (non partagé)

Scripts Scripts

Costumes Sons Costumes Sounds

Mouvement Motion Apparence Looks Sons Sound Stylo Pen Données Data

Évènements Events Contrôle Control Capteurs Sensing Opérateurs Operators AjouterBlocks blocs More

avancer de 10 tourner

de 15 degrés

tourner

de 15 degrés

quand

cliqué

avancer de 10

s’orienter à 90 s’orienter vers

d

aller à x : -116 y : -80 aller à

x : 240 y:-180

Lutins

Nouveau lutin :

pointeur de souris

d

glisser en 1 secondes à x : -116 y :

ajouter 10 à x donner la valeur 0 à x

Sprite

Scène

Giga

3 arrière-plans

ajouter 10 à x donner la valeur 0 à y

rebondir si le bord est atteint

ATCH SER SCR PPLI I L I T U S UNE A EUX PA TU NE P OIS PASSER PAR UI EST ;TU D MAIS Q SUR IPAD LE SCRATCHJR, .

PEL SCRATCH QUI S’AP DIFFÉRENTE DE ASSEZ

fixer le sens de rotation position à ga

abscisse x ordonnée y direction

SUPER AST UCE !

Si tu as le choix Liste des lutins

CTJV_01-37 1st.indd 11

Palette des blocs

de ton navigateu r, l’ Scratch es idéal pour t d’u Google Ch tiliser rome.

18/4/2016 2:06 PM

1 2 ÉTAPE 2 : MAÎTRISER TES OUTILS

CRÉER LE SCRIPT DU CHAT QUI COURT Ça y est, tu vas pouvoir créer ton premier script ! Nous allons l’appeler « le chat qui court », puisque le chat est le lutin vedette des projets Scratch.

Les instructions utilisées dans Scratch s’appellent des blocs. On les assemble comme les pièces d’un puzzle. Les blocs que tu vas choisir pour composer ton script se trouvent dans la palette des blocs, qui se trouve dans l’onglet « Scripts », entre la scène et l’aire des scripts.

Dans la catégorie « Mouvement » choisis le bloc avancer de 10 .

avancer de 10

FAIRE GLISSER UN BLOC

Clique sur le bloc, maintiens le bouton de la souris enfoncé, puis déplace la souris vers l’aire des scripts et lâche le bouton pour déposer le bloc dans l’aire des scripts. Pour faire bouger le chat, tu peux maintenant cliquer sur le bloc dans l’aire des scripts.

CTJV_01-37 1st.indd 12

SUPER ASllTe Ule CmoEuv!ement .

SUPER ASTU CE Le bloc av ancer de 1 ! indiq

0 ue au cha mais sans lu t d’avancer de 10 pa il doit effe i dire combien de fo s, ctue is le verras do r ce déplacement. Tu n n Clique sur c avancer qu’une fois e le 10 et rem . place un nouveau chiffre, puis -le par cliqu de nouveau sur le bloc. e Que se pass e-t-il ?

» On appe « cliqué-glissé nt is me ur de la so action fréquem r e C’est un ée pour déplace s t ip r utilis c et les s les blocs Scratch. dans

18/4/2016 2:06 PM

ÉTAPE 2 : MAÎTRISER TES OUTILS 13

CRÉER TON PROGRAMME

Dans la palette des blocs, les blocs sont organisés en 10 catégories identifiées chacune par une couleur.

Le bloc avancer de 10 appartient à la catégorie « Mouvement » parce qu’il sert à déplacer les lutins.

Clique sur la catégorie « Évènements » et tu verras s’afficher des blocs marron. Ce sont les blocs grâce auxquels les scripts réagissent lorsqu’il se passe quelque chose. Sélectionne le bloc quand drapeau vert cliqué dans la palette, fais-le glisser et dépose-le dans l’aire des scripts, juste au-dessus du bloc avancer de 10 .

quand

cliqué

répéter indéfiniment avancer de 10

quand

cliqué

avancer de 10 Les deux blocs doivent s’assembler en s’emboîtant.

Et voilà, tu viens de créer ton premier script ! Clique sur le drapeau vert et tu verras le chat bouger. Bravo !

FAIRE COURIR LE CHAT

Pour que le chat se déplace en continu, il faut ajouter au script le bloc répéter indéfiniment situé dans la catégorie « Contrôle ». Fais-le glisser jusqu’à l’aire des scripts et dépose-le de façon à ce qu’il entoure le bloc avancer de 10 , comme dans l’illustration ci-contre. L’information qui se trouve à l’intérieur du bloc répéter indéfiniment va être active jusqu’à ce que tu arrêtes le programme à l’aide du bouton rouge en haut à droite de la scène, ou avec une instruction de ton programme. Pour voir ton chat s’entraîner pour le marathon, clique sur le drapeau vert !

AVEC CE SCRIPT, TON CHAT NE RE VIENDRA PAS TOUT SEUL À SON POINT DE DÉ PART. LORSQU’IL SORT DE L’ÉCRAN, CLIQ UE DESSUS ET REDÉ POSE-LE OÙ TU VEUX.

ALLEZ, EN PISTE !

Essaie d’ajouter d’autres blocs des catégories « Mouvement » et « Apparence » et regarde ce qui se passe. Tu peux de nouveau utiliser le bloc répéter indéfiniment ou y insérer d’autres instructions. À toi de jouer !

CTJV_01-37 1st.indd 13

18/4/2016 2:06 PM

1 4 ÉTAPE 2 : MAÎTRISER TES OUTILS

PEAUFINER LE GRAPHISME Et si maintenant, tu changeais le décor de ta scène ? À gauche de la liste des lutins se trouve la commande « Nouvel arrière-plan ». Clique sur l’icône la plus à gauche pour ouvrir la bibliothèque des arrière-plans.

Tu peux visualiser les images par catégorie ou par thème, ou les faire tous défiler. Double-clique sur le décor de ton choix pour qu’il apparaisse en fond d’écran de ta scène, puis déplace le chat si tu veux.

Pour revenir à ton programme, clique sur le chat dans la liste des lutins puis sur l’onglet « Scripts ».

VA-ET-VIENT

Si tu ajoutes à ton script le bloc rebondir si le bord est atteint , le chat fera demi-tour et reviendra en courant lorsqu’il atteindra le bord de l’écran.

quand

CE !

U T S A R E SUP h, repère-toi aux

cliqué

répéter indéfiniment

atc on Dans Scr ! Les blocs marr gorie couleurs t tous à la caté des nnen lette appartie ents » de la pa iable if m « Évène acilement ident f e , s s a c blo etite c par sa p on. marr

avancer de 10 rebondir si le bord est atteint

CORRIGER TON PREMIER BUG

Oups ! Lorsque le chat pivote vers la gauche, il se retrouve sur la tête. Voici un exemple de « bug », c’est-à-dire d’erreur dans le programme. Scratch suit à la lettre les instructions qui lui sont données : il faut donc être extrêmement précis pour éviter de voir apparaître des choses étranges. Cette chasse aux bugs, qu’on appelle « débogage », fait partie du travail des programmeurs au quotidien ! Pour corriger cette erreur, il faut modifier le sens de rotation du chat. Dans la catégorie « Mouvement », choisis le bloc fixer le sens de rotation à gauche ou à droite . Tu peux le placer à l’extérieur du bloc répéter indéfiniment puisque nous n’en aurons besoin qu’une fois.

CTJV_01-37 1st.indd 14

quand

cliqué

fixer le sens de rotation position à gauche ou à droite d répéter indéfiniment avancer de 10 rebondir si le bord est atteint

18/4/2016 2:06 PM

ÉTAPE 2 : MAÎTRISER TES OUTILS

AJOUTER DES SONS

Ajoute ce nouveau script à ton lutin. Pour cela, place-le dans l’aire des scripts sans l’emboîter avec le script précédent. Quand tu appuieras sur la barre d’espace, le chat fera « miaou » (meow en anglais). En doublecliquant sur « meow », dans l’onglet « sons », tu peux renommer ce son en « miaou » en français. Pour associer d’autres sons à ton lutin, clique sur l’onglet « Sons » en haut de la palette des blocs, puis sur le petit haut-parleur.

15

quand espace d est cliqué jouer le son meow d Sélectionne un son dans la bibliothèque puis, pour l’intégrer à ton programme, retourne dans l’onglet « Scripts ». Dans le bloc jouer le son miaou , clique sur le menu déroulant (la petite flèche vers le bas) pour choisir un autre son !

UTILISER L’ÉDITEUR GRAPHIQUE KIT D’OUTILS Pinceau Ligne Rectangle Ellipse Texte Remplir avec de la couleur Effacer Sélectionner Sélectionner et dupliquer

Le costume est une autre idée empruntée par Scratch à l’univers du théâtre. Clique sur l’onglet « Costumes » et choisis l’une des deux apparences du chat que tu vas maintenant pouvoir personnaliser.

Il existe des images du type « vecteur » et d’autres du type « bitmap », mais comme les bitmaps sont plus faciles à éditer, clique pour le moment sur « Convertir en bitmap » en bas à droite de l’écran. Sur la gauche de l’écran se trouve un kit d’outils. Pour les utiliser, clique sur celui qui t’intéresse puis sur une couleur en bas de l’écran, et modifie le lutin à l’aide de ta souris. Pour utiliser les outils « Ligne », « Rectangle » ou « Ellipse », clique sur l’icône puis la couleur et dessine la forme en effectuant un cliqué-glissé avec la souris. Avec les outils « Sélectionner », tu peux choisir la zone de ton image que tu veux déplacer ou dupliquer (copier).

RIEN DE TEL QUE LA PRATIQUE !

Maintenant que tu sais comment créer un script, modifier un arrière-plan, ajouter des sons et éditer le costume de ton lutin, amuse-toi avec ces nouveaux outils !

CTJV_01-37 1st.indd 15

18/4/2016 2:06 PM

50

ÉTAPE 9

CRÉER TON SITE WEB

Tu souhaites que tes amis puissent jouer en ligne à ton jeu ou même qu’il soit vu par des joueurs dans le monde entier ? Pour cela, tu vas apprendre à cette étape comment créer ton premier site web en HTML, le langage du web.

INTRODUCTION AU HTML

Tous les sites web que tu as pu voir sont basés sur le langage HTML, avec lequel tu vas commencer à travailler ici. HTML est l’abréviation de « Hypertext Markup Language ». On l’utilise pour indiquer à l’ordinateur la façon dont les données seront organisées sur une page web. Il indique où trouver les images, quels textes utiliser comme titres, et où les liens devront mener.

Le HTML est basé sur un système de codes qu’on appelle balises. Il utilise des crochets semblables aux signes « supérieur à » et « inférieur à ». Voici un exemple : <h1>Voici mon premier site web !</h1> <p>Je vais partager ici tout ce que j’aime bien !</p> À toi de jouer ! Ouvre n’importe quel fichier au format texte, dans le Bloc-Notes de Windows sur PC ou TextEdit sur Mac. Saisis simplement ces lignes de code et sauvegarde le fichier sous le nom « index.html ».

Retrouve ensuite le fichier dans ton ordinateur et double-clique dessus pour l’ouvrir dans un navigateur comme Firefox, Chrome, Internet Explorer ou Safari.

Tu devrais voir apparaître ta page web, dont la première ligne va s’afficher en gras et la suivante dans une police plus petite.

ASSURE-TOI QUE TU SAUV EGARDES TON FICHIER AU FORMAT « TEXTE BR UT », LES LOGICIELS DE TRAITEMENT DE TEXTE INTÈGRENT SOUVENT TOUT UN TAS DE CODES QUI EXPLIQUENT LA MISE EN PAGE DES DOCUMENT S MAIS QUI NE SONT PA S INTERPRÉTABLES PAR UN NAVIGATEUR WEB.

CTJV_38-64 1st.indd 50

index.html

file:///C:/Users/Theo/Documents/2016

Voici mon premier site web !

Je vais partager ici tout ce que j’aime bien !

E! SUPpEeuRx t’aAmSuseTrUà crCéer

Tu s, de <h1> d’autres titre nd à <h6> gra pour le plus t. Sache tout eti p pour le plus ’on descend q de même u essous -d rarement au ! > 3 h < de

RECHERCHE DE BUG

Si ce qui s’affiche dans ton navigateur ne ressemble pas à ce que tu veux, c’est que tu as dû te tromper en enregistrant ton fichier. Tu l’as peut-être sauvegardé au format RTF et non en texte brut. Cela arrive parfois lorsqu’on travaille sous TextEdit sur Mac. Ouvre le menu « Format » dans TextEdit puis sélectionne « Convertir au format texte ». Et lorsque tu sauvegardes ton fichier, veille à ce qu’il porte bien l’extension .html. Si le texte présente encore des problèmes, vérifie qu’il n’y a aucune espace superflue. Pour que les lettres accentuées françaises s’affichent correctement, utilise le tableau de correspondance que tu trouveras sur ce site : http:// www.scriptol.fr/creation-site-web/accents-html.php.

18/4/2016 2:54 PM

ÉTAPE 9 : CRÉER TON SITE WEB 51

<em>

<h1>

<p>

<h2> <em > <strong>

LE HTML, COMMENT ÇA MARCHE ?

Pour comprendre la structure du texte, le navigateur interprète les balises du code. Par exemple la balise <h1> signale le début d’un titre et </h1> la fin. Une fois que le navigateur a compris que le texte situé entre ces balises représente un titre, il l’affiche en plus grand. La balise <p> marque le début d’un paragraphe et </p> la fin. Pour t’entraîner, amuse-toi à ajouter plusieurs paragraphes.

La majorité des balises HTML fonctionnent sur ce principe, avec des crochets d’ouverture et de fermeture, un peu comme des guillemets ou des parenthèses. Par exemple, tu peux utiliser <em> pour mettre en valeur une partie de texte (généralement, le texte passe en italique) :

CTJV_38-64 1st.indd 51

<p>J’<em>adore</em>Minecraft !</p> Ou la balise <strong> pour mettre un texte en gras : <p><strong>Si tu trouves des liens défectueux, signale-les moi, s’il te plaît !</strong></p> Les balises HTML indiquent au navigateur les textes qui doivent être utilisés comme titres et ce qui doit être mis en avant, mais elles n’indiquent pas la façon dont elles seront affichées dans la page. Si tu veux faire apparaître un texte en rouge ou attribuer à une phrase une police de caractères différente, tu devras utiliser le CSS, comme nous allons le voir à l’étape suivante.

18/4/2016 2:54 PM

52 ÉTAPE 9 : CRÉER TON SITE WEB

AJOUTER DES LISTES Le HTML permet d’ajouter à ta page web des listes dont les éléments seront précédés de chiffres (pour une liste dite « ordonnée ») ou de points (aussi appelés puces, pour une liste « non ordonnée »). Cette méthode facilite la lecture de la page et permet d’organiser les informations qu’elle contient.

COMMENT CODER UNE LISTE

Pour créer une liste en HTML, tu dois placer l’ensemble de la liste entre les balises de début <ul> et de fin de liste </ul>, et aussi encadrer chaque élément de la liste d’une balise d’ouverture <li> et d’une de fermeture </li> : <p>Voici une liste de mes sites web préférés : <ul> <li>Scratch</li> <li>Le Petit Quotidien</li> <li> Science et Vie Junior</li> </ul> Tu constates ici qu’il est possible d’insérer des balises à l’intérieur d’autres balises. On dit qu’elles « s’imbriquent ».

Ajoute ce code à ta page web et clique sur le bouton qui permet de rafraîchir la page pour voir apparaître ta liste à puces. Si tu préfères une liste ordonnée, tu dois remplacer <ul> et </ul> par <ol> et </ol>.

Si tu veux créer une liste des choses que tu aimes faire pendant les vacances, voici un exemple de liste ordonnée : <p>Mes cinq activités préférées sont : <ol> <li>Faire du skate avec mon copain Jules</li> <li>Jouer au foot avec mes cousins</li> <li>Aller au ciné avec ma grande sœur</li> <li>Faire des gâteaux avec ma grand-mère</li> <li>Jouer avec mes chats</li> </ol> Lorsque tu ouvriras ta page web, tu verras que la liste est numérotée de 1 à 5. Essaie maintenant d’insérer un nouvel élément. Que remarques-tu ? hobbies.html

file:///C:/Users/Theo/Docum Mes cinq activités préférées sont :

Voici une liste de mes sites web préférés : • Scratch • Le Petit Quotidien • Science et Vie Junior

SUPER ASTUC E! Les balises H TM

de l’anglais L s’inspirent « ordered li : <ol> signifie st », et <ul> « un liste ordonnée, orde liste non ord red list », onnée.

CTJV_38-64 1st.indd 52

1. Faire du skate avec mon copain Jules 2. Jouer au foot avec mes cousins 3. Aller au ciné avec ma grande sœur 4. Faire des gâteaux avec ma grand-mère 5. Jouer avec mes chats

OURS J U O T NSE ÀONYMAT !

E P , É AN CURIT VER TA PAR SÉÉSERVER TOQNUE POUR PRÉSERMUNIQUER P R IE JAMAIS AMAIS COM E TON N’OUBL U NE DOIS J NI LE NOM D NET. TÉ, T SSE, SÉCURI , TON ADRE E SUR INTER U OM TON N E À QUICONQ L ÉCO

18/4/2016 2:54 PM

ÉTAPE 9 : CRÉER TON SITE WEB 53

AJOUTER DES LIENS

Que dirais-tu de pouvoir transformer les noms de tes sites préférés en liens sur lesquels on pourra cliquer ? Pour cela, tu vas utiliser des balises qu’on appelle « ancres », <a> et </a>. <a href="http://scratch.mit.edu">Scratch</a> Cette balise est un peu plus complexe que les précédentes, parce qu’il y a davantage d’informations entre les crochets.

La première partie indique au navigateur le début d’un lien et la seconde partie constitue l’adresse web du site auquel le lien renvoie. Elles est placée entre guillemets :

POUR PROGRESSER TU PEUX AVOIR ACCÈS À TOUTES LES PAGES D’INTERNET EN HTML. DANS LA PLUPART DES NAVIGATEURS, UN CLIC DROIT SUR UNE PAGE WEB PERMET D’AFFICHER LA PAGE SOURCE, QUI CONTIENT LE CODE. POUR UNE FOIS, LA CURIOSITÉ N’EST PAS UN SI VILAIN DÉFAUT !

<a href="http://scratch.mit.edu"> Tu as sûrement remarqué que http://scratch.mit.edu est l’adresse que tu entres dans ton navigateur pour te connecter au site Scratch. La balise </a> indique au navigateur la fin du lien pour qu’il sache qu’il doit convertir le mot « Scratch », situé entre la balise ancre d’ouverture et celle de fermeture, en un lien qui envoie l’utilisateur vers le site voulu. À toi d’essayer !

Si tu crées une autre page web (par exemple, une page appelée « musique.html ») et que tu veux ajouter un lien vers cette page, insère simplement un lien vers le nom du fichier :

SUPER ASTU C Tu peux cré er un lie E !

n vers n’importe simplemen quelle page web, qui s’affich t en copiant l’adress e dan e du navigate s la barre d’adresse u r.

Entraîn en essayan t d’ajouter e-toi les de autres lien s à ta liste ux de sites pré férés !

<a href="musique.html">mes musiques</a> Vérifie que, sur ton disque dur, le fichier se trouve bien dans le même dossier que la page web où se trouve le lien.

CTJV_38-64 1st.indd 53

18/4/2016 2:54 PM