Magazine

Introduction

Dans ce projet, vous apprendrez à utiliser le HTML et CSS pour créer une site Web magazine à plusieurs pages avec un agencement à deux colonnes. Vous réviserez égament beaucoup de techniques HTML et CSS d’autres projets.

Notes pour le leader du club

Introduction:

Dans ce projet, les enfants apprendront à créer un agencement à deux colonnes. Ils auront à récapituler beaucoup d’HTML & CSS appris dans d’autres projets.

Ressources en ligne

Nous recommandons d’utiliser trinket pour écrire du HTML & CSS en ligne. Ce projet contient les trinkets suivants :

Des enfants peuvent aussi utiliser ce trinket vide (jumpto.cc/html-blank) pour écrire leur propre code HTML & CSS, ou ils peuvent utiliser ce trinket modèle (jumpto.cc/html-template).

Il y a aussi un trinket contenant une solution d’exemple à tous les challenges :

Ressources hors ligne

Ce projet peut être terminé hors ligne si désiré. Vous pouvez accéder aux ressources du projet en cliquant sur le lien ‘Matériaux du projet’ pour ce projet. Ce lien contient une section ‘Ressources du projet’, laquelle inclut des ressources dont les enfants auront besoin pour terminer ce projet en mode hors ligne. Assurez-vous que chaque enfant ait accès à une copie de ces ressources. Cette section inclut les fichiers suivants :

  • intro/index.html
  • template/template.html
  • template/style.css
  • magazine/index.html
  • magazine/style.css
  • magazine/script.js
  • magazine/mutliple .png images

Vous pouvez aussi trouver une version terminée des challenges de ce projet dans la section ‘Ressources bénévoles’, qui contient :

  • magazine-finished/index.html
  • magazine-finished/style.css
  • magazine-finished/script.js
  • magazine-finished/kitten.jpg
  • magazine-finished/recipe-finished.jpg
  • magazine-finished/greenrobot.png
  • magazine-finished/spacerobot.png

(Toutes les ressources ci-dessus sont aussi téléchargeables en tant que fichiers .zip bénévoles et projet.)

Objectifs d’apprentissage

  • Ce projet apprend aux enfants à créer un agencement de type magazine à deux colonnes en utilisant float:. Il reprend également beaucoup d’HTML & CSS abordé en détails dans d’autres projets. Des exemples sont donnés pour que les enfants puissent terminer ce projet même s’ils n’ont pas terminés certains projets précédents.

Ce projet couvre des éléments des composantes suivantes de Raspberry Pi Digital Making Curriculum:

Défis

  • “Ajoutez des objets à la colonne de gauche” - placer des objets dans un élément flottant ;
  • “Ajoutez un lien de retour vers la première page” - créer des liens entre les pages d’un projet ; “Remplissez votre seconde page” - récapituler plus d’HTML & CSS ;
  • “Ajouter une autre animation” - récapituler les animations.

En-tête et arrière-plan

Les sites Web de style magazine ont souvent beaucoup de petits objets sur une page. Tout d’abord, vous allez créer un en-tête et un arrière-plan pour votre magazine.

  • Ouvrez ce trinket : jumpto.cc/web-magazine.

    Le projet doit ressembler à ça :

  • Ajoutons un en-tête.

    Vous pouvez trouver un meilleur titre pour votre magazine.

  • Pouvez-vous appliquer un style à l’en-tête ?

    Voici un exemple, mais vous pouvez choisir votre propre style :

  • Maintenant, créons un arrière-plan intéressant en utilisant un dégradé et en choisissant une police pour le magazine.

    Voici quelques exemples de style pour vous rapeller comment créer un dégradé :


Créer des colonnes

Les sites Web utilisent souvent plusieurs colonnes. Créons un agencement à deux colonnes pour votre magazine.

  • D’abord, créez deux colonnes div.

    Ajoutez le HTML surligné à index.html :

  • Maintenant, stylisez les divisions de colonnes pour que l’une soit flottante vers la gauche et l’autre vers la droite.

    Chaque colonne est inférieure à 50 %, il y a donc de la marge pour un remplissage.

    Vous devez ajouter quelque chose à une colonne pour voir l’effet.

  • Ajoutons une image de chaton au sommet de la colonne 2.

    Remarquez sur l’image de chaton est positionnée sur à peu près la moitié de la page, dans la seconde colonne.

    C’est un peu gros !

  • Utilisons max-width: pour que les images s’adaptent à leur conteneur.

    Ajoutez le style suivant à style.css.

    Il s’appliquera à toutes les images que vous utilisez dans votre magazine, et pas seulement au chaton.

  • Maintenant, ajoutez une classe photo à l’image pour que vous puissiez y appliquer un style :

  • Puis stylisez l’image pour y ajouter une ombre et une torsion afin que l’image sorte de la page :

    Faites quelques changements à moins que vous n’aimiez le résultat.


Styliser les objets du magazine

Appliquons-nous à rendre l’agencement un peu plus intéressant.

  • Ajoutez une balise div autour de votre image avec une class et ajoutez un en-tête h2 :

  • Maintenant, stylisez l’objet et l’en-tête.

    Voici un exemple, mais vous pouvez faire quelque changements :


Défi : Ajouter des objets à la colonne de gauche

Pouvez-vous ajouter une liste ordonnée et un sticker de texte dégradé à la colonne de gauche ?

Voici un exemple :

Voici le code pour l’exemple, mais vous pouvez le changer ou faire le vôtre.

HTML :

CSS :


Ajouter une seconde page

Ajoutons une seconde page à votre site Web magazine.

  • Ajoutez une nouvelle page à votre projet et nommez-la page2.html :

  • La Page 2 sera trés similaire à la première page de votre magazine pour que vous puissiez copier le html de index.html et le coller dans page2.html.

    Remarquez que les deux pages utilisent le même style.css. Elles partageront donc le même style.

  • Modifiez le titre <h1> par page2 :

  • Maintenant, il vous faudra des liens entre vos pages pour pouvoir accéder à la page 2 et revenir à la première page.

    Retourner à index.html. Ajoutez un lien dans une div à l’intérieur de la colonne 2 dans index.html:

  • Testez qu’il est possible de cliquer sur votre nouveau lien et de passer à la page 2 de votre magazine.

Défi : Ajouter un lien de retour à la première page

Pouvez-vous ajouter un lien vers la page2.html pour pouvoir cliquer et revenir à la première page ?

Indice : Regardez le HTML que vous avez utilisé pour créer un lien vers la page 2.


Défi : Remplir votre seconde page

Voici le code pour les exemples, mais vous pouvez modifier les div ou utiliser vos propres idées.

Cliquez sur l’icône images pour voir les images qui sont disponibles à l’utilisation :

Souvenez-vous que vous pouvez mettre en ligne vos propres images pour les utiliser. Assurez-vous d’avoir les autorisations nécessaires pour utiliser les images que vous mettez en ligne.


Ajouter une animation

Ajoutons une animation amusante à votre magazine.


Défi : Ajouter une autre animation

Pouvez-vous ajouter une animation à la seconde page de votre magazine ?

Produit ajouté avec succès à la comparaison des produits