TP : Création d'un site web

Ressources nécessaires :


Objectif : On veut réaliser un site web d'une vingtaine de pages ayant chacune un menu horizontal avec les titres et sous-titres suivants :

Etape 1 : Choisir un template

Un template (ou « thème » , « layout » , etc) désigne l’enveloppe graphique d’un site Internet, indépendamment de son contenu. Il s’agit par exemple de la disposition des colonnes, du choix des couleurs, de la structure des différents éléments, etc.

Beaucoup de créateurs de site utilisent un template déjà fait, pour ne pas avoir besoin de s’occuper de la dimension graphique et se concentrer sur le contenu du site.

Je vous propose de choisir un template gratuit. Pour cela je te propose trois sites :

Choisis un template, puis télécharge-le.

Etape 2 : Organisation du site

Nous savons que le site aura une vingtaine de pages, des images, des feuilles de styles CSS, des scripts et d'autres ressources. Nous allons donc nous organiser afin de gérer cela au mieux.

  1. Crée un nouveau dossier intitulé "mon site web".
  2. Copie le contenu de ton template à l'intérieur de ce dossier. (garde une sauvagarde de ton template)
  3. Tu devrais avoir dans ton dossier des fichiers html (les pages tests) et des dossiers. Il te faudra 3 dossiers :
    • un dossier "style" : pour les feuilles de style
    • un dossier "JS" : pour les feuilles en javascript
    • un dossier "data" : pour les images ou toutes autres ressources
    Si tu n'as pas ces 3 dossiers, rajoute ceux qui te manquent ou renomme-les.
  4. Dans ton dossier, repère le fichier index.html, et fais-en une copie que tu nommeras modele.html.

Etape 3 : Création de notre page modèle

Télécharche le fichier menu.html : TÉLÉCHARGER

  1. Ouvre ton éditeur de code Notepad++.
  2. Ouvre le fichier modele.html. Vérifie que la page est en langue française (lang="fr") et que le codage des caractères est compatible avec les accents (charset="utf-8", charset="charset=ISO-10646", charset="windows-1252"...).
  3. Rajoute dans la balise <head>, le lien vers la page de style : <link rel="stylesheet" href="style/style.css"/>
  4. Ouvre le fichier style.css qui doit se trouver dans le dossier "style" et menu.html juste téléchargé.
  5. Repère dans modele.html et style.css, les sections relatives au menu.
  6. Analyse le fichier menu.html
  7. Fais les modifications dans modele.html et style.css pour obtenir un menu déroulant horizontal.
  8. Rajoute les différents titres et sous-titres pour obtenir le menu souhaité.

  9. Crée les hyperliens pour chaque titre et sous-titre. Par convention, la page d'accueil est index.html. Pour les autres pages nomme-les 1.html, 2.html etc...
  10. Fais autant de copies de ta page modele.html, que de liens de ton menu. Renomme les pages comme précedemment.

Etape 4 : Publication du site

Phase 1 : Choisir un hébergeur

Ton site est prêt (enfin presque...). Maintenant il faut le publier sur le net.

Il nous faut un hébergeur gratuit si possible. Il y a une multitude d'hébergeurs qui proposent différentes prestations.

Nous allons utiliser l'hébergeur 5Gbfree.com, il est en anglais, l'offre est complète (php, base de données, etc...) et sans publicité. Un autre avantage : on obtient un hébergement en quelques minutes.

Pour cela, il suffit d'avoir une adresse mail valide

  1. Note ton adresse mail, sinon crée une adresse mail.
  2. Va sur le site de 5Gbfree.com à l'adresse https://www.5gbfree.com/
  3. Crée un compte en t'inscrivant. En cliquant sur GET STARTED

  4. Choisis l'option gratuite, $0 en cliquant sut SIGNUP NOW
  5. Tu dois remplir correctement ce formulaire.
  6. Une fois ton formulaire envoyé, tu recevras un mail de confirmation, où il faut cliquer sur le lien.
  7. Une fois ton mail confirmé, tu recevras un nouveau mail avec l'adresse du panneau de configuration de ton site et ton mot de passe.
    Conserve bien ce mail...
  8. Clique sur le lien pour accéder au panneau de configuration de ton site.
    Remplis le formulaire avec les données du mail (en faisant des copier-coller). Tu peux auussi mettre ce site dans tes favori.
  9. Maintenant tu es dans le panneau de configuration de ton site. Il faut créer un compte ftp pour y déposer notre site.
    Choisis FTP Accounts.
  10. Dans la partie FTP Accounts, il y a éjà un compte configuré pour notre site.
    • 1 Clique sur Configure FTP Client.
    • 2 Puis télécharge le fichier pour Filezilla.
    Tu peux quiitter le panneau de configuration de ton site.

Voilà, tu as un hébergeur et une adresse pour ton site.

Tu peux choisir un autre hébergeur parmi la liste suivante :

Phase 2 : Téléverser le site

Pour envoyer ton site de ton ordinateur à ton hébergeur, (ce qu'on appelle téléverser, le contraire de télécharger), tu as besoin d'un clientFTP : Filezilla.

  1. Ouvre le logiciel filezilla (après l'avoir installé bien sûr).
  2. Nous allons récupérer les données pour notre connexion ftp :

    Va dans l'onglet fichier et choisis Impoter les paramètres....
  3. La fenêtre suivante s'affiche :

    Va récupérer le fichier dans le dossier téléchargements et valide les différentes fenêtres.
  4. Nous allons enregistrer le mot de passe :

    Va dans l'onglet fichier et choisis Gestionnaire de sites...
  5. . La fenêtre suivante s'affiche :

    • 1 Dans Type d'authenfication, choisis Normale.
    • 2 Copie le mot de passe reçu par mail dans Mot de passe
    • 3 Clique sur Connexion.
  6. . La fenêtre suivante s'affiche :

    • 1 Fenetre de connexion pour informations et message d'erreurs.
    • 2 & 2' Fenêtre de navigation sur notre PC
    • 3 & 3' Fenêtre de navigation sur le site.
    • 4 Fenêtre des transfert Connexion.
    Notre site sera dans le dossier public_html.
  7. Clique sur le dossier public_html. La fenêtre suivante s'affiche :

    Dans la fenètre 2 retrouve le dossier où se trouve ton site et fais un glisser-déposer des fichiers de la fénètre 2' vers la fenètre 3'. Ton site va se téléverser sur internet. Tu peux voir dans la fenètre 4 du bas que le transfert de tes fichiers a bien réussi. Si tout c'est bien passé ton site est en ligne.
  8. Dans ton navigateur web (par exemple chrome), tu peux saisir l'adresse de ton site : http://monsiteisn.5gbfree.com/
  9. Envoie-moi un mail avec l'adresse de ton site.