DY

TP04: Mise en forme d'un document

Ce tp a pour but de récapituler l'ensemble des premiers tps vus ensemble. Nous allons ainsi revoir HTML et CSS.

Structure de notre projet

Avant de poursuivre notre découverte du monde du web, il convient de s'attarder quelque peu sur la structuration de nos projets.

Créons ensemble une structure squelette pour l'ensemble de nos projets web:

  1. index.html, ce fichier contient comme vous le savez déjà le contenu de la page d'accueil de notre site,
  2. un dossier imgs/, ce dossier contiendra l'ensemble des images utilisées sur notre site,
  3. un dossier styles/, ce dossier contiendra le code CSS utilisé pour la mise en forme du contenu.

Document HTML

Nous allons créer plusieurs éléments HTML au sein de notre document:

Est-il utile de rappeler qu'il faut toujours commencer par le squelette HTML5 ?

Créer une section contenant:

Vous devriez arriver à un résultat équivalent

Mettre en forme notre document

Mettez en forme votre document HTML via CSS pour obtenir un résultat équivalent:

jwe example

Voici les codes couleurs utilisés au sein de la feuille de style:

#001d37
#0b2849
#a8faff
#00d6ea

Vous devriez arriver à un résultat équivalent