This page was exported from Enseignement de l'informatique et du numérique au lycée Boissy d'Anglas [ https://icn-isn-boissy.yj.fr/wp ]
Export date: Mon Jan 20 18:53:56 2025 / +0000 GMT

Mini-projet : créer son site internet


Activités du mini-projet :

  1. Créer un compte chez un hébergeur
  2. Apprendre les rudiments du HTML/CSS avec Mozilla
  3. Créer une première page web
  4. Créer votre propre site internet

Activité 1 : Créer un compte chez un hébergeur

Pour pouvoir être accessible, un site internet doit être hébergé sur un serveur informatique. Pour commencer, choisir un hébergeur. Il existe des hébergeur en ligne, dont certains sont gratuits. Mais il est aussi possible de bénéficier gratuitement d'un hébergement web auprès de son fournisseur d'accès à internet (chez ceux qui le proposent, c'est par exemple le cas chez orange ou free). Voir la liste des hébergement web gratuits en ligne.

Activité 2 : Apprendre les rudiments du HTML/CSS avec Mozilla

La fondation Mozilla est un organisme à but non lucratif, qui œuvre au développement d'internet. C'est elle qui développe par exemple le navigateur web Firefox. Mozilla publie aussi une documentation de référence des outils du web, et notamment des langages informatiques HTML et CSS qui servent à afficher une page web. On utilisera pour apprendre les rudiments du HTML et du CSS :
  • Le guide d'apprentissage de Mozilla.
  • Glich ou jsfiddle un éditeur de code en ligne .
Il est possible d'utiliser Glich de manière anonyme, sans créer de compte. Créer un compte sur Glich vous permettra cependant de retrouver votre travail entre deux sessions. (Il n'est pas obligatoire d'utiliser une adresse email valide pour cela. Mais avec une fausse adresse mail, du type quelquechose@example.com, il ne sera pas possible de retrouver un mot de passe perdu). Pour commencer, suivre ce tutoriel : tutoriel HTML avec Mozilla pour débuter nous pouvons utiliser Glitch ou jsfiddle voici un autre tutoriel , mais en anglais. W3Schools est un site Web destiné à l'apprentissage en ligne des technologies Web. Son contenu inclut des didacticiels et des références relatives à HTML, CSS, JavaScript, JSON, PHP, AngularJS, SQL, Bootstrap, Node.js, jQuery, XQuery, AJAX et XML. Il reçoit plus de 10 millions de visiteurs uniques chaque mois. tutoriel HTML5 w3schools

Activité 3 : Créer une première page web

Installation des fichier

Télécharger le projet projet-batman.zip. Extraire l'archive dans un nouveau répertoire sur votre session. Vous aller éditer les fichiers html pour créer un mini site web de deux pages. Pour cela, il vous faut un éditeur. Prendre par exemple Notepad++ qui est installé au lycée.

Travail à faire

À vous de jouer, vous aller éditer les fichiers batman.html et bruce-wayne.html afin d'aboutir au résultat suivant (cliquer sur les images pour agrandir) :
Page batman.html Page bruce-wayne.html
page-web_batman page-web_bruce-wayne
On doit pourvoir passer d'une page à l'autre en cliquant soit sur le texte (page batman.html) soit sur l'image (page bruce-wayne.html). Les images sont dans le répertoire img créé lors de la décompression de l'archive zip.

Pour information les deux images sont sous licence Creative Common (l'image de batman a été créée par l'utilisateur BoggieNightBoy sur deviantart.com ; celle de Christian Bale a été déposée sur wikipedia.org par l'utilisateur Siebbi).

Lorsque tout fonctionne parfaitement, vérifier que votre code html ne comporte pas d'erreurs sur le validateur html de la W3C. Appeler le professeur en cas de problème.

Activité 4 : Créer votre propre site internet

Il est temps de passer à la création de votre propre site internet.

Objectif

Votre site 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.

Réalisation

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 :

Publication

Une fois votre site suffisamment abouti, vous pouvez le transférer chez votre hébergeur. Attention, à partir de ce moment il est en ligne et accessible par tout le monde. On prendra soin de tester que tout fonctionne aussi en ligne (une étape intermédiaire est de copier le site par exemple sur une clé usb, et de s'assurer qu'il fonctionne toujours).

Bonus, pour ceux qui veulent : vous pouvez même choisir votre propre nom de domaine.

Validité du code HTML/CSS

On prendra le soin de vérifier que les code HTML et CSS ne comporte pas trop d'erreurs grâce au validateur HTML/CSS :

https://validator.w3.org/unicorn/.
Post date: 2018-08-27 15:39:45
Post date GMT: 2018-08-27 13:39:45
Post modified date: 2019-09-17 08:43:04
Post modified date GMT: 2019-09-17 06:43:04
Powered by [ Universal Post Manager ] plugin. HTML saving format developed by gVectors Team www.gVectors.com