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​

  • Changer le navigateur par défaut en Firefox ou Chrome (ne pas utiliser Safari).
    • Pomme (en haut à gauche) > Réglages Système > Général > Navigateur par défaut (utiliser la barre de recherche)

OneDrive​

  • 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/

Visual Studio Code​

  • Ouvrir l'application Visual Studio Code.
  • Installer l'extension Live Server dans Visual Studio Code.
    • Extensions > Rechercher Live Server > Cliquer sur Installer
  • Ouvrir le dossier html qui vient d'être créé dans OneDrive.
    • Fichier > Ouvrir dossier… > Sélectionner le dossier html
      • html au lieu de vscode101 sur l'image.
  • 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 le volet et sélectionner Nouveau fichier.
    • Nommer le fichier index.html.
  • Copier le code HTML suivant dans le fichier index.html :
    index.html
    <!doctype html>
    <html lang="fr">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Page Web</title>
      </head>
      <body>
        <h1>Titre de la page</h1>
        <p>Contenu de la page</p>
      </body>
    </html>
  • Ouvrir le fichier index.html avec Live Server.
    • Clic droit sur le fichier index.html > Ouvrir avec Live Server
    • Ou cliquer sur le bouton Go Live en bas à droite de Visual Studio Code.
  • Modifier la page Web et observer les changements (Ctrl + S pour sauvegarder).
    • Modifier le titre de l'onglet (title).
    • Modifier le titre de la page (h1).
    • Modifier le contenu de la page (p).

Tutoriel​

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

Votre site​

  • Créer un petit site web personnel sur un sujet libre.
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