🖼 HTML & CSS avancé#

Méta-données#

Les balises <meta> sont situées dans l’élément <head> du document. Elles contiennent des méta-données : des données sur le document lui-même (littéralement, des « données à propos des données »).

meta charset="utf-8">
<meta name="description" content="apprenez plus de tours en HTML">
<meta name="author" content="Samy Delahaye">
<meta name="keywords" content="html web">

Le charset#

Cet attribut déclare l’encodage utilisé par la page. Bien que le standard ne fixe pas d’encodage particulier, il recommande d’utiliser UTF-8.

name#

Cet attribut définit le nom d’un métadonnée au niveau du document. Le nom de la métadonnée document est associé à une valeur contenue dans l’attribut content. Quelques noms possibles et la signification de leurs valeurs (contenues dans l’attribut content) sont:

application-name définit le nom de l’application web utilisée dans la page,
author le nom de l’auteur du document (pas de contrainte de format)
description contient un résumé concis et pertinent du contenu de la page. Plusieurs navigateurs, dont Firefox et Opera, utilisent cette métadonnée comme description de la page lorsque celle-ci est mise dans les favoris.
generator contient l’identifiant du logiciel ayant généré la page (pas de contrainte de format)
keywords contient une liste de mots-clés séparés par des virgules. Ces mots-clés sont pertinents et relatifs au contenu de la page.
publisher le nom de l’éditeur du document (sans contrainte de format). Cela peut être le nom d’une institution.
robots définit le comportement que les robots d’indexation devraient respecter.
viewport donne une indication quant à la taille du viewport (vue virtuelle). Cette information est utilisée par les terminaux mobiles uniquement.

Attention

A une époque pas si lointaine, le bourrage de la meta keywords afin d’améliorer son référencement était monnaie courante. Depuis son utilisation n’est plus recommandée.

Robots#

Elle permet de définir le comportement que les robots d’indexation devraient respecter. C’est une liste de valeurs séparées par des virgules. La liste qui suit définit quelques-unes des valeurs que l’on peut utiliser :

index Permet au robot d’indexer la page
noindex Interdit au robot d’indexer la page
follow Permet au robot de suivre les liens contenus dans la page
nofollow Interdit au robot de suivre les liens contenus dans la page
noarchive Empêche le moteur de recherche de mettre en cache le contenu de la page

<meta name="robot" content="index, nofollow">

Attention

Seuls les robots « respectueux » suivront ces règles. Il ne faut pas considérer cela comme une manière efficace de blocage.

Indication

Selon les attributs qui sont renseignés, la métadonnée peut être de différentes sortes :

si name est renseigné, c’est une métadonnée de document s’appliquant à la page entière,

si http-equiv est renseigné, c’est une information transmise au serveur web indiquant comment la page doit être servie (pragma directive en anglais),

si charset est renseigné, c’est une déclaration sur le jeu de caractères.

Langue des méta-données#

Les méta-données peuvent être fournies dans différentes langues, spécifiées dans l’attribut lang à l’aide d’un code spécifié par BCP47.

Note

L’attribut lang peut en fait être utilisé sur n’importe quelle balise, y compris dans le corps (<body) du document.

<meta name="description" lang="en"
content="learn advanced tricks in HTML" />

<meta name="description" lang="fr"
content="apprenez plus de tours en HTML" />

Entités HTML#

Les caractères suivants ont une signification spéciale en HTML, donc il faut utiliser un code spécial (entité) pour les afficher :

Symbole	Entités	Signification
`<`	`<`	lower than
`>`	`>`	greater than
`"`	`&quote;`	double quote
`'`	`'`	simple quote
`&`	`&`	ampersand (esperluette)

Structure d’un tableau#

Un tableau (ou une table) permet d’organiser des information sur deux dimensions. Une table (table) est composée de lignes (rows), elles-mêmes composées de cellules (cells). On considère deux sortes de cellules : les cellules d’en-tête (header cells) et les cellules de données (data cells).

<table>
    <thead>
        <tr>
            <th></th>
            <th>Medium</th>
            <th>Large</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Americano</th>
            <td>1.50€</td>
            <td>1.90€</td>
        </tr>
        <tr>
            <th>Latte</th>
            <td>1.90€</td>
            <td>2.10€</td>
        </tr>
        <tr>
            <th>Cappucino</th>
            <td>1.90€</td>
            <td>2.10€</td>
        </tr>
    </tbody>
</table>

Une cellule peut s’étendre sur plusieurs lignes (vers le bas) et/ou colonnes (vers la droite) à l’aide des attributs rowspan et colspan.

Web Sémantique#

En programmation, la sémantique fait référence au sens d’une partie de code — par exemple « quel effet aura l’exécution de cette ligne de code ? », ou « quel est le rôle ou le but de cet élément HTML » (plutôt que « à quoi ressemble-t-il ? »).

Par exemple, l’élément <h1> est un élément sémantique qui donne au texte qu’il contient le rôle (ou le sens) de « titre de premier niveau de votre page ».

Un web sémantique#

Il s’agit d’une extension du Web standardisée par le W3C qui recommande l’uttilisation de formats de données et de protocoles d’échange normés. Cela est décrit au sein du RDF (Resource Description Framework) qui nous fournit un format de base des données.

En informatique il existe deux catégories de fichiers: les documents lisibles par l’homme et les données lisibles par la machine.

Les pages web sont conçues pour être lues uniquement par des personnes et non par des machines. Le web sémantique vise à atteindre une vision de l’information qui permet d’être lisible par les humains et par les machines.

Les éléments sémantiques#

L’utilisation du balisage HTML visant à renforcer le sémantisme (la signification) des informations contenues dans les pages web, c’est-à-dire leur sens, plutôt que de se borner à définir leur présentation (ou apparence).

Quelques éléments sémantiques:

<article>
<aside>
<details>
<figcaption>

<figure>
<footer>
<header>

<main>
<mark>
<nav>

<section>
<summary>
<time>

Avant pour représenter un article nous utilisions un marquage équivalent:

<!-- ceci est un article -->
<div>
    <h2>The Last Jedi trailer is out !</h2>
    <ul>
        <li>Written by Samy Delahaye</li>
        <li>On Thurday 21, sept. 2017</li>
    </ul>
    <p>Insert some fanboy text here !</p>
    <a href=".." title="..">Read more !</a>
</div>

Voici la même chose en HTML5:

<article>
    <h2>The Last Jedi trailer is out !</h2>
    <dl>
        <dt>Author</dt>
        <dd>
        Written by <a href="https://ugaritic.fr" rel="author">Samy Delahaye</a>
        </dd>
        <dt><time datetime="2017-09-21">On Thurday 21, sept. 2017</time></dt>
    </dl>
    <p>Insert some fanboy text here !</p>
    <a href=".." title="..">Read more !</a>
</article>

Nous utilisons des balises plus structurantes et ayant un sens une fois combinées entre elles.

Header et footer#

L’élément HTML header représente un groupe de contenu introductif ou de contenu aidant à la navigation. Il peut contenir des éléments de titre, mais aussi d’autres éléments tels qu’un logo, un formulaire de recherche, etc.

L’élément HTML footer représente le pied de page. Un pied de page contient habituellement des informations sur l’auteur de la section, les données relatives au droit d’auteur ou les liens vers d’autres documents en relation.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello HtmlWORLD!</title>
        <meta charset='UTF-8' />
    </head>
    <body>
        <header>..</header>
        <main>..</main>
        <footer>..</footer>
    </body>
</html>

nav#

L’élément HTML nav représente une section d’une page ayant des liens vers d’autres pages ou des fragments de cette page. Autrement dit, c’est une section destinée à la navigation dans un document (avec des menus, des tables des matières, des index, etc.)

<header>
    <h1>Ugaritic</h1>
    <nav>
        <a></a>
        <a></a>
    </nav>
</header>

section#

L’élément HTML section représente une section générique d’un document, par exemple un groupe de contenu thématique. Une section commence généralement avec un titre.

Ainsi, un menu de navigation devrait être délimité par un élément nav mais une liste de résultat de recherche, qui ne dispose pas d’élément spécifique pour être représentée, pourrait être englobée dans un élément section.

article#

L’élément HTML article représente du contenu autonome dans un document, une page, une application, ou un site. Ceci peut être un message sur un forum, un article de journal ou de magazine, une parution sur un blog, un commentaire d’utilisateur ou tout autre élément de contenu indépendant. Ce contenu est prévu pour être distribué ou réutilisé indépendamment.

aside#

L’élément HTML aside (en anglais, « aparté ») représente une partie d’un document dont le contenu n’a qu’un rapport indirect avec le contenu principal du document. Les apartés sont fréquemment présents sous la forme d’encadrés ou de boîtes de légende.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello HtmlWORLD!</title>
        <meta charset='UTF-8' />
    </head>
    <body>
        <header>
            <h1>HelloHtml5</h1>
            <a href="..">..</a>
            <a href="..">..</a>
        </header>
        <main>
            <section>
                <h2>Latest news</h2>
                <article>
                    <h3>..</h3>
                </article>
                <article>
                    <h3>..</h3>
                </article>
            </section>
            <aside>
                <a href="..">..</a>
            </aside>
        </main>
        <footer>
            <p>&copy; Gandalf 2019</p>
        </footer>
    </body>
</html>

Pseudo-classes#

Note

Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d’indiquer l’état spécifique dans lequel l’élément doit être pour être ciblé par la déclaration.

Syntaxe

sélecteur:pseudo-classe {
    propriété: valeur;
}

Les pseudo-classes permettent d’appliquer un style à un élément non seulement en fonction de son contenu dans l’arbre du document mais aussi en fonction de facteurs externes (l’historique de navigation par exemple avec :visited ; le statut du contenu avec :checked ; la position de la souris :hover).

:link{}
:visited{}
:active{}
:focus{}
:hover{}
:target{}

Active#

La pseudo-classe :active permet de cibler un élément lorsque celui-ci est activé par l’utilisateur. Elle permet de fournir un feedback indiquant que l’activation a bien été détectée par le navigateur. Lorsqu’on a une interaction avec un pointeur, il s’agit généralement du moment entre l’appui sur le pointeur et le relâchement de celui-ci.

first-child#

La pseudo-classe :first-child permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.

Cible	Sélecteurs
p:first-child { color: lime; background-color: black; padding: 5px; }	<div> <p>Ce paragraphe est mis en forme car c'est un élément p ET que c'est le premier fils de l'élément div.</p> <p>En revanche, ce paragraphe n'est pas mis en forme car ce n'est pas le premier !</p> </div> <div> <h2>Ce titre h2 n'est pas mis en forme car ce n'est pas un paragraphe.</h2> <p>Et ce paragraphe n'est pas mis en forme car ce n'est pas le premier fils !</p> </div>

Cible

Sélecteurs

p:first-child {
    color: lime;
    background-color: black;
    padding: 5px;
}

<div>
    <p>Ce paragraphe est mis en forme car c'est un élément
    p ET que c'est le premier fils de l'élément div.</p>
    <p>En revanche, ce paragraphe n'est pas mis en forme
    car ce n'est pas le premier !</p>
</div>

<div>
    <h2>Ce titre h2 n'est pas mis en forme car ce n'est pas
    un paragraphe.</h2>
    <p>Et ce paragraphe n'est pas mis en forme car ce n'est pas
    le premier fils !</p>
</div>

focus#

La pseudo-classe :focus permet de cibler un élément lorsque celui-ci reçoit le focus (soit il est sélectionné à l’aide du clavier, soit il est activé avec la souris comme par exemple le champ d’un formulaire).

hover#

La pseudo-classe :hover permet de spécifier l’apparence d’un élément au moment où l’utilisateur le survole avec le pointeur, sans nécessairement l’activer.

link#

La pseudo-classe :link permet de sélectionner les liens à l’intérieur d’éléments. Elle sélectionnera tout lien n’ayant pas été visité.

nth-child#

La pseudo-classe :nth-child(an+b) permet de cibler un élément qui possède \(an+b-1\) éléments voisins (au même niveau) avant lui dans l’arbre du document pour des valeurs entières \(n\) et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d’un élément dont les positions correspondent au motif \(an+b\).

/* Cible les éléments en fonction de leur position dans */
/* le document : ici le 4e, 8e, 16e, 20e, etc. quel que */
/* soit le type de l'élément */
body :nth-child(4n) {
    background-color: lime;
}

On peut également utiliser les valeurs avec un mot-clé:

odd Représente les éléments dont la position est impaire par rapport à leurs voisins.
even Représente les éléments dont la position est paire par rapport à leurs voisins.

target#

La pseudo-classe :target permet de cibler l’unique élément (s’il existe) dont l’attribut id correspond au fragment d’identifiant de l’URI du document.

visited#

La pseudo-classe :visited permet de modifier l’aspect d’un lien après que l’utilisateur l’a visité. Pour des raisons relatives à la vie privée, les propriétés qui peuvent être utilisées sont restreintes.

Pseudo-éléments#

Note

Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l’élément ciblé par la règle.

Syntaxe

sélecteur::pseudo-élément {
    propriété: valeur;
}

::first-letter
::first-line
::before
::after

After#

En CSS, ::after crée un pseudo-élément qui sera le dernier enfant de l’élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS content. Par défaut, ce contenu est de type « en ligne ».

/* Ajoute une flèche après les liens */
a:after {
    content: "→";
}

Before#

::before crée un pseudo-élément qui sera le premier enfant de l’élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS content. Par défaut, l’élément créé est de type en-ligne (inline).

/* On ajoute un coeur avant les liens */
a:before {
    content: "♥";
}

first-letter#

Le pseudo-élément ::first-letter sélectionne la première lettre de la première ligne d’un bloc, si elle n’est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.

/* Sélectionne la première lettre */
/* des éléments <p> */
p::first-letter {
    color: red;
    font-size: 130%;
}

first-line#

Le pseudo-élément ::first-line applique la décoration à la première ligne d’un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant ::first-line ne ciblent pas un élément HTML réel.

/* Sélectionne la première ligne */
/*  des éléments <p> */
::first-line {
    color: red;
    text-transform: uppercase;
}

Position#

Note

La propriété position définit la façon dont un élément est positionné dans un document. Les propriétés top, right, bottom et left déterminent l’emplacement final de l’élément positionné.

Un élément positionné est un élément dont la propriété de position calculée est relative, absolute, fixed ou sticky. Par défaut tout élément est positionné en static.

Relative#

Un élément positionné de façon relative est un élément dont la propriété de position calculée est relative. Dans ce cas, les propriétés top ou bottom indiquent le décalage vertical à appliquer et left ou right indiquent le décalage horizontal.

Absolue#

Un élément positionné de façon absolue est un élément dont la propriété de position calculée est absolute ou fixed. Dans ce cas, les propriétés top, bottom, right et left indiquent les distances entre les bords de l’élément et les bords du bloc englobant (c’est-à-dire l’ancêtre par rapport auquel l’élément est positionné). Si l’élément possède des marges, elles sont ajoutées aux décalages.

Adhérence#

Un élément positionné en adhérence est un élément dont la propriété de position calculée vaut sticky. Un tel élément se comporte comme un élément positionné de façon relative jusqu’à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de top) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu’à atteindre le bord opposé du bloc englobant.

Ombrage des boîtes#

La propriété box-shadow ajoute des ombres à la boîte d’un élément via une liste d’ombres séparées par des virgules. Une boîte d’ombre est définie avec des décalages horizontal et vertical par rapport à l’élément, avec des rayons de flou et d’étalement et avec une couleur.

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

Ombrage des textes#

La propriété text-shadow ajoute des ombres au texte. Elle accepte une liste d’ombres à appliquer au texte et aux décorations de l’élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l’élément, de rayon de flou et de couleur.

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

Reset CSS#

Note

Technique qui consiste à réinitialiser à zéro la valeur de certains éléments HTML afin d’éviter une partie des différences d’affichage sur les divers navigateurs.

Avertissement

Il s’agit d’un fichier css à télécharger et à inclure dans votre page ! Vous ne devez en choisir qu’un seul !

Adaptation au média#

La règle @media permet d’associer un ensemble d’instructions imbriquées (délimité par des accolades) avec une condition définie par une requête média.

Les requêtes média (media queries) permet de modifier l’apparence d’un site ou d’une application en fonction du type d’appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d’écran ou la largeur de la zone d’affichage (viewport) par exemple).

@media (max-width: 600px) {
    .sidebar {
        display: none;
    }
}

Une requête média (type <media-query>) est composée d’un type de média (optionnel) et/ou de différentes caractéristiques relatives au média.

@media screen and (min-width: 900px) {
    article {
        padding: 1rem 3rem;
    }
}

Exemple#

@media print {
    body { font-size: 10pt }
}
@media screen {
    body { font-size: 13px }
}
@media screen, print {
    body { line-height: 1.2 }
}

@media only screen
and (min-width: 320px)
and (max-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
    body { line-height: 1.4 }
}

Intervalle#

@media (height > 600px) {
    body { line-height: 1.4; }
}

@media (400px <= width <= 700px) {
    body { line-height: 1.4; }
}

Viewport#

Les appareils mobiles (smartphones notament) « trichent » en simulant un écran plus grand que la réalité, afin d’afficher sans (trop de) problème les pages non responsive. Il est possible (et souhaitable) de désactiver ce comportement, lorsqu’on souhaite avoir un meilleur contrôle de l’affichage sur ces appareils.

La balise suivante force le navigateur à utiliser la largeur réelle de l’appareil.

<meta name="viewport" content="width=device-width">

On peut également limiter le niveau de zoom,

<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=2">

voire empêcher totalement l’utilisateur de zoomer.

<meta name="viewport" content="width=device-width, user-scalable=no">

Grille CSS#

Note

Une grille est un ensemble de lignes horizontales et verticales qui se croisent – les premières définissant les rangées, et les secondes les colonnes. Les éléments sont placés sur la grille en fonction de ces rangées et colonnes.

La plupart des sites Internet ont un gabarit « générique ». Par exemple, un blog va avoir un corps et une barre latérale. Une grille CSS va vous permettre de gérer ce gabarit très facilement. L’idée c’est de partager votre site en un nombre défini de colonnes. Le gabarit de votre site sera défini en fonction de ces colonnes.

Deux possibilité pour utiliser les grilles CSS:

Les « librairies » CSS qui fournissent une grille comme Simple Grid
ou encore mieux, le module CSS Grid layout.

Grid layout#

Le module CSS Grid layout (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l’espace d’affichage en régions utilisables par une application ou en définissant des relations de taille, position et d’empilement entre les éléments HTML.

Qu’est ce qu’une grille ?

Comme les tableaux, la grille permet d’aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n’a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n’auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d’un conteneur en grille peuvent être positionnés afin qu’ils se chevauchent ou qu’ils se comportent comme des éléments positionnés.

On peut créer une grille avec des pistes à taille fixes en utilisant une unité comme le pixel. Pour les pistes à taille variable on peut utiliser le pourcentage ou la nouvelle unité fr créée à cet effet.

Pour placer les éléments sur la grille, on peut utiliser le numéro ou le nom d’une ligne, ou cibler une zone particulière. La grille contient aussi un algorithme pour placer les éléments qui n’ont pas été placés explicitement.

Lorsqu’une grille explicite n’est pas définie, la spécification prend en charge le contenu défini en dehors d’une grille en ajoutant des colonnes et des rangées. Cela comprend des fonctionnalités telles qu” « ajouter autant de colonnes que possible dans le conteneur ».

On peut contrôler l’alignement des éléments dans une zone de la grille, ainsi que celui de l’ensemble de la grille.

Le conteneur#

À partir du moment où on crée un conteneur en déclarant la propriété display: grid ou display: inline-grid sur un élément, tous les enfants directs de cet élément deviennet des éléments de grille.

Cet exemple montre une section avec une classe .wrapper et cinq éléments enfants.

<section class="wrapper">
    <article>Un</article>
    <article>Deux</article>
    <article>Trois</article>
    <article>Quatre</article>
    <article>Cinq</article>
</section>

.wrapper {
    display: grid;
}

Tous les enfants directs sont maintenant des éléments de grille. On ne voit pas la différence dans un navigateur, car la grille n’a qu’une seule colonne. Vous trouverez sans doute utile de travailler avec Firefox, qui propose un inspecteur de grille dans les outils de développement.

En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur grid. Un clic dessus permet d’afficher la grille correspondante dans le navigateur.

Les pistes#

Les propriétés grid-template-columns et grid-template-rows permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une piste est l’espace entre deux lignes d’une grille.

On peut ajouter la propriété grid-template-columns à notre exemple précédent, pour définir la taille des colonnes.

Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque élément sera disposé dans l’une des cellules de la grille.

.wrapper {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

L’unité fr#

Les pistes peuvent être définies à l’aide de n’importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, fr, représente une fraction de l’espace disponible dans le conteneur de la grille. Le code suivant crée trois colonnes égales qui se redimensionnent en fonction de l’espace disponible.

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

L’exemple suivant crée une grille avec une colonne de 2fr, et deux colonnes de 1fr. L’espace disponible est divisé en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d’une fraction.

.wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

Utiliser la notation repeat() pour définir les pistes#

Pour les grilles comprenant de nombreuses pistes on peut utiliser la notation repeat() pour répéter toute ou une partie des pistes définies. Par exemple la définition de grille :

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

peut également s’écrire :

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

Grille implicite et grille explicite#

Dans ces exemples nous avons défini nos colonnes à l’aide de la propriété grid-template-columns, et nous avons laissé la grille créer les rangées. Ces rangées font partie de la grille implicite.

La grille explicite est constituée des pistes définies par les propriétés grid-template-columns et grid-template-rows. Si un élément est placé en dehors de la grille ainsi définie, ou que la quantité de contenu nécessite d’étendre la grille, alors la grille ajoute implicitement des colonnes et rangées. Les dimensions de ces pistes auront par défaut la valeur auto, c’est-à dire qu’elles s’ajusteront à leur contenu.

On peut définir une taille pour les pistes de la grille implicite grâce aux propriéts grid-auto-rows et grid-auto-columns.

Dans l’exemple ci-après nous utilisons grid-auto-rows pour que les rangées de la grille implicite fassent 200 pixels de haut.

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
}

Dimensionner une piste avec minmax#

Que l’on crée une grille explicite, ou que l’on définisse la taille des pistes créées implicitement, il peut être utile d’assigner une taille minimum, qui s’agrandit pour s’adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu’elles aillent jusqu’à 300 pixels de haut si le contenu le nécessite.

La fonction minmax() permet ce comportement. Dans l’exemple suivant nous utilisons minmax() comme valeur de la propriété grid-auto-rows. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de auto, ce qui signifie que la taille s’adaptera à la hauteur du contenu.

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
}

Les cellules#

Une cellule est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l’avons vu lorsqu’une grille est définie sur un élément ses enfants viennent se positionner chacun dans l’une des cellules de la grille.

Il est possible de changer la position d’une cellule dans la grille.

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.first-article {
    grid-column: 2; /* Take place on second column */
    grid-row: 3; /* Take place on third row */
}
.second-article {
    grid-row: 1;
    grid-column: 1/3; /* Take place on first and second column */
    grid-column: 1 / span 2; /* Make exactly the same as above */
}

Les gouttières#

Les gouttières entre les cellules sont définies à l’aide des propriétés grid-column-gap et grid-row-gap, ou de la propriété raccourcie grid-gap. Dans l’exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 1em;
}

Dans un exercice lointain, ..#

Note

Cet exercice a pour but de récapituler l’ensemble des notions vues ensemble. Nous allons ainsi revoir les structures HTML vus ensemble et les bases de CSS.

L’objectif est de créer une page d’accueil listant l’ensemble des épisodes cinématographique de la saga Star Wars et une page dédiée pour chaque épisode.

Nous pouvons adopter la structuration suivante:

tp5/
├── episodes
├── imgs
├── index.html
└── styles

À faire

Au sein de notre page d’accueil nous allons créer un listing des différents films de la saga.
- Est-il utile de rappeler qu’il faut toujours commencer par le squelette HTML5 ?
Créer une section contenant:
- Un titre de niveau 1 contenant cette image
- Pour chaque épisode une section contenant:
  
  un titre de niveau 2 avec comme texte le titre de l’épisode précédé de son numéro en chiffre latin
  
  l’affiche du film
  
  un lien vers la page dédiée du film
Pour chaque épisode créer un document html dédié sous la forme episodes/episodex.html:
- chaque document sera une page détaillée de chaque film,
- contenant une liste descriptive avec les informations listées ci-dessous, le synopsis du film, le poster et un lien vers le film suivant et/ou précédent selon les cas

Indication

Voici un lien vers les posters et les informations pour chaque film:

Titre	Synopsis	Directeur	Scénario	Producteurs	Durée	Date de sortie
The Phantom Menace	After a millennia, an ancient evil returns seeking revenge. Meanwhile, Jedi Knight Qui-Gon Jinn discovers Anakin Skywalker: a young slave boy unusually strong with the Force.	George Lucas	George Lucas	Lucasfilm	136	1996
Attack of the Clones	Following an assassination attempt on Senator Padmé Amidala, Jedi Knights Anakin Skywalker and Obi-Wan Kenobi investigate a mysterious plot that could change the galaxy forever.	George Lucas	George Lucas	Lucasfilm	142	2002
Revenge of the Sith	The evil Darth Sidious enacts his final plan for unlimited power – and the heroic Jedi Anakin Skywalker must choose a side.	George Lucas	George Lucas	Lucasfilm	140	2005
Solo	Board the Millennium Falcon and journey to a galaxy far, far away in Solo: A Star Wars Story, an all-new adventure with the most beloved scoundrel in the galaxy. Through a series of daring escapades deep within a dark and dangerous criminal underworld, Han Solo meets his mighty future copilot Chewbacca and encounters the notorious gambler Lando Calrissian, in a journey that will set the course of one of the Star Wars saga’s most unlikely heroes.	Ron Howard	Lawrence Kasdan, Jon Kasdan	Lucasfilm	135	2018
Rogue One	From Lucasfilm comes the first of the Star Wars standalone films, “Rogue One: A Star Wars Story,” an all-new epic adventure. In a time of conflict, a group of unlikely heroes band together on a mission to steal the plans to the Death Star, the Empire’s ultimate weapon of destruction. This key event in the Star Wars timeline brings together ordinary people who choose to do extraordinary things, and in doing so, become part of something greater than themselves.	Gareth Edwards	Chris Weitz, Tony Gilroy	Lucasfilm	133	2016
A New Hope	With the planet-destroying power of the Death Star, the Empire looks to cement its grip on the galaxy. Meanwhile, farm boy Luke Skywalker rises to face his destiny.	George Lucas	George Lucas	Lucasfilm	125	1977
The Empire Strikes Back	While the Death Star has been destroyed, the battle between the Empire and the Rebel Alliance rages on…and the evil Darth Vader continues his relentless search for Luke Skywalker.	George Lucas	George Lucas	Lucasfilm	127	1980
Return of the Jedi	Luke Skywalker leads a mission to rescue his friend Han Solo from the clutches of Jabba the Hutt, while the Emperor seeks to destroy the Rebellion once and for all with a second dreaded Death Star.	George Lucas	George Lucas	Lucasfilm	135	1983
The Force Awakens	Thirty years after the Battle of Endor, a new threat has risen in the form of the First Order and the villainous Kylo Ren. Meanwhile, Rey, a young scavenger, discovers powers that will change her life – and possibly save the galaxy.	Abrams	Abrams	Lucasfilm	135	2015
The Last Jedi	Rey has found the legendary Luke Skywalker, hoping to be trained in the ways of the Force. Meanwhile, the First Order seeks to destroy the remnants of the Resistance and rule the galaxy unopposed.	Rian Johnson	Rian Johnson	Lucasfilm	152	2017

Mettez en forme votre document HTML via CSS pour obtenir un site vitrine de la saga.

Mon premier formulaire HTML#

Note

Dans cet exercice, nous allons concevoir un formulaire de contact simple.

Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu’il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.

Indication

Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l’utilisateur.

Du point de vue de l’expérience utilisateur, il est important de garder à l’esprit que plus vous demandez d’informations, plus vous risquez que votre utilisateur s’en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin.

La conception de formulaires est une phase importante de la construction d’un site internet ou d’une application.

Votre croquis est réalisé ? Vous pouvez passer à la suite.

https://www.plantuml.com/plantuml/svg/SoWkIImgAStDuN80iueJSqgughMv580Wj3YrA2ynDnN4hb5GAaLmbS3ohhc9cJaA402KXx8WShwfnSM9wQbeSWZvwA3KujIIMAXyT71fKcvcIInNBPT3QbuAs15W5j1X00== — Croquis de notre premier formulaire#

À faire

Créer un squelette HTML5 de base,
Au sein de ce squelette en vous basant sur les éléments vus en cours, créer votre formulaire grâce aux éléments HTML suivant: <form>, <label>, <input>, <textarea> et <button>,
Encapsuler chaque couple label:input et le bouton dans un div,
Les noms des champs seront user_name, user_mail et user_msg,
L’attribut action de notre formulaire prendra comme url https://ingen.ugaritic.fr/form/contact/.

Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu’il est plutôt laid.

À faire

Créer une feuille de style (au sein d’un répertoire style) pour mettre en forme votre formulaire.
Ajouter le code ci-dessous à votre feuille de style:

form {
    /* Uniquement centrer le formulaire sur la page */
    margin: 0 auto;
    width: 400px;
    /* Encadré pour voir les limites du formulaire */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

form div + div {
    margin-top: 1em;
}

label {
    /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
    display: inline-block;
    width: 90px;
    text-align: right;
}

input, textarea {
    /* Pour s'assurer que tous les champs texte ont la même police.
        Par défaut, les textarea ont une police monospace */
    font: 1em sans-serif;

    /* Pour que tous les champs texte aient la même dimension */
    width: 300px;
    box-sizing: border-box;

    /* Pour harmoniser le look & feel des bordures des champs texte */
    border: 1px solid #999;
}

input:focus, textarea:focus {
    /* Pour souligner légèrement les éléments actifs */
    border-color: #000;
}

textarea {
    /* Pour aligner les champs texte multi-ligne avec leur étiquette */
    vertical-align: top;

    /* Pour donner assez de place pour écrire du texte */
    height: 5em;
}

.button {
    /* Pour placer le bouton à la même position que les champs texte */
    padding-left: 90px; /* même taille que les étiquettes */
}

button {
    /* Cette marge supplémentaire représente grosso modo le même espace que celui
        entre les étiquettes et les champs texte */
    margin-left: .5em;
}

Notre formulaire devrait avoir meilleure allure désormais. Essayez donc de changer la couleur du texte des champs ou encore de leurs bordures et pourquoi pas celle de notre bouton ?

Comme dit auparavant, un formulaire HTML est une manière pratique de demander de l’information à un utilisateur et de les adresser à un serveur web.

L’élément <form> définit où et comment les données sont envoyées, merci aux attributs action et method.

Mais ce n’est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement.

Pour nommer vos données vous devez utiliser l’attribut name pour identifier bien précisément l’élément d’information collecté par chacun des widgets.

À faire

Ajouter les attributs name à chaque champs du formulaire
Ajouter les attributs for à chaque libellé
Et si nous soumettions notre formulaire à présent ?

Félicitations vous venez de découvrir les bases des formulaires.

Formulaire de commande de pizza#

À faire

Dans un nouveau document, créer un formulaire en méthode GET pour commander des pizzas en expérimentant les différents types de champs:
- text
- password
- range
- date
- color
- checkbox
- radio
- number
- time
- email
- etc.
Astuce

Vous pouvez (devez?) utiliser le processeur fourni à cette adresse (en valeur de l’attribut action de votre formulaire) pour tester les différents types de champs.
Que constatez vous lors de la soumission du formulaire ?
Rappel de code HTML#
<form method="GET" action="url_action"> </form>

Formulaire de commande de pizza II#

Dans votre document créer un second formulaire en méthode POST en utilisant toujours le processeur fourni à cette adresse.

Que constatez vous lors de la soumission du formulaire ?

Avec les notions vu sur CSS essayez de mettre en forme vos formulaires pour les rendre plus attrayant.

Attention

Pensez à la validation W3C pour vos documents HTML et aussi pour vos feuilles de style.

Un peu de web sémantique#

Note

Le HTML sémantique est l’utilisation du balisage HTML visant à renforcer le sémantisme (la signification) des informations contenues dans les pages web, c’est-à-dire leur sens, plutôt que de se borner à définir leur présentation (ou apparence).

Squelette de base HTML5#

<!DOCTYPE html>
<html>
    <head>
        <title>..</title>
        <meta charset='utf-8' />
    </head>
    <body>
        <header>
        </header>
        <main>
        </main>
        <footer>
        </footer>
    </body>
</html>

Quel est l’utilité de la balise header, main et footer ?
Que signifient-elles ?

Dans la balise header rajoutez le code suivant:

<h1>HELLO WORLD!</h1>
<nav>
    <a href=".." title="..">Home</a>
    <a href=".." title="..">Contact</a>
</nav>

Que signifie la balise nav ?
Quel est l’intérêt de placer une balise h1 ici ?

Exemple d’article HTML5#

<article>
    <h2>Useless title</h2>
    <time>04/05/1977</time>
    <p></p>
    <img src=".." alt=".." />
    <a href="http://google.fr" title="Jump to google.fr">Google</a>
</article>

Que signifie la balise article ?
Que signifie la balise time ?
Pourquoi utiliser un h2 dans l’article ?
Sémantiquement les balises p, img et a correspondent à ?

Voici le code d’un listing d’articles avec une sidebar:

<main>
    <section>
        <h2></h2>
        <article></article>
        <article></article>
    </section>
    <aside>
        <p>..</p>
    </aside>
</main>

Que signifie la balise section dans ce cas ?
Que signifie la balise aside ?

Il y a bien longtemps, dans une galaxie lointaine, très lointaine …#

À faire

En reprenant vos fichiers de l’exercice sur la saga star wars, modifiez la structure de vos fichier HTML pour obtenir une page d’accueil et des pages pour chaque film sémantiquement correct.

Page d’actualités#

À faire

En utilisant vos connaissance en HTML sémantique, créer une page d’actualités que nous nommerons GlobalNewsNetwork et qui listera quelques actualités. Chacune contenant à minima les informations suivantes:
- Un titre,
- Une date de publication,
- Un auteur,
- Une description,
- Une image d’illustration.

Tableaux HTML#

Note

Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d’ouverture de la piscine du quartier.

L’avantage du tableau tient dans sa rigueur. L’information est facilement interprétée par des associations visuelles entre les entêtes de lignes et colonnes. Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.

Avertissement

Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c’est pour cela qu’ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l’en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc.

Attention

Ne vous faites pas d’illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d’informations de style avec CSS, ainsi qu’une structure solide avec HTML.

Mon premier tableau#

À faire

Avant tout, créer un squelette de document HTML5 et lier le avec le css ci-dessous.
Le contenu de chaque tableau est encadré par ces deux balises<table></table>.
- Ajoutez-les dans le corps de votre HTML.
Le plus petit conteneur d’un tableau est la cellule; elle est créée avec l’élément <td> (« td » comme « table data »).
- Ajoutez une première cellule.

Observez le résultat dans un navigateur puis continuez à ajouter trois cellules.

Astuce
html {
    font-family: sans-serif;
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(200,200,200);
    letter-spacing: 1px;
    font-size: 0.8rem;
}

td, th {
    border: 1px solid rgb(190,190,190);
    padding: 10px 20px;
}

th {
    background-color: rgb(235,235,235);
}

td {
    text-align: center;
}

tr:nth-child(even) td {
    background-color: rgb(250,250,250);
}

tr:nth-child(odd) td {
    background-color: rgb(245,245,245);
}

caption {
    padding: 10px;
}
Note

Les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément <td> crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne.

Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise <tr> (« tr » comme « table row »). Étudions cela maintenant.

Placez les quatre cellules que vous avez créées entre deux balises <tr>,
Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de <tr>, et comprend chaque cellule encadrée par <td>.

Ajouter des en-têtes à nos tableaux#

Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne. Pour comprendre pourquoi ils sont utiles, regardez l’exemple du tableau suivant. Tout d’abord, le code source :

<table>
    <tr>
        <td>&nbsp;</td>
        <td>Knocky</td>
        <td>Flor</td>
        <td>Ella</td>
        <td>Juan</td>
    </tr>
    <tr>
        <td>Race</td>
        <td>Jack Russell</td>
        <td>Poodle</td>
        <td>Streetdog</td>
        <td>Cocker Spaniel</td>
    </tr>
    <tr>
        <td>Age</td>
        <td>16</td>
        <td>9</td>
        <td>10</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Propriétaire</td>
        <td>Belle-mère</td>
        <td>Moi</td>
        <td>Moi</td>
        <td>Belle-soeur</td>
    </tr>
    <tr>
        <td>Habitudes alimentaires</td>
        <td>Mange tous les restes</td>
        <td>Grignotte la nourriture</td>
        <td>Mange copieusement</td>
        <td>Mange jusqu'à ce qu'il éclate</td>
    </tr>
</table>

Maintenant, le rendu du tableau réel :

	Knocky	Flor	Ella	Juan
Race	Jack Russell	Poodle	Streetdog	Cocker Spaniel
Age	16	9	10	5
Propriétaire	Belle-mère	Moi	Moi	Belle-soeur
Habitudes alimentaires	Mange tous les restes	Grignotte la nourriture	Mange copieusement	Mange jusqu'à ce qu'il éclate

Le problème ici c’est que, bien que vous puissiez comprendre le tableau, il n’est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d’une manière ou d’une autre, ce serait mieux.

À faire

En premier lieu, faites une copie des fichiers du code source du tableau ci-dessus et du css présent plus haut dans un nouveau répertoire sur votre ordinateur.
Pour reconnaître les en-têtes de tableu en tant qu’en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <th> (« th » comme « table header » ou en-tête de tableau).
- Il fonctionne exactement comme la balise <td>, à ceci près qu’il indique un en-tête et non une cellule normale. - Allez dans le code HTML, et remplacez tous les <td> par des <th>.
Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.

Pourquoi les en-têtes sont-ils utiles ?

Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.

Les en-têtes de tableau ont un autre avantage — avec l’attribut scope, ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d’une ligne ou d’une colonne. Les lecteurs d’écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile.

Étendre des cellules sur plusieurs lignes ou colonnes#

Parfois, nous voulons qu’une cellule couvre plusieurs lignes ou colonnes. Prenez l’exemple simple suivant, qui montre le nom d’animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l’animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l’animal s’étende sur toute la largeur du tableau.

Le code initial ressemble à cela :

<table>
    <tr>
        <th>Animaux</th>
    </tr>
    <tr>
        <th>Hippopotame</th>
    </tr>
    <tr>
        <th>Cheval</th>
        <td>Jument</td>
    </tr>
    <tr>
        <td>Étalon</td>
    </tr>
    <tr>
        <th>Crocodile</th>
    </tr>
    <tr>
        <th>Poulet</th>
        <td>Coq</td>
    </tr>
    <tr>
        <td>Coq</td>
    </tr>
</table>

Mais le résultat ne nous donne pas ce que nous voulions, nous avons besoin d’un moyen pour étendre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes, « Cheval » et « Poulet » sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs colspan et rowspan, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, colspan="2" génère une cellule sur deux colonnes.

Utilisons colspan et rowspan pour améliorer ce tableau.

À faire

Tout d’abord, faites une copie locale du tableau ci-dessus et du code css dans un nouveau répertoire sur votre ordinateur.
Ensuite, utilisez colspan pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes.
Enfin, utilisez rowspan pour mettre « Cheval » et « Poulet » sur deux lignes.
Enregistrez et ouvrez votre code sur un navigateur pour voir l’amélioration.

Contenu audio et vidéo#

Maintenant que nous sommes à l’aise pour ajouter de simples images dans une page web, nous passons à l’étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans ce tp, nous nous contenterons de le faire avec les éléments <video> et <audio>.

Les développeurs ont toujours voulu utiliser la vidéo et l’audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d’une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images).

Au départ, les technologies embarquées telles que HTML n’avaient pas la capacité d’intégrer de la vidéo ou de l’audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme Flash (puis, plus tard, Silverlight ) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d’accessibilité.

Fichiers videos en HTML#

Note

L’élément <video> vous permet d’intégrer de la vidéo très facilement. En voici un exemple :

<video src="video/stacraft_ii_trailer_1080p.webm" controls>
    <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="video/stacraft_ii_trailer_1080p.webm">lien vers la vidéo</a>.</p>
</video>

Les fonctionnalités de ce code sont :

src, de la même manière que pour l’élément <img>, l’attribut src (source) contient le chemin vers la vidéo que vous voulez intégrer.
controls, Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l’audio. (c’est particulièrement crucial pour les gens ayant de l’épilepsie.)
Le paragraphe dans la balise <video> est une solution de repli ou contenu de secours (fallback content)
- si le navigateur accédant à la page ne supporte pas l’élément <video>,
- cela offre un texte alternatif qui peut être ce que vous voulez; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l’utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu’il utilise.

À faire

Faites un essai de cet exemple.

Important

Il y a un problème avec l’exemple au-dessus que vous avez dû rencontrer si vous avez accédé au à votre document avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d’audio.

Note

Les formats comme le MP3, MP4 et le WebM sont appelés des formats conteneurs. Ils contiennent plusieurs parties qui, ensemble, donnent l’intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu.

Les pistes audio et vidéo sont aussi de différents formats, par exemple :

Un conteneur WebM empaquette de l’audio Ogg Vorbis avec de la vidéo VP8/VP9. Firefox et Chrome, en particulier, assurent sa prise en charge.
Un conteneur MP4 assemble de l’audio AAC ou MP3 en audio avec de la vidéo H.264. Internet Explorer et Safari, principalement, le prennent en charge.
L’ancien conteneur Ogg rassemblait de l’audio OggVorbis et de la vidéo OggTheora. Il était essentiellement pris en charge par Firefox and Chrome, mais il a été supplanté par le format WebM qui est de meilleure qualité.

Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.

Astuce

Les formats ci-dessus ont été créés pour compresser la vidéo et l’audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents Codecs, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S’il vous manque le bon codec pour décoder le média, il ne pourra pas être lu.

Alors, comment faire ? Jetez un coup d’œil à l’exemple qui suit, mis à jour:

<video controls>
    <source src="video/stacraft_ii_trailer_1080p.mp4" type="video/mp4">
    <source src="video/stacraft_ii_trailer_1080p.webm" type="video/webm">
    <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="video/stacraft_ii_trailer_1080p.mp4">lien sur la vidéo</a>.</p>
</video>

Ici, nous avons retiré l’attribut src de la balise <video> et inclus des éléments source séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments source et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours.

Chaque élément source possède également un attribut de type. C’est facultatif, mais il est conseillé de les inclure — ils contiennent le type MIME des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu’ils ne comprennent pas. Si le type n’est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu’à ce qu’il en trouve un qu’il prenne en charge, ce qui demande du temps et des ressources.

<video controls autoplay loop muted poster="img/stacraft_ii_poster.png">
    <source src="video/stacraft_ii_trailer_1080p.mp4" type="video/mp4">
    <source src="video/stacraft_ii_trailer_1080p.webm" type="video/webm">
    <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="video/stacraft_ii_trailer_1080p.mp4">lien vers la vidéo</a>.</p>
</video>

Voici les nouvelles fonctionnalités:

autoplay Cet attribut permet de lancer immédiatement la lecture de l’audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d’utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux.
loop Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l’audio). Cette façon de procéder pouvant être mal perçue, ne l’utilisez que si c’est vraiment nécessaire.
muted Cet attribut coupe le son de la vidéo par défaut.
poster Cet attribut prend comme valeur l’URL d’une image affichée avant la lecture de la vidéo. Il s’utilise en tant que logo de démarrage ou de publicité.
preload Cet attribut s’utilise pour mettre en tampon les gros fichiers.
- Il peut prendre 3 valeurs:
  
  none: ne pas mettre le fichier dans un tampon,
  
  auto: mettre le fichier média dans un tampon
  
  metadata: ne mettre que les métadonnées dans le tampon

Notez que nous n’avons pas inséré l’attribut autoplay dans la version en direct - si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster!

Fichiers audio en HTML#

L’élément <audio> fonctionne exactement de la même manière que l’élément <video>, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci:

<audio controls>
    <source src="audio/stacraft_main_menu.mp3" type="audio/mp3">
    <source src="audio/stacraft_main_menu.ogg" type="audio/ogg">
    <p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="audio/stacraft_main_menu.mp3">lien vers l'audio</a>.</p>
</audio>

Cela prend moins de place qu’une vidéo, et il n’y a pas de composante visuelle — il est juste nécessaire d’afficher les contrôles de lecture de l’audio. Il ne prend pas en charge non plus l’attribut poster — toujours pas de composant visuel.

Excepté ce qui précéde, <audio> accepte les mêmes fonctionnalités que <video> - revoyez les sections ci-desssus pour plus d’informations à ce propos.

À faire

Après avoir testé les différents éléments précédent, créer un site basique qui listera les trois jeux suivants de la saga StarCraft:

StarCraft,
StarCraft Ghost (RIP)
et StarCraft II.

Il vous faudra :

Télécharger les fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur depuis l’url suivante.
Créer un nouveau fichier HTML dans le même répertoire nommé : index.html qui listera les documents dédié à chaque jeu.
Ajouter des éléments <audio> et <video> dans chaque page; faire en sorte qu’ils affichent les contrôles par défaut du navigateur.
Leur attribuer (aux deux) des éléments <source> que le navigateur puisse trouver le meilleur format audio et le charger. N’oubliez pas d’inclure les attributs type.
Donner à l’élément <video> une image qui sera affichée avant que la vidéo ne démarre.
En bonus, vous pouvez chercher des images et des textes à intégrer comme celui-ci pour StarCraft :
In the distant future, a small group of human exiles have been doomed to fight for survival on the edge of the galaxy. Through military strength, espionage, and deceit, a unified Terran government has maintained an uneasy peace. But as resources and fuel run short, the Confederate nations find themselves looking towards the rich worlds of their alien neighbors, the enigmatic Protoss. To further complicate matters, it seems that a previously unknown species– the Zerg– has entered Protoss space and is destroying everything in its path. The time for war has come.

La technique du 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.

À faire

En reprenant le code sur la saga Star Wars :

Ouvrez le votre document index.html dans plusieurs navigateurs (chrome, firefox, ie) 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.

Astuce

Un reset CSS est un simple fichier CSS, il convient de le télécharger puis de l’intégrer (tout comme n’importe quel style) dans notre document. Attention celui-ci doit l’être avant nos propres styles.

Si besoin modifiez votre style css pour prendre en compte les modifications induites par le reset CSS.

CDN#

Note

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.

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

font-family: 'Roboto', sans-serif;

À faire

En reprenant votre code sur la saga Star Wars, ajoutez des polices d’écriture issue de GoogleFonts pour rendre votre design plus agréable à l’oeil.

Un exercice de Grille CSS#

Nous allons utiliser les images issues de cette archive représentant les skeksis du film/série télé Dark Crystal.

À faire

Créer un document HTML contenant le squelette de base de tout document HTML5,
Au sein de la balise main ajouter une balise img pour chaque image contenue dans l’archive
Ajouter un reset CSS à ce document
Ajouter un fichier de mise en forme css à ce document contenant les règles ci-dessous:

main {
    max-width: 1024px;
    margin: 0 auto;
}

img {
    display: block;
    margin: 0 auto;
    max-width: 100%
}

Nos images devraient s’afficher les unes en dessous des autres et être centrées horizontalement dans notre document.

Nous allons créer une grille pour mettre les images les unes à côté des autres, notre grille devra contenir 5 colonnes par lignes.

Dans un premier temps nous allons appliquer la grille sur notre balise main:

main {
    max-width: 1024px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

Que constatez-vous ?

Notre document précédent n’est pas sémantiquement correct, il nous faut corriger cela !

À faire

Commenter le css qui à transformer notre balise main en grille
Pour chaque image créer un article qui contiendra en plus de l’image le nom du Skeksis (vous pouvez le retrouver à partir du nom de l’image)
Nos articles devront être dans une balise section
Créer une grille de 5 colonnes pour afficher les articles.
En reprenant le document précédent, servez-vous de la disposition des grilles pour placer les articles pairs sur 3 colonnes et les articles impairs sur 2 colonnes. Attention a bien géré les lignes où seront affichés les éléments.
En reprenant votre grille dans un nouveau fichier, retirer les titres de niveau 2 au sein de vos articles puis ajouter l’image suivante dans un nouvel article:
Et placer les différents articles au sein de la grille pour obtenir le résultat suivant:
En reprenant le code sur la saga Star Wars afficher les films de la page d’accueil dans une grille de 3 colonnes.

Batîssons un template#

Nous allons créer une page d’actualités des plus simple. Voici un exemple de résultat attendu de votre part:

À faire

Créer fichier index.html encodé en:code:UTF-8
Créer le squelette de base de tout fichier HTML5 dans celui-ci
Créer un menu de navigation au sein du header principal
Créer un listing d’actualités sémantiquement correct
- nb: les liens présents dans le fichier pointeront sur cette page (à savoir index.html)

Astuce

Inclure un reset CSS
Inclure une grille de mise en forme (simple grid par exemple ou le module GridLayout de CSS3)
Mettre en forme le listing d’actualités via votre grille de mise en forme

Terminer le design de votre template en utilisant les propriétés et sélecteurs CSS vus en cours
- nb: le style de l’exemple fait (en dehors du reset css et de la grille) un peu moins de 100 lignes de CSS en utilisant 26 sélecteurs CSS et trois types de sélecteurs différents

Media queries#

Note

?ous avons créé un template basique mais fonctionnel d’un site web d’actualité. Nous allons devoir adapter notre site à différents terminaux. Nous allons donc transformer notre template en template responsive.

Comment tester notre site sur différents terminaux.

Il est compliqué de tester notre site sur différents terminaux, notamment lorsque celui-ci est en développement. Fort heureusement les navigateurs nous proposent un outil au sein de l’inspecteur permettant de tester cela:

Grâce à cette fonctionnalité nous pouvons tester notre site web en mode responsive.

Nous avons créé un template qui s’affiche parfaitement sur grand écran (supérieur à 960px). Il convient de modifier notre CSS pour le faire s’afficher convenablement sur des écrans plus petits.

Note

Les requêtes média (media queries) permettent de modifier l’apparence d’un site ou d’une application en fonction du type d’appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d’écran ou la largeur de la zone d’affichage (viewport) par exemple).

Les requêtes média sont utilisées afin :

D’appliquer certains styles de façon conditionnelle grâce aux règles @media et @import.
De cibler certains média pour les éléments <style>, <link>, <source> et d’autres éléments HTML grâce à l’attribut media=.

Ajoutez ce code CSS à la fin de votre fichier de style

@media screen and (max-width: 600px) {
    body {
        color: red;
    }
}

En utilisant l’outil présenté ci-dessus, modifier le viewport (la taille de l’écran) pour voir la modification de la media queries s’appliquer.

À faire

En reprenant le template précédent, modifier votre style css pour rendre votre site responsive. Voici quelques pistes qui peuvent vous aider:

La grille passe de plusieurs colonnes à une seule ou les éléments sont placés les uns en dessous des autres,
Le menu place ses éléments également les uns en dessous des autres et les centres la plupart du temps.

Projet plateforme de Streaming#

Note

L’objectif de votre projet est de produire, en binôme, une maquette de site de diffusion de contenu légal (streaming). Ce sera une maquette dans le sens où les fonctionnalités coté serveur (recherche, ajout dans les favoris, etc.) seront simulées.

Voici la liste des pages que votre maquette devra, au minimum, comporter :

une page d’accueil, affichant un message de bienvenue, les nouveautés et les recommandations en cours, et offrant un champs de recherche ;
une page simulant un résultat de recherche, affichant une liste d’articles menant vers chaque série télé;
une page détaillée de la série, incluant une description, la possibilité de laisser un commentaire, et d’ajouter la série à ses favoris;
une page de visualisation d’un épisode;
une page “Qui sommes-nous ?” présentant le site.

Votre site doit être responsive: il doit s’adapter à la largeur de l’écran, afin de présenter une ergonomie différente (et appropriée) sur un écran d’ordinateur et sur un smartphone.

Indication

Votre maquette utilisera exclusivement du HTML et du CSS (pas de Javascript ou de PHP).
Vous pouvez utiliser des extraits de HTML ou de CSS trouvés sur le Web, à condition de citer vous sources (URL d’origine en commentaire).
Pensez-bien à utiliser les valideurs du W3C pour le code HTML et CSS ; un site ne passant pas le valideur (sans erreur ni warning) recevra une note en dessous de la moyenne !
Comme tout site de streaming, votre projet devra avoir un aspect uniforme d’une page à l’autre.
Les pages que vous créez doivent être liées les unes aux autres de manière à simuler de manière cohérente la navigation à l’intérieur du site. Notez que, même si certaines pages (page de garde, résultat de recherche) contiennent des liens vers des articles différents, tous ces liens peuvent pointer vers l’unique page détaillée d’une série que l’on vous demande d’écrire.
L’organisation des fichiers de votre site doit respecter les bonnes pratiques vues en cours.
Pour simuler un formulaire, il suffit d’utiliser l’adresse de la page résultat comme attribut action de la balise <form>.
Si vous travaillez seul⋅e, vous êtes dispensé⋅e de réaliser la page “résultat de recherche” et la page “qui sommes-nous ?”.

Projet maquette de site marchand#

Note

“objectif de votre projet est de produire, en binôme, une maquette de site marchand. Ce sera une maquette dans le sens où les fonctionnalités coté serveur (recherche, passage de commande) seront simulées.

Voici la liste des pages que votre maquette devra, au minimum, comporter :

une page d’accueil, affichant un message de bienvenue et les promotions en cours, et offrant un champs de recherche ;
une page simulant un résultat de recherche, affichant une liste d’articles ;
une page détaillée d’article, incluant une description, la possibilité de laisser un commentaire, et d’ajouter l’article à son panier ;
une page de validation de commande, permettant de saisir les coordonnées de livraison ;
une page “Qui sommes-nous ?” présentant le site.

Votre site doit être responsive: il doit s’adapter à la largeur de l’écran, afin de présenter une ergonomie différente (et appropriée) sur un écran d’ordinateur et sur un smartphone.

Indication

Votre maquette utilisera exclusivement du HTML et du CSS (pas de Javascript ou de PHP).
Vous pouvez utiliser des extraits de HTML ou de CSS trouvés sur le Web, à condition de citer vous sources (URL d’origine en commentaire).
Pensez-bien à utiliser les valideurs du W3C pour le code HTML et CSS ; un site ne passant pas le valideur (sans erreur ni warning) recevra une note en dessous de la moyenne !
Comme tout site marchand, votre projet devra avoir un aspect uniforme d’une page à l’autre.
Les pages que vous créez doivent être liées les unes aux autres de manière à simuler de manière cohérente la navigation à l’intérieur du site. Notez que, même si certaines pages (page de garde, résultat de recherche) contiennent des liens vers des articles différents, tous ces liens peuvent pointer vers l’unique page détaillée d’article que l’on vous demande d’écrire.
L’organisation des fichiers de votre site doit respecter les bonnes pratiques vues en cours.
Pour simuler un formulaire, il suffit d’utiliser l’adresse de la page résultat comme attribut action de la balise <form>.
Si vous travaillez seul⋅e, vous êtes dispensé⋅e de réaliser la page “résultat de recherche” et la page “qui sommes-nous ?”.