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.

modules / M1105 /