Aller au contenu principal

02 HTML & CSS

Objectifs

Créer un site avec HTML et CSS.

  • Estimer son temps de travail

Rendu

Mise en place

  • Cloner le nouveau dépôt GitHub Classroom de cette semaine à côté de celui de la semaine précédente.
    • git clone depuis le répertoire du cours.
    • bs21inf5/
      ├── sem01-outils-{pseudo}/
      └── sem02-html-css-{pseudo}/
  • Ouvrir le dossier du dépôt dans Visual Studio Code.
    • Avec le terminal : code sem02-html-css-{pseudo}
    • Avec Visual Studio Code : Fichier > Ouvrir dossier > sélectionner le dossier du dépôt

Estimation

  • Estimer le temps nécessaire pour réaliser ce travail dans le rapport.
    • Découper le travail en tâches pour faciliter l'estimation.
  • Une fois terminé, comparer le temps estimé avec le temps réellement passé.
  • Le but n'est pas d'estimer correctement, mais de comprendre comment améliorer ses estimations.
TâcheTemps estiméTemps passéCommentaire
Estimation10m15m...
............
Total2h1h30...

HTML

  • Créer un dossier web-html dans votre répertoire du dépôt Git.
  • Créer un fichier index.html avec le contenu suivant :
    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>
  • l'arborescence du projet doit ressembler à ceci :
    sem02-html-css-{pseudo}/
    └── web-html/
    └── index.html
  • Ouvrir le fichier index.html avec Live Server
    • Clic droit sur le fichier index.html > Ouvrir avec Live Server
    • Ou cliquer sur Go Live en bas à droite dans Visual Studio Code qui va ouvrir le fichier courant
  • Modifier la page Web et observer les changements
    • Modifier le titre de l'onglet (title)
    • Modifier le titre de la page (h1)
    • Modifier le contenu de la page (p)
  • Ajouter une image à la page Web
    • Créer un dossier images dans le dossier web-html
    • Télécharger sur Internet une image dans le dossier images
    • Afficher l'image dans la page Web avec la balise <img>
  • Baliser du texte
    • Ajouter deux niveaux de titres
    • Ajouter des paragraphes
    • Créer une liste ordonnée et non ordonnée
  • Ajouter des liens
  • Commenter le code HTML
    • Ajouter quelques commentaires pour expliquer ce qui a été fait
  • Formatter le fichier avec Visual Studio Code
    • Windows : Alt + Shift + F
    • macOS : Option + Shift + F
  • Vérifier que le code HTML est valide avec le validateur W3C
  • Créer un commit avec le message ajouter web-html

CSS

  • Créer un dossier web-css dans le répertoire du dépôt Git.
    sem02-html-css-{pseudo}/
    ├── web-css/
    └── web-html/
  • Suivre les instructions dans Démarrer avec CSS
  • Créer un commit avec le message ajouter web-css
  • Créer un dossier test-css dans le répertoire du dépôt Git.
    sem02-html-css-{pseudo}/
    ├── test-css/
    ├── web-css/
    └── web-html/
  • Suivre les instructions dans Mettre en oeuvre vos connaissances
  • Créer un commit avec le message ajouter test-css.
  • Ne pas oublier de pousser tous les commits sur le dépôt Git distant.
Git

Ne pas oublier de pousser tous les commits sur le dépôt Git distant (vérifier sur GitHub).