Création d'un header

Le header

Le header est une en-tête pour une page web, en général il est constitué d'une image en bandeau et d'un titre.
Commencez par télécharger cette image
Glissez-déposez là dans le dossier images

Dans la feuille de style il faut rajouter ces lignes :

Création du header


header {
  height:400px;
  background-image:url(images/banniere.jpg);
  border:1px solid #CCC;
  width:1000px;
  margin:0px auto;
  position: relative;
}

#header h1{
  color:white;
  text-align: center
}
  • Les attributs du header: hauteur, image de fond, largeur, etc...
  • On rajoute le fait que : Dans la balise header (#header) la balise de titre (h1) aura les attributs (blanc pour le texte et aligné au centre)

Faire afficher le header

Dans la page html juste après la balise <body>, on rajoute le code suivant:
  • Le simple fait d'écrire <header> </header> fera afficher le bandeau avec l'image.
  • Pour le titre il faut spécifier au navigateur que c'est une balise "h1" du header. Cela se fait avec les instructions:
    
  <div id="header">
    <h1> Mon site ICN</h1>
  </div>
    Qui signifie que, dans cette division (div) rattachée au header (id="header"), on utilise les propriétés définies dans la feuille de style de la balise "h1" pour le header.

Ce qui donne:



Vous pouvez choisir d'autres images (libres de droits) sur Pixabay. Et les retravailler avec un logiciel de traitement d'images.

Travail pour les courageux

Trouver ce qu'il faut sur internet pour la création d'un "footer"...