ISN, Archives, HTML/CSS

Activité n°2 : Créer votre propre site internet [Archive/Obsolète]

Si besoin : revenir en arrière.

HTML et CSS

On va continuer le cours de codecademy.com, mais on va sauter le module 2 intitulé Le b.a.-ba du language HTML II. Ce cours explique comment faire des listes ou changer le style d’un paragraphe (taille, couleur et type de police, couleur du fond, alignement, etc.). Vous pourrez faire des recherches sur ces sujets quand vous en aurez besoins, mais en attendant, passons à la suite.

Suivre les deux modules intitulés :

  • Le b.a.-ba du language HTML III, exercices 1 à 15 (attention, s’arrêter à Récapitulons… ne pas faire l’application qui suit intitulée Une page avec photo cliquable).
  • Puis passer directement au module intitulé CSS : un aperçu, exercices 1 à 26 (s’arrêter à Taille et bordures, ne pas faire l’application concevez un bouton pour votre site).

Créer votre site internet

À vous de jouer, il est temps de créer votre premier site internet.

Ce site internet devra compter au minimum les pages suivantes :

  • Une page d’accueil, nommée index.html, contenant la présentation rapide du site ;
  • Un cahier de bord (sur une ou plusieurs pages), qui devra garder une trace de ce qui a été fait à chaque séance ;
  • Une page exposé, recensant les exposés faits par vous-même et les autres élèves de la classe  ;
  • Une page projet, présentant l’avancé de votre projet ;
  • Une page À propos présentant la raison d’être du site et donnant la référence de toutes les sources utilisées pour la réalisation de votre site internet.

Il est conseillé de s’aider pour cela d’un des gabarits du site de Florent Verschelde . Vérifier tout d’abord ce que vous avez le droit de faire et de ne pas faire (voir la page Licence).

À partir d’un de ces gabarits, commencer à créer le squelette de votre site internet, constitué d’un fichier par page et d’un menu permettant de naviguer d’une page à l’autre. Quand le squelette du site est fonctionnel, il est temps de commencer à lui donner du contenu.

Si besoins, on trouvera tout ce que l’on peut avoir besoin sur le site de la fondation Mozilla :

Pour finir, on prendra le soin de vérifier que les code html et css ne comporte pas trop d’erreurs :