02 HTML & CSS

Objectifs

Créer un site avec HTML et CSS.

Estimer son temps de travail

Rendu

GitHub Classroom : https://classroom.github.com/a/iYqhqsCN
- ./report.md : Rapport individuel en Markdown.
Délai : 1 semaine

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âche	Temps estimé	Temps passé	Commentaire
Estimation	10m	15m	...
...	...	...	...
Total	2h	1h30	...

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).

Rendu​

Mise en place​

Estimation​

HTML​

CSS​

Rendu

Mise en place

Estimation

HTML

CSS