DY

DelahayeYourself

modules / M1105 /

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.

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.

Grille de mise en forme

Nous allons découvrir les grille de mise en forme.

En utilisant le fichier précédent:

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.

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.