Gymnase

Apparence

Site Web ​

Objectifs ​

  • Expliquer l'utilisation du HTML, CSS et JS
  • Créer une page web en HTML

Théorie ​

Languages du web ​

Lorsque vous accédez à une page web grâce à votre navigateur web, le serveur web vous envoie un fichier HTML qui contient le contenu de la page web. Ce fichier HTML peut contenir des liens vers d'autres fichiers (CSS, JS, images, vidéos, etc.) qui seront aussi récupéré par le navigateur. Le navigateur web va ensuite interpréter tous ces fichiers et afficher le résultat à l'écran.

Les trois languages principaux utilisés pour créer des pages web sont :

  • HTML : HyperText Markup Language
    • Définit la structure d'une page web : des paragraphes, des titres, des listes, des tableaux, des formulaires, etc.
  • CSS : Cascading Style Sheets
    • Définit le style d'une page web : la couleur, la taille, la police, la position, etc. des éléments d'une page web.
  • JS : JavaScript
    • Définit le comportement d'une page web : des animations, des interactions avec l'utilisateur, etc.

Source : https://www.linkedin.com/pulse/building-blocks-web-development-html-css-javascript-sahil-kavitake/

Outils de développement ​

On va utiliser Visual Studio Code, un éditeur de code (IDE), pour écrire les fichiers HTML, CSS et JS.

Pratique ​

  • Connectez-vous sur l'application desktop OneDrive afin d'avoir votre dossier synchronisé.

  • Réorganisez votre dossier OneDrive, par exemple :

    • Mettez tous vos fichiers de l'année dernière dans un dossier 1m et créez un dossier 2m pour cette année.
    • Dans le dossier 2m, créez un dossier informatique, puis un dossier site-web dans le dossier informatique.
    • md
      .
├── 1m/
│   ├── informatique
│   └── autres-branches
└── 2m/
    └── informatique/
        └── site-web

  • Ouvrez l'application Visual Studio Code et ouvrez le dossier site-web que vous venez de créer dans votre OneDrive.

  • Créez un ficher index.html depuis Visual Studio Code.

Suivez le tutoriel sur OpenClassrooms pour créer une page web :

WARNING

A la fin du cours, vérifiez bien que votre site web est sur OneDrive.
On va le réutiliser dans un prochain TP où vous allez le partager avec vos camarades.