HTML: Créer une structure basique en HTML

Ouvert le : lundi 15 juillet 2019, 00:00

Dans votre dossier html, créez un nouveau fichier exercice structure.html.

Dans ce TD, il vous faut créer le "squelette" d'un site web en utilisant les balises adaptées. Il vous faudra créer 4 zones différentes :

une zone d'entête (un header), qui fait toute la largeur
une zone de navigation (nav), calée à gauche, qui fait 20% de la taille de l'écran
une zone de contenu principal (main), calée à droite, qui fait 80% de la taille de l'écran
un pied de page (footer), qui fait toute la largeur

Voici à quoi cela doit ressembler :

Notes :

pensez à utiliser les bonnes balises de structuration
n'oubliez pas que votre page peux contenir d'autres balises HTML standard

Vous n'avez pas à réaliser les pages produit et contact. Ne faites qu'une seule page pour cet exercice.

Voici le code CSS qu'il vous faudra intégrer dans votre <head> afin d'avoir le bon style. Vous pouvez le copier/coller :

header{
    background-color:yellow;
  }
  h1{
    margin:0px;
  }
  nav{
    background-color:red;
    position:relative;
    float:left;
    width:20%;
  }
  main{
    background-color:grey;
    position:relative;
    float:left;
    width:80%;
  }
  footer{
    clear:left;
    background-color:green;
  }