Passer la navigation

Site Web de tourisme (avec Glitch)

Par Caitlin Davey 90 minutes
Niveau
4e à 6e année
Disciplines
Anglais, language arts,
Univers social
composants du cadre
  • Programmation
  • Conception
Outils et langages
Glitch,
HTML,
CSS

Concepts clés en programmation

  • Séquence 

Terminologie

Page Web

Une page Web est un document ou un fichier hypertexte connecté au World Wide Web qui affiche des informations à l’aide d’un langage de programmation.

 

Hyperlien

Un hyperlien, ou tout simplement un « lien », est un lien d’un fichier hypertexte vers un autre emplacement ou fichier sur le Web. Les liens donnent toute leur vie au Web : ils connectent les pages les unes aux autres afin que nous puissions les trouver.

 

HTML

Le HTML (HyperText Markup Language) est un langage utilisé pour ajouter des balises, ou « baliser », 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

Le CSS (cascading style sheets, ou feuilles de style en cascade) est un 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 tout en le rendant réactif et tout simplement génial.

 

Balise

Une balise est un é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> est l’en-tête le plus important d’une page Web.

Dans cette situation d'apprentissage axée sur les projets, les élèves créeront un site Web de tourisme pour une province ou un territoire, au choix. Avec les apprenants, repassez les étapes du projet : trouver des idées pour le site, collecter des informations, vérifier les informations et programmer le site.

Introduction

Tout d’abord, nous allons faire des recherches. Demandez aux apprenants de choisir une province ou un territoire (ou faites-le vous-même) et de noter leurs réponses aux questions suivantes :

  • Pour quoi cette province ou ce territoire est-elle / il connu(e)?
  • Trouvez cinq activités à faire dans la région.
  • Trouvez une photo ou une vidéo de la région.

Programmation en groupe

  1. Repassez la liste des éléments de base d’une page Web avec les diapositives « Bases du HTML » à l’adresse http://bit.ly/bases-du-html.
  2. Montrez l’exemple de projet (https://glitch.com/~tourism-yukon) aux apprenants. Cliquez sur « Remix » pour voir à l’intérieur du projet.
  3. Formez des équipes de deux et assignez une balise de l'exemple de projet à chaque équipe (p. ex. , et tout ce qui se trouve entre les chevrons).
  4. Demandez aux groupes de prendre deux minutes pour consulter w3schools.com et faire une recherche sur la balise en question et son utilisation sur le site.
  5. Vérifiez leur compréhension, soit avec une présentation orale ou dans un document Google Docs partagé où ils écriront leurs découvertes.

Activité

Demandez aux apprenants d’ouvrir le projet de départ (https://tourism-website-starter.glitch.me/) et de cliquer « Remix ».

Demandez aux apprenants de se connecter en utilisant le compte que vous avez créé pour la classe.

Utilisez le corrigé pour réaliser les étapes suivantes avec les apprenants :

  1. Changer le titre du site.
  2. Changer l’en-tête.
  3. Créer une liste.
  4. Intégrer une vidéo.
  5. Ajouter une image.
  6. Changer les styles.

Objectifs d’apprentissage

Je peux remixer des sites Web en modifiant des balises HTML.
Je peux ajouter du texte à mon site Web avec les balises h1 et p.
Je peux ajouter des images à mon site Web avec les balises img.
Je peux concevoir mon site Web avec le CSS.

Critères de réussite

J’ai remplacé le titre de mon projet Mozilla Thimble par mon prénom.
J’ai remplacé l’en-tête de ma page Web par le nom de ma province ou de mon territoire.
Ma liste comprend cinq suggestions différentes pour les touristes dans cette région.
J'ai intégré une vidéo pertinente et utile pour les touristes dans cette région.
J’ai ajouté une image de ma province ou de mon territoire à mon site Web.
J'ai changé le style de trois balises différentes sur mon site avec le CSS.

Méthodes d’évaluation
Demandez aux apprenants d’utiliser des Commentaires pour expliquer leur code.
Accordez-leur du temps pour présenter leur site Web au groupe.
Orientez les apprenants pendant qu’ils révisent leur projet (majuscules, grammaire, orthographe d’usage, ponctuation) pour la remise.

Initiez les apprenants au HTML de façon ludique. Avant cette leçon, planifiez une période pour jouer à eraseallkittens.com (« Play Demo »). Il est conseillé de créer un compte gratuit que toute la classe pourra utiliser. Vous avez aussi l’option de laisser les apprenants créer leur propre compte avec leur adresse courriel.

Avec les apprenants, remplissez un tableau avec trois colonnes : ce qu’ils savent, ce qu’ils veulent savoir et ce qu’ils ont appris. D'abord, demandez-leur ce qu’ils savent sur les sites Web et ce qu’ils veulent savoir à leur sujet. Après la leçon, en grand groupe, remplissez la colonne des éléments appris.

Faites une recherche plus approfondie. Demandez aux apprenants de chercher des informations sur leur province ou territoire et de diviser ces informations en sous-sections. Créez un site Web multipage en ajoutant de nouvelles pages HTML à l’intérieur du projet Thimble et faites des liens entre les pages avec les balises a.

Communauté Et Environnement : Les Régions Politiques Et Physiques Du Canada.

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

r

Plus de plans de cours pour 4e à 6e 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