TP08: Bonne pratique
Création du template HTML
Dans le cadre de ce tp nous allons créer un template HTML de la page d'accueil d'un site web d'actualités.
- Création d'un répertoire
- Création du fichier index.html
- Création du squelette de base pour le fichier index.html
- Création du header avec un titre et une barre de navigation
- Création du main contenant un ensemble d'actualités (section contenant plusieurs articles) ainsi qu'une sidebar (balise aside) contenant un encart publicitaire (un rectangle rouge fera l'affaire)
- Création d'un footer à votre discrétion
Rappel:
Squelette de base HTML5
<!DOCTYPE html> <html> <head> <title>..</title> <meta charset='utf-8' /> </head> <body> <header> </header> <main> </main> <footer> </footer> </body> </html>
Squelette de base d'un article en HTML5
<article> <h3>..</h3> <img src='..' alt='..' /> <p>..</p> <a href='..' title='..'>Lire la suite</a> </article>
Reset CSS
Comme nous l'avons déjà vu précédemment chaque moteur de rendu embarque ses propres styles css de base, ce qui nous arrange peu pour obtenir le même rendu sur toutes les plateformes. Il convient pour ce faire d'utiliser un reset CSS.
- Ouvrez le fichier précédent dans plusieurs navigateurs et constatez la différence entre les styles de bases
- Téléchargez un reset CSS ( Normalize.css ou celui d'Eric Meyer par exemple), intégrez le et constatez les modifications
Grille de mise en forme
Nous allons découvrir les grille de mise en forme.
En utilisant le fichier précédent:
- Téléchargez Simple Grid et intégrez cette librairie à votre fichier html
- Découvrez son utilisation
Voici un exemple de création de trois colonnes.
<div class="grid"> <div class="col-1-3"> COL I </div> <div class="col-1-3"> COL II </div> <div class="col-1-3"> COL III </div> </div>
Pensez à intégrer le CSS suivant:
[class*="col-"] { background-color: rgba(231, 76, 60, 0.3); outline: 1px solid rgba(39, 174, 96, 0.9); } [class*="col-"] > * { background-color: rgba(241, 196, 15, 0.5); outline: 1px dashed rgba(211, 84, 0, 1.0); }
Que constatez vous ?
Modifiez votre fichier pour obtenir deux colonnes de même taille (1/2), puis 4 colonnes (1/4) et ainsi de suite pour comprendre le fonctionnement de SimpleGrid.
- Mettez en forme l'ensemble d'articles et la sidebar via les classes que nous propose cette librairie
On souhaite obtenir une colonne qui contient nos articles et une colonne qui contient notre sidebar (aside
).
<section class="grid"> <div class="col-9-12"> <h2>News</h2> </div> <div class="col-3-12"> <aside> </aside> </div> </section>
Grid Layout
Dans un nouveau document HTML ajoutez le contenu suivant au body.
<div class="wrapper"> <div class="one">Un</div> <div class="two">Deux</div> <div class="three">Trois</div> <div class="four">Quatre</div> <div class="five">Cinq</div> <div class="six">Six</div> </div>
Liez à notre document un fichier CSS avec le contenu suivant:
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } .one { grid-column: 1 / 3; grid-row: 1; } .two { grid-column: 2 / 4; grid-row: 1 / 3; } .three { grid-column: 1; grid-row: 2 / 5; } .four { grid-column: 3; grid-row: 3; } .five { grid-column: 2; grid-row: 4; } .six { grid-column: 3; grid-row: 4; }
Vous devriez obtenir un résultat équivalent:
Utilisez le module Grid Layout de CSS pour mettre en forme votre document précédent (la page d'actualité). Pensez à faire une sauvegarde de votre précédent document puis retirer toute référence à simple grid avant d'utiliser le Grid Layout de CSS.
5. Polices d'écriture et CDN
Un content delivery network (CDN), ou réseau de diffusion de contenu, est constitué d’ordinateurs reliés en réseau à travers Internet et qui coopèrent afin de mettre à disposition du contenu ou des données à des utilisateurs.
Le plus courant des CDN utilisé pour les police d'écriture est Google Fonts. Pour incorporer vos polices copiez le code obtenu dans l'entête de votre document HTML.
Par exemple:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Utilisez la règle CSS suivante pour spécifier cette famille:
font-family: 'Roboto', sans-serif;
Finalisation de notre template
En vous basant sur les exemples du cours et le tp précédent finalisez la mise en forme de votre template.