Logo Polytech

Objectifs

  • Les objectifs de cette section ont pour objet de vous permettre d'intégrer n'importe quelle maquette :
    • Comprendre l'intérêt de regrouper des éléments pour le CSS
    • Apprendre les différentes méthodes de positionnement des enfants
    • Comprendre l'intérêt du web sémantique.
    • Comprendre comment les utiliser pour intégrer une maquette
  • Avec ces connaissances-là, associées à celle de la partie Introduction, vous devriez avoir tout ce qu'il vous faut pour créer une page statique
  • L'étape suivante sera d'ajouter du dynamisme dans votre page, ce qui sera étudié dans la partie Pages web dynamiques

Regrouper les éléments

  • En utilisant la propriété position sur toutes les balises de <body>, on peut en théorie placer tous les éléments exactement où on le souhaite sur la page.
  • Cependant, procéder ainsi a plusieurs défauts :
    • C'est extrêmement long
    • Modifier un élément peut impliquer de devoir en repositionner de nombreux autres
    • (Et ce serait encore pire si l'on souhaitait prendre en compte toutes les tailles d'écran)
  • Pour faciliter ce travail, CSS permet de positionner plusieurs éléments en une seule propriété. Il y a néanmoins une condition : il faut que les éléments que l'on souhaite positionner aient tous le même parent direct, auquel on va appliquer les propriétés CSS permettant de positionner tous ces enfants.
  • On va donc présenter la première balise structurante : <div> <div>On crée un parent en HTML <p>...<p>Premier enfant <p>...<p>Deuxième enfant <p>...<p>Troisième enfant </div>
  • En procédant ainsi, il suffit de déplacer le <div> pour que tous ses enfants se déplacent avec

Positionnement automatique

  • Il existe une autre propriété permettant de positionner les enfants d'un élément donné, il s'agit de display
  • display peut (essentiellement) prendre 5 valeurs : 3 agissant sur l'élément lui-même et 2 sur ses enfants direct
  • Commençons par les 3 agissant sur l'élément :
    • inline fait que l'élément va prendre l'espace minimal dont il a besoin pour s'afficher, en hauteur et en largeur. De plus, l'élément ne pourra pas être redimensionné.
    • block fait que l'élément va prendre l'espace minimal dont il a besoin en hauteur et toute la largeur disponible dans son parent. Il pourra être redimensionné.
    • inline-block fait que l'élément va prendre l'espace minimal dont il a besoin en hauteur ET en largeur tout en étant redimensionnable.
    • Note : toutes les balises HTML ont une valeur par défaut qui est le plus souvent block, parfois inline.

Positionnement des enfants : Flexbox

  • Voyons désormais les 2 valeurs de display placent les enfants :
    • flex permet d'aligner les enfants en jouant sur les espacements display: flex;Pour activer les autres propriétés flex-direction: row;Pour positionner les enfants horizontalement ou verticalement justify-content: flex-start|center|flex-end|space-(between|around|evenly); Pour déterminer l'espacement des éléments align-items: flex-start|center|flex-end;Pour positionner les éléments sur l'axe secondaire flex-wrap: wrap;Quand il y a trop d'éléments pour rentrer en une seule ligne
    • Il existe de nombreuses autres propriétés / valeurs moins utiles
    • Vous pouvez retrouver des ressources dans la section bonus

Positionnement des enfants : Grid (1/2)

  • grid permet de positionner les éléments dans un tableau :
    • On commence par activer l'affichage dans une grille avec display: grid;
    • Ensuite on définit le nombre et la taille des lignes et des colonnes avec grid-template
      • Les descriptions des lignes et des colonnes sont séparées par un / : grid-template: lignes / colonnes;
      • Les valeurs des lignes (et des colonnes) sont séparées par des espaces : grid-template: ligne1 ligne2 ligne3 / colonne1 colonne2;
      • Ces valeurs peuvent utiliser toutes les unités classiques de CSS + auto et fr : grid-template: 100px 2vh auto / 2fr 1fr;

        auto prend l'espace minimal (en hauteur ou en largeur) pour afficher son contenu

        fr découpe l'espace restant en autant de sections qu'il y a de fr définis, puis les répartit selon le nombre associé à chaque ligne/colonne : dans l'exemple précédent, les colonnes sont définies sur 2+1 = 3fr, l'espace sera donc découpé en 3 parts égales, puis la première colonne prendra 2 parts et la seconde colonne prendre 1 part.

Positionnement des enfants : Grid (2/2)

  • grid permet de positionner les éléments dans un tableau :
    • Par défaut, chaque enfant se place dans la première cellule disponible
    • Si des enfants doivent être placés dans une autre ligne ou colonne, on peut utiliser grid-row (et/ou grid-column) sur l'enfant en question : grid-row: 2; grid-column: 3;
    • Si des enfants doivent prendre plusieurs lignes ou colonnes, on utilise les mêmes propriétés grid-column: colonne_de_départ / colonne_de_fin_plus_1;
    • Par exemple grid-column: 2 / 5;

      placera l'élément sur les colonnes 2, 3 et 4 de la grille (et sur une seule ligne car on n'a pas précisé de grid-row)

Web sémantique

  • On a compris dans les sections précédentes que pour placer des éléments les uns par rapport aux autres, il fallait qu'ils aient un parent commun
  • On peut en déduire que pour réaliser des positionnements plus ou moins complexes, il est nécessaire d'avoir énormément de balises structurantes imbriquées les unes dans les autres
  • --> <div> est TRÈS LARGEMENT la balise la plus utilisée dans les pages HTML

  • Il y a de plus en plus de robots qui parcourent les sites web
    • Pour indexer les pages
    • Pour lire les pages à l'utilisateur
    • Pour afficher une partie du contenu ailleurs
    • Plus globalement, pour récupérer automatiquement les ínformations pertinentes
  • Problème : il est plus ou moins impossible de distinguer un <div> d'un autre, les scripts doivent donc lire tout le contenu pour tenter de comprendre de quoi parle un bloc HTML donné, sans garantie de succès
  • Une solution a été trouvée : créer des balises structurantes qui ont un sens et doivent être utilisées dans un contexte précis : c'est le HTML5

HTML5

  • Balises HTML5 pour structurer la page : <header></header> En-tête, avec logo, connexion/inscription <footer></footer> Pied-de-page avec les liens légaux et les informations complémentaires <nav></nav> Navigation dans le site <main></main> Contenu principal de la page, dans lequel on va retrouver le contenu pertinent <aside></aside> Sur le côté pour fournir des informations complémentaires sur le contenu principal
  • Balises HTML5 pour structurer le contenu principal : <section></section> <article></article>
    <details></details> <figure></figure> <summary></summary>
    <canvas></canvas> <video></video> <audio></audio>
  • La plupart des balises citées ont des contraintes d'utilisation supplémentaires, par exemple les balises article et section doivent obligatoirement contenir un (sous-)titre

Exercice 1

  • La première étape avant de se lancer est de s'entraîner. Pour cela, vous trouverez dans la page Bonus 3 jeux que vous devez terminer :
    • Flukeout
    • Flexbox froggy
    • Grid garden
  • Une fois l'échauffement terminé, l'exercice consistera à reproduire cette page. Vous trouverez les informations dont vous avez besoin (couleurs, taille de texte et des différents blocs dans les Dev Tools (si vous n'utilisez pas Chrome ou équivalent, tant pis pour vous !). Vous pouvez évidemment remplacer les textes par du Lorem Ipsum.
  • Maintenant que vous avez réussi à reproduire un design simple, passons sur un design plus complexe : linkedin. L'objectif est de reproduire le header, l'espace de messagerie et 2 articles de la section principale.