Aller au contenu principal

Projet mini-site web

Ce projet a pour finalité la création d'un minisite Web. Il peut être réalisé seul ou en équipe (3 élèves maximum). Les contraintes techniques doivent être respectées et impliquent la présence de certaines balises. Le site doit disposer d'un nombre minimum de pages, variable selon la taille de l'équipe :

TailleNombre de pages web
1 élève2 pages minimum (1 page d'accueil et 1 sous-page)
2 élèves3 pages minimum (1 page d'accueil et 2 sous-pages)
3 élèves4 pages minimum (1 page d'accueil et 3 sous-pages)

Vous êtes libres du choix du sujet traité par votre site sous réserve qu'il n'y ait aucune infraction à la loi. Pour en savoir plus sur les infractions potentielles, consultez la page « Responsabilité des contenus publiés sur internet : quelles sont les règles ? » disponible sur https://www.demarches.interieur.gouv.fr.

1. Phase préparatoire​

Votre site ne sera pas créé à partir de zéro. Un site d'amorçage est disponible en téléchargement. Il comporte une page d'accueil, une sous-page et quelques éléments mis en forme via une feuille de style CSS indépendante.

  1. Cliquer sur télécharger pour récupérer le site d'amorçage : 📦 télécharger
  2. Ouvrir le fichier ZIP. Un dossier init s'y trouve
  3. Copier/coller ce dossier à l'intérieur de votre dossier personnel
  4. Renommer le dossier init en nom_siteweb où nom correspond au nom de famille de chaque élève écrit en minuscules.
    Exemple : pour Tim Berners-Lee et Robert Cailliau, le dossier se nommerait berners_lee_cailliau_siteweb

Contenu du fichier ZIP​

  • Fichier index.html - contient le code HTML de la page d'accueil
  • Fichier style.css - contient le code CSS de mise en forme
  • Fichiers page-exemple.html - contient le code HTML d'une sous-page

Logiciels​

Pour visualiser les pages, vous utiliserez un navigateur Web comme Chrome, Firefox ou Edge. Le contenu des pages peut être modifié à l'aide de l'application Bloc-notes de Windows. Ce n'est cependant pas l'application la plus ergonomique et on lui préfèrera le logiciel Notepad++ donc voici les instructions de téléchargement.

Installation du logiciel Notepad++
  1. Télécharger Notepad++ v8.4.6 version portable (zip)
  2. Se rendre dans le répertoire où le fichier téléchargé a été enregistré
  3. Faire un clic-droit sur celui-ci et choisir l'option Extraire tout...
  4. Lancer l'application depuis le dossier décompressé
  5. Passer l'application en français en allant dans Settings puis Preferences... et choisir Français au niveau du champ Localization

2. Page d'accueil​

La page d'accueil de votre site correspond au fichier index.html. Vous êtes libre de la modifier entièrement. Elle devra cependant contenir au minimum les éléments suivants :

  • Un titre de page (visible au niveau de l'onglet du navigateur et géré par la balise <title>)
  • Un titre principal (balise <h1>)
  • Au moins un paragraphe de texte (balises <p>)
  • Un ou plusieurs liens vers d'autres pages de votre site (balise <a>)
  • Un ou plusieurs liens vers des sites externes (balise <a>)
  • Au moins une image (balise <img>). Attention, les images doivent être locales. Vous devez les télécharger et les placer dans le même dossier que votre page web pour l'utiliser.
  • Indiquer le nom de chaque des auteurs de la page via la métadonnée author (balise <meta name="author" content="nom des auteurs"> située dans <head>)

3. Sous-pages​

Les sous-pages correspondent au fichier page-exemple.html et à toutes les autres pages web que vous pourriez ajouter et nommer librement. Attention, le fichier page-exemple.html est un exemple, vous devez en modifier le contenu et le nom.

Les sous-pages devront impérativement disposer des éléments suivants :

  • Un titre de page (visible au niveau de l'onglet du navigateur et géré par la balise <title>)
  • Un titre principal (balise <h1>)
  • Un paragraphe de texte (balise <p>)
  • D'un lien de retour vers la page d'accueil de votre site (balise <a href="index.html">...</a>)
  • Indiquer le nom de chaque des auteurs de la page via la métadonnée author (balise <meta name="author" content="nom des auteurs"> située dans <head>)

4. Mise en forme CSS​

Les pages web sont associées au fichier style.css qui contient le code CSS permettant la mise en forme des éléments. Pour rappel, l'association entre une page web et le fichier style.css s'effectue à l'aide d'une balise <link> à placer à l'intérieur des balises <head> ... </head> :

<head>
   ...
   <link href="style.css" rel="stylesheet">
   ...
</head>

5. Enrichissement du site​

Tout en conservant les minimums demandés, vous pouvez consulter les contenus suivants afin d'enrichir vos pages :

6. Envoi du travail​

Votre projet devra être transmis au format ZIP via l'application Exercices de l'ENT.

  1. Nettoyer le répertoire de votre site de tout fichier inutilisé
  2. Compresser le répertoire de votre site au format ZIP (tutoriel)
  3. Nommer votre fichier ZIP prive.zip si vous ne souhaitez pas que votre site soit mis en ligne, ou public.zip si vous souhaitez qu'il soit potentiellement mis en ligne
  4. Se connecter à l'ENT
  5. Accéder à l'application Exercices
  6. Cliquer sur l'exercice [2PRJ] Mini-site web
  7. Choisir le fichier ZIP créé précédemment pour envoi
  8. Valider l'envoi du devoir