Les blocs structuraux

Diviser la page

Une page web contient généralement :

• un en-tête avec logo;
• un menu de navigation;
• un pied de page;
• des sections de contenu.

Ces quatre blocs permettent de bien diviser la page en sections compréhensibles et structurées.

Pour faciliter le travail, on utilise des balises de bloc telles que :

• <header> pour l'en-tête
• <nav> pour le menu de navigation
• <footer> pour le pied de page
• <main>, <article>, <section> ou <div> pour les blocs de contenu, dépendemment du contenu

Les balises de bloc ne changent pas grand chose au niveau du visuel de la page web. Par contre, on les stylise et positionne facilement avec du CSS en utilisant les sélecteurs de balise.

Création d'un en-tête

Les entêtes se présentent sous différentes formats et peuvent contenir un ou plusieurs des éléments suivants :

• logo ;
• nom, slogan, mascotte, image, etc. propres à la compagnie ;
• quelques liens importants tels qu'un vidéo, version d'essai, téchargement, etc. ;
• choix de langue ;
• champs de recherche.

Minimalement, on devrait y trouver un logo ou un élément de base reconnaissable et cliquable qui ramène à la page d'accueil du site.

L'en-tête, sur la page d'accueil d'un site web, est souvent le premier contact avec l'utilisateur et doit capter son attention. Sur Internet, il n'existe pas de deuxième chance pour faire bonne impression. L'utilité de l'en-tête, lorsque bien présentée, permet à l'utilisateur de rapidement obtenir de l'information-clé et savoir s'il est au bon endroit.

Exemple :

En-tête de base

Le HTML pour créer un en-tête est plutôt simple.

On utilise la balise <header> pour délimiter le contenu de l'en-tête. À l'intérieur de l'ouverture et de la fermeture de la balise, on y ajoute les éléments voulus tels que le logo, le nom de la compagnie, une image, etc.

La balise header est une balise de type bloc et ajoute donc un retour de ligne après la fermeture de la section. C'est le seul style qui lui est appliqué par défaut.

Exemple :

Divisions de l'en-tête

De nos jours, les en-têtes de sites web sont plus recherchées que ce simple exemple. Il y a généralement des sections, ou des divisions, bien définies comme, par exemple, le menu de navigation, la section de recherche, la sélection de la langue, etc.

Dans ce cas, on peut alors diviser le bloc d'en-ête en sous-blocs à l'aide de la balise <div>. Cette balise indique une division ou une section d'un document HTML. Elle n'a pas de signification particulière autre que de créer un bloc.

Comme toutes les balises de type bloc, la balise <div> prend toute la largeur de la page par défaut et ajoute un retour de ligne. Par contre, l'intérêt d'utiliser les divisions est de pouvoir positionner des éléments de contenu à l'aide du CSS, par bloc.

Exemple :

HTML

    <header>
        <div id="header_img">
            <img src="img/logo-test2.png" alt="logo">
        </div>

        <div id="lang_select"> Français  |  Anglais </div>

        <div id="header_text">
            <h1>BEST : la meilleure compagnie</h1>
            <p>Notre slogan est aussi le meilleur!</p>
        </div>
    </header>

CSS

    body {
        margin: ;
        font-family: Arial;
        color: white;
    }

    header {
        background-image: url(img/header.png);
        background-repeat: no-repeat;
        background-size: cover;
        padding: 0.5rem;
        text-align: center;
    }

    #header_img {
        margin-top: 2.5rem;
        float : left;
    }

    #lang_select {
        float: right;
        margin: 1rem;
        padding: 1rem;
        background-color: rgba(255,255,255,0.25);
        border-radius: 1rem;
    }

    #header_text {
        padding-top: 2.5rem;     
    }

    #header_text p {
        font-style: italic;
        font-size: 1.3em;
    }

Création d'un pied de page

Le pied de page contient généralement les informations complémentaires au site web et peuvent présenter un ou plusieurs des éléments suivants :

• droits d'auteur (copyright) ;
• table des matières (sitemap) ;
• politiques de la compagnie sur la vie privée (utilisation des données) ;
• règles d'utilisation ;
• informations de contact ;
• adresse, coordonnées et / ou carte géographique d'emplacement de la compagnie ;
• liens de navigation ;
• icônes vers les médias sociaux ;
• champs d'inscription aux emails de nouvelles ;
• outil de recherche ;
• photo, texte ou lien d'information à propos des fondateurs / propriétaires / compagnie / valeurs, etc... ;
• les prix obtenus, mentions, certifications ;
• témoignages ;
• articles récents / événements à venir, etc ;
• ...

Bref toute information pertinente pour l'entreprise, les partenaires et le client peuvent se trouver dans le pied de page. Il existe d'ailleurs une tendance depuis quelques années à l'utilisation de ce qu'on appelle un "fat footer" pour les sites web de grande envergure.

Le fat footer contient un nombre important d'informations pour l'internaute qui n'aurait pas trouvé ce qu'il cherche. On peut alors trouver ici une version exhaustive (pimpée) du menu de navigation et plusieurs des éléments cités ci-haut.

Évidemment, ce type de pied de page ne convient pas à tous les sites web. Dépendament du type de site web, le pied de page contiendra toujours de l'information pertinente et nécessaire aux visiteurs visés et la taille sera adaptée au besoin.

Exemple d'un pied de page

Comme pour l'en-tête, il existe une balise de bloc pour créer le pied de page : <footer>.

On insère donc le contenu du pied de page à l'intérieur de ce bloc. Et, comme l'en-tête, on peut aussi diviser le pied de page en blocs.

Exemple :

HTML

<!--Pied de page prenant la totalité de la largeur de page-->
<footer>
  <!--Bloc div qui permet de centrer le contnu du pied de page-->
  <div id="center_foot">
    <!--Bloc des médias sociaux-->
    <div id="foot_social">
      <p class="foot_title">Rejoignez-nous</P>
      <span class="fab fa-facebook-square"> </span><br>
      <span class="fab fa-twitter-square"> </span><br>
      <span class="fab fa-linkedin"> </span><br>
    </div>

    <!--Bloc du menu de pied page-->
    <div id="foot_menu">
      <p class="foot_title">
        Accueil<br>
        Nos produits<br>
        Soutien<br>
        Politque de retour<br>
        Notre mission<br>
        Nouvelles
      </p>
    </div>

    <!--Bloc À propos de nous-->
    <div id="foot_about">
      <h4 class="foot_title">À propos de nous</h4>
      <p>Sed lacus orci, maximus gravida iaculis vitae, fringilla ac elit. Sed congue dui eu erat tincidunt eleifend. Nullam
      felis neque, luctus in dolor sed, euismod accumsan augue. Pellentesque habitant morbi tristique senectus et netus et
      malesuada fames ac turpis egestas.</p>
    </div>
  </div>
</footer>

CSS

    footer {
    background-image: linear-gradient(to right, rgb(29, 91, 226) , rgb(19, 202, 235));
    padding: 0.3rem;
    min-height: 12rem;
  }

  footer span {
    font-size : 15rem;
  }

  #center_foot{
    width: 85%;
    margin-left:auto;
    margin-right: auto;
  }

  #foot_social {
    display: inline-block;
    padding-left: 0.5rem;
  }

  #foot_about {
    display: inline-block;
    width:25%;
  }

  .foot_title {
    font-weight: bolder;
    font-variant-caps: all-small-caps;
  }

  #foot_menu {
    display: inline-block;
    width: 20%;
  }

Création du contenu

Pour créer le contenu d'une page web, c'est à dire ce que l'utilisateur veut consulter, ou encore le contenu propre à une page, il existe quatre blocs possibles :

Balise	Description
<div>	Bloc générique qui ne possède aucune signification. Utilisée pour la mise en page de blocs avec CSS.
<article>	Bloc de contenu indépendant qui peut être extrait d'un site web et conserver tout son sens. On peut le comparer à un article de journal, par exemple, ou encore à un billet de blog. Utile pour les flux RSS entre autres.
<section>	Bloc de contenu dont les éléments ont un lien entre eux. Par exemple, une page d'acceuil divisée en trois blocs : 1) Nos produits, 2) Dernières nouvelles, 3) Qui nous sommes Il y aurait alors trois sections.
<main>	Bloc regroupant le contenu principal de la page. Ce contenu doit être propre à la page actuelle et ne doit pas être répété sur les autres pages.

Non seulement les balises de bloc signifient quelque chose pour le développeur, mais surtout, ces balises rendent le travail des robots d'indexation des moteurs de recherche plus simple. Ils peuvent ainsi plus facilement comprendre et catégoriser le contenu indexé, ainsi qu'attribuer une importance plus ou moins élevée, selon le type de contenu, pour les recherches web.

Comme l'en-tête et le pied de page, il est possible de diviser le contenu en sous-divisions...

Ainsi, il n'est pas surprenant de retrouver comme contenu d'une page un bloc <main> principal pour le positionnement de la totalité du bloc de contenu dans la page, divisé en sections à l'aide de la balise <section>.

Exemple :

HTML

<main id="contenu">

    <section id="histoire">
        <h1>Notre histoire</h1>
        <p><!--Long texte ici--></p>

        <p><!--Long texte ici--></p>
    </section>

    <section id="mission">
        <h1>Notre mission<h1>
        <p><!--Long texte ici--></p>
    </section>

</main>

CSS

 body {
    font-family: Arial;
    background-image: url(img/office.jpg);
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

#contenu {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}


#histoire {
    background-color: rgba(255,255,255,0.95);
    color: black;
    padding: 6rem;
    margin-top: 18rem;
    margin-bottom: 18rem;
}

Création d'un menu de navigation

Avant l'arrivée des frameworks, on créait nos menus à l'aide de listes HTML stylée avec CSS.

Qu'il soit incorporé dans l'en-tête ou sous ce dernier, le menu de navigation devrait être englobé à l'intérieur de la balise <nav>. Ainsi, à l'intérieur de l'ouverture et la fermeture de <nav>, on retrouve tous les éléments qui constituent le menu dans sa totalité.

Le menu est un élément essentiel d'un site web, qui permet aux utilisateurs d'atteindre les différentes pages du site et de se retrouver.

Il n'y a pas de règle sur l'endroit où le menu doit se trouver sur une page. Il peut être intégré dans l'en-tête, sous l'en-tête, au-dessus de l'en-tête ou encore complètement à gauche. Malgré cela, on doit tout de même tenir compte des bonnes pratiques suivantes :

• le menu doit être visible et facilement accessible ;
• le menu doit toujours être le même d'une page à l'autre sur un site web ;
• si plus de 7 éléments de menu, les regrouper par thèmes ;
• éviter si possible les menus déroulants.

Le menu doit s'intégrer dans le design du site et présenter une navigation intuitive. Il doit offrir une façon rapide d'atteindre l'information importante pour l'utilisateur. Si votre site en est un de vente de produits, alors votre menu devrait donner accès aux produits - les informations d'entreprise iront dans le pied de page.

Exemple: Apple

Menu horizontal

Exemple :

HTML

<nav>
  <ul>
    <li><a href="index.html">Accueil</a></li>
    <li><a href="products.html">Réalisations</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="about.html">À propos</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

CSS

 nav {
   background-color: rgb(51, 51, 51);
   position: sticky;   /*menu collant à 0 du haut de page*/
   top: 0;
   text-align: center;
 }

 nav ul {
   margin: 0;
   padding: 0;
   overflow: hidden; /*coupe le contenu qui déborde*/
   background-color: rgb(51, 51, 51);
 }

 nav li {
   list-style-type: none;    /*pas de puce*/
   display: inline-block;
   padding: 1.5rem;
 }

 nav li a {
     color: white;
     text-align: center;
     padding: 1rem 1rem;
     text-decoration: none; /*pas de souligné*/
 }

 nav li a:hover {
   background-color: black;
 }

Remarque

Remarquez que dans cet exemple, la position du bloc <nav> a la valeur sticky et que le haut du bloc est à 0. Ces deux valeurs ensemble indique que le bloc doit être visible à l'écran en tout temps et que lorsque la page défile, le haut du bloc devrait toujours rester à la position 0 en Y.

Menu à gauche

Parfois, le menu principal se trouve à gauche de l'écran plutôt que dans le haut.

Parfois aussi, le menu de gauche est utilisé comme menu secondaire, avec des éléments supplémentaires ou des sous-sections du menu principal.

Lorsque nous n'avons pas besoin d'un menu secondaire, il est préférable de sélectionner l'une ou l'autre des deux positions et ne placer qu'un seul menu sur la page.

Exemple de menu à gauche :

HTML

    <nav>
      <a href="index.html">Accueil</a>
      <a href="products.html">Réalisations</a>
      <a href="services.html">Services</a>
      <a href="about.html">À propos</a>
      <a href="contact.html">Contact</a>
    </nav>

CSS

    nav {
      height: 100%;
      width: 10rem;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color:rgba(51,51,51,0.8);
      overflow-x: hidden;
      padding-top: 12rem;

    }

    nav a {
      padding: 0.5rem 0.5rem 0.5rem 1rem;
      text-decoration: none;
      font-size: 1.5rem;
      color: #818181;
      display: block;
    }

    nav a:hover {
      background-color: #555;
      color: white;
    }

Produit final

Si on reprend les quatre blocs étudiés dans cette rubrique, on obtient une page web assez complète comprenant :

• un en-tête
• un menu
• un bloc de contenu
• un pied de page

Le tout avec un effet parallax (défilement avec image en fond d'écran) qui ajoute du dynamisme lors de la consultation.

Les techniques vues sont simples, mais efficaces pour obtenir un site visuellement intéressant.

À essayer

Essayez de reproduire une page comme vue dans les deux dernières démos animées afin de bien assimiler la matière!