Aller au contenu principal

HTML + CSS

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​

  • Se connecter sur l'application desktop OneDrive afin d'avoir ses dossiers synchronisés.
  • Réorganiser son dossier OneDrive, par exemple :
    • Mettre tous ses fichiers de l'année dernière dans le dossier 1m et créer un dossier 2m pour cette année.
    • Dans le dossier 2m, créer un dossier informatique, puis les dossiers html et css dans le dossier informatique.
OneDrive/
├── 1m/
│   ├── anglais/
│   ├── francais/
│   ├── informatique/
│   └── autres-branches/
└── 2m/
    └── informatique/
        ├── html/
        └── css/
  • Ouvrir l'application Visual Studio Code et ouvrir le dossier html qui vient d'être créé dans OneDrive.
    • "Fichier" > "Ouvrir dossier…" > Sélectionner le dossier html
  • Créer un ficher index.html depuis Visual Studio Code.
    • Cliquer sur l'onglet "Explorateur " (sur la gauche).
    • Cliquer sur "Nouveau fichier " ou faire un clic droit dans l'arborescence et sélectionner "Nouveau fichier".
    • Nommer le fichier index.html.

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

Vérification

A la fin du cours, bien vérifier que son site web est enregistré sur OneDrive.
On va le réutiliser dans un prochain TP pour le partager avec les camarades.

Dernière mise à jour le