enrichir les balises meta de la balise <head>
1. la balise <meta name= »viewport » content= »width=device-width, initial-scale=1.0″>
Le Viewport désigne schématiquement la surface de la fenêtre du navigateur et est absolument indispensable dans un projet d’intégration de site web pour tablettes et smartphones, ou dans un esprit d’adaptation « Responsive Web Design ».
2. les balises qui améliorent le référencement naturel
<meta name= »keywords » content= »CSS, mise en page, structure html »>
<meta name= »description » content= »Construire la grille de mise en page en CSS »>
<meta name= »author » content= »DN Numérique »>
Dans les attributs « content », renseignez autant de mots clés que vous jugerez nécessaire et que les utilisateurs peuvent potentiellement indiquer lors d’une recherche dans les moteurs.
La description permet d’afficher un texte que vous aurez défini et non pas celui apparaissant dans la première balise de paragraphe de la page html !
<link rel= »icon » href= »images/emoticon_36px.png »>
Cette balise vous permet de placer une émoticône à côté du nom de la page. Observez que le lien href pointe vers le dossier « images » puis vers le nom du fichier de l’image « emoticon_36px.png ». Les deux éléments sont séparés par un / qui sert de répertoire. Une émoticône ne doit pas dépasser la taille de 36 px en largeur et en hauteur.
3. une 2e feuille de style reset.css
Le reset CSS est une technique qui consiste à réinitialiser à 0 la valeur de certains éléments HTML afin d’éviter une partie des différences d’affichage sur les divers navigateurs. Ce fichier est notamment très utile pour supprimer les marges blanches que peut générer le langage html par défaut.
Deux méthodes sont possibles pour mettre en place cette technique :
- placer le fichier reset.css (fourni avec les exercices) dans le dossier css et créer un lien vers ce fichier.
Par exemple : <link rel= »stylesheet » type= »text/css » href= »css/reset.css »> - ou indiquer la balise <script src= »https://gist.github.com/DavidWells/18e73022e723037a50d6.js »></script> qui demandera au navigateur d’aller chercher en ligne les contenus du fichier reset.css
Attention, une balise <script> devra toujours apparaître en dernière ligne juste avant la balise <title> et être placée au dessus de votre propre style css.
avant d’aller plus loin…
Testez cet outil en ligne pour comprendre les propriétés display: flex;
créer un container
On crée un container de 1200 px de large, centré dans la page. Toutes les balises structurant la page html seront comprises dans cette <div class= »container »>.
placer le header + nav + 1 bouton
dans le fichier index.html
dans le fichier .css
Observez que les balises sont regroupées, par exemple header nav li {}. Si vous souhaitez appliquer le même style à plusieurs balises, vous devrez « économiser » votre code en les regroupant de cette manière.
L’ordre de leur écriture est importante et doit être hiérarchisée selon l’ordre d’écriture du fichier html.
créer un effet de survol
Vous pouvez spécifier l’apparence d’un élément au moment où l’utilisateur le survole avec le pointeur, sans nécessairement l’activer avec la pseudo-classe :hover.
Vous pouvez consulter la documentation en ligne de mozilla pour en savoir davantage sur les effets possibles :
https://developer.mozilla.org/fr/docs/Web/CSS/:hover
créer un bouton
L’élément HTML <button> est utilisé afin de créer un contrôle interactif ayant la forme d’un bouton. Par défaut, les boutons HTML sont mis en forme avec les styles natifs mais leur apparence peut être adaptée grâce au CSS.
Une classe « transition-width » a été associée afin de régler l’effet de mouvement et de délai de l’élément <button>. Ainsi qu’un :hover pour indiquer le taux de modification de la forme et de sa couleur.
A voir : https://developer.mozilla.org/fr/docs/Web/CSS/transition-property
créer une div class=”main-sidebar-wrapper”
Cette <div> contient 1 section et 1 aside.
pour le html
pour le CSS
Lorsque la propriété margin est écrite de la manière suivante 60px 0px 30px 60px, cela indique qu’il y a une marge en haut de 60px, à droite 0px, en bas 30px et à gauche 60px. Le premier chiffre correspond toujours à la valeur du haut du bloc puis on tourne dans le sens des aiguilles d’une montre.
La propriété flex est une propriété raccourcie qui définit la capacité d’un élément flexible à modifier ses dimensions afin de remplir l’espace disponible de son conteneur. Dans l’exemple, sa valeur est fixée à 3, c’est-à-dire que cette boite occupe 1/3 de l’espace.
Que se passe-t-il si vous modifiez cette valeur à 1 dans l’inspecteur du navigateur ?
formater certains textes
Vous devrez créer des classes CSS pour mettre en forme les textes en italique, en gras, … et utiliser la balise <span> dans le fichier html.
<aside class= »sidebar »>
L’élément HTML<aside> (en anglais, « aparté ») ressemble à une section dont le contenu est un complément par rapport à ce qui l’entoure, qui n’est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
La propriété line-height définit la hauteur de l’interlignage du texte.
créer une galerie d’images avec flexbox
On crée un <div class= »galerie »> dans lequel on crée un autre <div class= »row »>, lui-même subdivisé en 3 <div class= »column »>.
Pour rappel
Pour le CSS, on indique les largeurs des colonnes en % pour favoriser le responsive.
Pensez à régler la taille de vos images selon la taille maximale d’affichage de votre container. Dans notre exemple, le container fait 1200px et les images ont un padding de 15 px ainsi les images données dans votre exercice ont été réglées à 340 px de large au maximum !
téléchargez le dossier d’exercice
téléchargez le dossier de l’exercice finalisé