Passer la navigation

À la découverte de la source

Par Mouse 15 minutes
Niveau
Secondaire 1 et 2 / 7e et 8e année
Disciplines
Langues,
Arts
composants du cadre
  • Technologie et société
  • Conception
Outils et langages
Glitch,
HTML,
Unplugged

Concepts clés en programmation

  • Séquence 

Terminologie

HTML

Langage utilisé pour ajouter des balises à des fichiers texte et ainsi afficher des polices, des couleurs, des graphiques, des vidéos et des liens différents sur une page Web.

 

CSS

Langage visuel utilisé pour présenter un document rédigé en un langage de balisage. Les fichiers CSS donnent des couleurs et des formes au Web en le rendant réactif et tout simplement génial.

 

Balise

Élément de code précisant la mise en page du document ou de la partie d’un document. Les balises ont des chevrons (<>). Par exemple, la balise <h1> représente l’en-tête le plus important d’une page Web.

Durant cette activité, les élèves reproduiront un site Web le plus précisément possible en regardant seulement le code source HTML de la page.

Créé par Mouse pour Mozilla.

Matériel :

  • Code source « Fido, méchant chien » (1 par paire).
  • Papier et crayons.
  • Corrigé imprimé (page 2 du document ci-dessus) ou ordinateur ayant accès à Internet pour afficher le site Web.

  1. Expliquez aux élèves que tous les sites Web sont conçus avec du code, un langage que l’ordinateur comprend.
  2. Donnez une feuille de code source à chaque groupe.
  3. Accordez une attention particulière aux balises. Expliquez aux apprenants que le texte qui se trouve entre les chevrons <> ne s'affiche pas sur la page. Demandez-leur de prédire la fonction de chaque balise.
  4. Distribuez du papier et des crayons à chaque groupe.
  5. Donnez-leur quelques minutes pour dessiner leur maquette représentant l'apparence de la page.
  6. Demandez à des volontaires de présenter leur maquette au groupe et d'expliquer leur interprétation du code.
  7. Montrez le corrigé aux élèves pour qu’ils comparent leur maquette au site OU faites-leur ouvrir le site original « Fido, méchant chien » si vous avez un ordinateur avec Internet.

Objectifs d’apprentissage

Je peux lire et interpréter du code HTML de base.
Je peux décrire la fonction des balises d'ouverture et de fermeture.
Je peux décrire l'influence du code HTML sur le style d’un site Web.

Demandez aux élèves de remixer le site Web de l'activité « À la découverte de la source » sur un ordinateur avec l’outil d’inspection de leur navigateur (clic droit > Inspecter). *
* Remarque : Les élèves pourront faire des modifications directement sur une page, mais ces modifications ne seront pas enregistrées sur le site.

Mettez les élèves au défi de recréer la page Web en HTML et en CSS (sur glitch.com ou un autre outil de création Web).

Sciences ou langues : Invitez les élèves à créer une page Web simple sur un sujet lié aux sciences ou à une langue. Utilisez Codemoji pour renforcer les concepts de codage HTML. Codemoji est un éditeur HTML permettant aux élèves de créer des sites avec des emojis associés à des balises pour faciliter l’apprentissage du codage.

Technologie et société : Demandez aux élèves de nommer différentes façons dont ils se servent d’Internet (p. ex. pour se divertir, faire des recherches, s’informer, magasiner, échanger sur les réseaux sociaux). Formez des groupes. Les élèves créeront une affiche pour leurs camarades présentant des stratégies pour rester en sécurité sur Internet.

Idée originale de Mouse: http://mouse.org/

Leçon inspirée des activités brise-glaces de Mozilla https://learning.mozilla.org/en-US/activities/offline-icebreakers

Enseignez des leçons qui sont liées à votre programme existant! https://bit.ly/ActivitésCLC_FR

r

Plus de plans de cours pour Secondaire 1 et 2 / 7e et 8e année

    Voir tous les plans de cours

    Explorez les lessons basé sur les composants du cadre

    Un cadre de référence pancanadien pour l’enseignement de l’informatique

    Bien que l’apprentissage des méthodes de création de projets numériques soit une composante importante de l’enseignement de l’informatique, les élèves devraient aussi développer des compétences et des habiletés diverses leur permettant d’exploiter le potentiel des technologies numériques, tant pour la créer que pour la consommer. Un enseignement de l’informatique complet de la maternelle jusqu’à la fin du secondaire aborde les cinq domaines clés suivants :

    Explorez le cadre ➝

    Programmation

    À la fin de leurs études secondaires, les élèves devraient être en mesure de créer un programme informatique simple.

    Leçons deProgrammation

    Ordinateurs et Réseaux

    À la fin de leurs études secondaires, les élèves devraient être en mesure de comprendre et d’utiliser les outils et les appareils couramment employés pour créer des projets numériques.

    Leçons de Ordinateurs et Réseaux

    Données

    À la fin de leurs études secondaires, les élèves devraient être en mesure d’expliquer comment utiliser les ordinateurs pour créer, stocker, classer et analyser des données.

    Leçons de Données

    Technologie et Société

    À la fin de leurs études secondaires, les élèves devraient être en mesure de décrire l’influence de la technologie sur la société et vice versa.

    Leçons de Technologie et Société

    Conception

    À la fin de leurs études secondaires, les élèves devraient être en mesure d’appliquer des principes de conception en créant des projets numériques.

    Leçons de Conception