Apprendre la programmation Web - HTML, CSS à travers des TD

Romain Lebreton

Pour réagir au contenu de ce tutoriel, un espace de dialogue vous est proposé sur le forum. Commentez

- Titre : Apprendre la programmation Web - HTML, CSS à travers des TD

- Auteur : Romain Lebreton

- Parution : 1 décembre 2017

- Licence : Romain Lebreton, Sébastien Gagné, Jean-Phillipe Prost et Rémi Rabatel 2017, licensed under CC-BY-SA 4.0. Source code available on GitHub, static Website generated with Jekyll and kindly hosted by GitHub. Structure of the website by Luca De Feo

Sommaire

- I. TD1 Partie 1 - HTML - un langage à balises pour structurer les documents Doctype et premières balises

- I-A. Transformation d'un document texte en un document HTML

- I-A-1. Le rôle du navigateur

- I-A-2. Le standard du langage HTML

- I-B. Structure usuelle d'un document HTML

- I-B-1. Les balises HTML

- I-B-2. La structure de base

- I-B-3. Un document HTML est comme un arbre

- I-C. Outils de développement Web

- I-D. Les balises communes du HTML

- I-D-1. Les commentaires en HTML

- I-D-2. Titres

- I-D-3. Éléments de regroupement

- I-D-3-a. Paragraphes

- I-D-3-b. Listes

- I-D-4. Image : un exemple d'élément embarqué

- I-D-5. Éléments sémantiques

- I-D-5-a. Liens externes

- I-D-5-b. Liens internes

- I-D-5-c. Emphase

- I-D-5-d. Citation

- I-E. Fini !

- II. TD1 Partie 2 - Les bases du CSS Un langage de mise en page

- II-A. Tutoriel d'introduction

- II-B. Les outils de développement sont vos amis

- II-C. Commentaires

- II-D. Quelques propriétés CSS

- II-D-1. Couleurs

- II-D-2. Dimensions

- II-D-3. Fontes

- II-D-4. Textes

- II-D-5. Exercices

- II-E. Les sélecteurs CSS de base

- II-E-1. Les sélecteurs de balises

- II-E-2. Les sélecteurs d'identifiant

- II-E-3. Les sélecteurs de classes

- II-E-4. Exercices

- II-F. Remarques finales

- II-F-1. Le CSS et HTML : des rôles bien distincts et complémentaires

- III. TD2 - HTML / CSS avancé 1/2 structuration et stylisation, block & inline, combinaison de sélecteurs

- III-A. Structuration de la page

- III-B. Règles de composition des CSS

- III-B-1. Regroupement

- III-B-2. Combinaison

- III-B-3. Descendance

- III-B-3-a. Descendance directe (enfant)

- III-B-3-b. Descendance indirecte (descendant)

- III-B-4. Pseudoclasses

- III-C. Tableaux

- III-C-1. Les éléments <table>, <tr>, et <td>

- III-C-2. L'élément <th>

- III-C-3. Les éléments <thead> et <tbody>

- III-C-4. Les attributs rowspan et colspan

- III-D. Le modèle de boîte

- III-D-1. Centrer horizontalement

- III-E. Les contenus flottants

- III-F. Position

- IV. TD3 - HTML/CSS avancé 2/2 display et mise en page

- IV-A. Ordre d'application des sélecteurs CSS

- IV-A-1. Différents emplacements

- IV-A-2. Priorité des sélecteurs

- IV-A-3. L'ordre de priorité

- IV-B. La propriété display

- IV-B-1. display:block

- IV-B-2. display:inline

- IV-B-3. Exemple

- IV-B-4. Exercices

- IV-C. display:none

- IV-C-1. Menu déroulant : Partie 1 - positionnement

- IV-C-1-a. Position

- IV-C-2. Menu déroulant : Partie 2 - affichage lors du survol

- IV-D. display:flex

- IV-D-1. La propriété flex-direction

- IV-D-2. La propriété align-items

- IV-D-3. La propriété justify-content

- IV-D-4. Flexbox, une valeur relativement récente

- IV-E. Mise en page globale

- IV-E-1. En-tête

- IV-E-2. Deux colonnes

- IV-F. Cacher ou enlever un élément du rendu

- IV-G. Fini !

- V. TD4 Les formulaires

- V-A. Introduction

- V-B. La balise <form> et les balises <input>

- V-C. La balise <label>

- V-D. Les principaux types de balises <input>

- V-E. La balise <select>

- V-F. La balise <textarea>

- V-G. La balise <fieldset>

- V-H. Ergonomie et convivialité

- V-H-1. Navigation

- V-H-2. Convivialité

- V-H-3. Contrôle du contenu

- VI. TD5 - Responsive design

- VI-A. Introduction

- VI-B. CSS2

- VI-B-1. Les pourcentages « % »

- VI-B-2. max-width et min-width

- VI-B-3. Overconstraint

- VI-B-4. Problèmes plus complexes

- VI-C. Votre site de Chuck Norris sur mobile

- VI-C-1. Les outils pour travailler ?

- VI-C-2. Que fait mon navigateur Web sur téléphone par défaut pour un site ?

- VI-D. La solution technique CSS3 : les media queries

- VI-D-1. Les points de rupture

- VI-D-2. Mettez-moi un burger au menu !

- VI-D-3. La mobilité en général

- VII. Note de la rédaction de Developpez.com

I - TD1 Partie 1 - HTML - un langage à balises pour structurer les documents Doctype et premières balises

Le but de ce TD est de comprendre comment sont écrites les pages Web basiques, aussi appelées pages statiques (Web 1.0). Une telle page Web contient deux parties :

1. HTML : le fichier HTML contient la structure de la page et son contenu ; en plus du texte brut, il donne du sens au texte en indiquant ce qui relève d'un paragraphe, d'un titre, etc., à l'aide de balises (exemple <p>, <title>…) ;

2. CSS : le fichier CSS est responsable de la mise en page de ces éléments (mettre ce paragraphe en rose, utiliser la fonte « Sans Serif » pour ce titre… ).

Le navigateur (Firefox, Chrome, Safari, IE/Edge…) est le logiciel qui nous permet de visualiser les pages Web. Le but de ce TD est de démystifier la façon dont sont interprétés ces deux types de fichiers par le navigateur. Pour cela nous allons réaliser un site dont le rendu correspond au fichier target.png, en partant du fichier index.txt, qui contient le contenu quasiment « brut » du site à réaliser.

Nous allons tout d'abord nous consacrer à préciser la structure (le HTML donc) que l'on peut ajouter à notre contenu brut. Nous verrons ensuite dans la deuxième partie du TD comment atteindre le rendu proposé par target.png en réalisant un fichier CSS.

I-A - Transformation d'un document texte en un document HTML

I-A-1 - Le rôle du navigateur

Comme dit précédemment, le rôle du navigateur (Firefox, Chrome, Safari, IE/Edge…) est de visualiser les pages Web. Donc le navigateur transforme un fichier texte contenant du langage HTML/CSS en un affichage mis en page, avec des images…

Exercice 1

1. La page du TD est une page Web. Ouvrez les sources de cette page pour voir le code HTML qui est utilisé pour afficher cette page (clic droit puis code source ou Ctrl+U).

Exercice 2

1. Pour créer une page Web, il suffit de créer un fichier texte et de lui donner l'extension .html pour que le navigateur comprenne qu'il doit l'interpréter comme un document HTML.

1. Sauvegardez le fichier index.txt en local dans un dossier HTMLCSS/TD1/.
Sauvegardez le même fichier index.txt en local dans le dossier HTMLCSS/TD1/ en le renommant index.html.

2. Ouvrez les deux fichiers index.txt et index.html dans le navigateur.
Quelles différences d'affichage observez-vous ? Pourquoi ?
Comment sont affichés des sauts de ligne d'un document HTML ?
Comment est affiché un texte HTML entouré de <!-- et -->  ?

I-A-2 - Le standard du langage HTML

Notre document index.html est bien interprété comme un document HTML par le navigateur.

Le HTML, qui signifie HyperText Markup Language (langage de balisage d'hypertexte), est donc un langage à balises contenant des liens, dits hypertextes, vers d'autres documents.

Le HTML est un standard, c'est-à-dire un langage complètement décrit (n'hésitez pas à jeter un rapide coup d'œil à sa spécification, un document très technique mais complet).

Exercice 3

1. Testons la conformité de index.html au standard HTML5 à l'aide du validateur https://html5.validator.nu/. Quelles sont les erreurs indiquées ?

2. Commençons par l'erreur

Error: Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.

Le validateur nous dit qu'il s'attendait à voir <!DOCTYPE html> au début de notre document. Cette balise sert à déclarer que le document est écrit en HTML5. En effet, il existe plusieurs standards de « langages HTML » : HTML4, XHTML, HTML5… Aujourd'hui, les gens utilisent majoritairement HTML5 et nous ferons de même.

Pour que le document soit valide et reconnu comme un document HTML 5, ajoutez la balise <!DOCTYPE html> au tout début du fichier.
Retestez la conformité de votre document.

3. Le validateur nous indique The character encoding was not declared.
L'encodage indique la façon dont le fichier est enregistré (UTF-8, ANSI, iso-8859-15…). Si la plupart des caractères sont enregistrés de manière standard, les caractères spéciaux (accents, œ…) peuvent être enregistrés de manières très différentes.
Lorsque l'encodage n'est pas spécifié, le navigateur risque d'afficher Ã© au lieu de é à cause d'une mauvaise détection de l'encodage. En effet, le caractère é est enregistré en UTF-8 de la même manière que Ã© est enregistré en iso-8859-15 (encodage encore très utilisé dans Windows).
Spécifier l'encodage des caractères est donc nécessaire pour que les caractères spéciaux de votre page soient bien affichés. Nous utiliserons toujours l'encodage UTF-8 (et idéalement tout le monde devrait aussi l'utiliser).

1. Ajoutez donc la ligne suivante qui déclare l'encodage dans l'en-tête du document juste après le DOCTYPE.

<meta charset="utf-8">

1. Rouvrez index.html dans le navigateur et vérifiez que tous les accents s'affichent bien.
Note : si les accents ne marchent toujours pas, c'est parce qu'il ne suffit pas de dire que votre fichier est en UTF-8. Il faut aussi que votre fichier soit bien enregistré en UTF-8. Par exemple dans Notepad++, l'encodage est marqué tout en bas à droite. Vous pouvez convertir votre fichier en UTF-8 en cherchant dans les menus.

2. Retestez la conformité de votre document.

<title>Le site non officiel de Chuck Norris</title>

À ce stade, le validateur indique que le fichier index.html est un document HTML5 valide.

I-B - Structure usuelle d'un document HTML

I-B-1 - Les balises HTML

Nous avons vu dans l'exercice précédent nos premières balises <meta> et <title>. Les balises permettent de structurer le document. Elles annotent le texte qu'elles contiennent et permettent donc d'y ajouter du sens. On distingue deux types de balises :

1. La plupart des balises englobent du contenu : elles commencent par une balise ouvrante <mabalise>, puis le contenu que l'on veut « annoter » et finissent par une balise fermante </mabalise>.
Par exemple, la balise <title> sert à dire que le texte qu'elle englobe sera le titre du document ;

2. Certaines balises n'acceptent pas de contenu : elles consistent juste d'une balise ouvrante.
Par exemple, nous avons vu la balise <meta> et nous verrons bientôt <img>, <br>…

Autres exemples :

<p>Ceci est un paragraphe HTML puisqu'il est entouré des balises 'p' </p>
La balise 'br' du saut de ligne ne prend pas de contenu <br>

I-B-2 - La structure de base

Servons-nous donc des balises pour créer une bonne structure de base de document HTML :

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <!-- L'en-tête du document avec au moins un titre -->

5. <title>Un titre qui s'affiche dans l'onglet du navigateur</title>

6. </head>

7. <body>

8. <!-- Le corps du document -->

9. </body>

10. </html>

Après la ligne <!DOCTYPE html> de déclaration du langage, le document est inclus dans la balise <html> et est composé de deux parties :

- l'en-tête <head> contient des informations sur le document HTML, comme

- un <title> (balise obligatoire),

- un <meta> pour définir l'encodage ;

- le corps <body> contient le vrai contenu. Nous verrons des exemples de balises dans la section Balises communes.

I-B-3 - Un document HTML est comme un arbre

Les balises HTML donnent une structure d'arbre au document. Dans notre exemple index.html

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <meta charset="utf-8">

5. <title>Le site non officiel de Chuck Norris</title>

6. </head>

7. <body>

8. ...

9. </body>

10. </html>

l'arbre est le suivant :

- <html> est l'élément racine.

- <head> et <body> sont les deux fils de l'élément <html>.

- <title> et <meta> sont deux fils de l'élément <head>.

- « Le site non officiel de Chuck Norris » est un fils de l'élément <title>.

Exercice 4

1. Mettez à jour votre page index.html pour qu'elle respecte la structure HTML ci-dessus.
(Vous devez ajouter les balises <html>, <head> et <body>.)

2. Retestez la conformité de votre document.

I-C - Outils de développement Web

Dans la suite du TD, nous allons utiliser notre navigateur pour « inspecter » notre page Internet. Pour cela nous conseillons Chrome ou Firefox. Appuyer sur la touche F12. Les outils de développement affichent deux parties bien distinctes, une dédiée au HTML et l'autre… aux CSS. Ces outils sont fabuleux pour apprendre comment se construit une page Internet.

Il y a trois façons de s'intéresser à un élément en particulier :

- un clic droit avec la souris dans la page affichée, suivi d'un « Inspecter/Examiner l'élément », permet de voir le code HTML correspondant dans l'outil de développement ;

- un clic sur dans l'outil de développement permet d'aller inspecter une zone d'intérêt dans la page (par survol avec la souris) ;

- quand on passe la souris au-dessus d'un élément dans l'outil de développement, il le colore dans la page.

Exercice 5

Familiarisez-vous avec ces trois techniques en inspectant la page du TD.
Par exemple faites un clic droit sur l'élément « il y a trois façons… » puis « inspecter l'élément ». L'outil de développement doit vous présenter le code HTML et vous positionner directement sur <p>Il y a ....

I-D - Les balises communes du HTML

I-D-1 - Les commentaires en HTML

Il est possible d'ajouter des commentaires dans le HTML. Ces commentaires ne sont pas interprétés par le navigateur, et ne sont donc pas affichés (mais ils restent présents dans le code source). Il s'agit donc d'informations laissées par des développeurs pour des développeurs. On les place entre les balises <!-- et --> :

<!--Cela est un commentaire dans un fichier HTML  -->

Il y a justement des commentaires dans le fichier index.html, comme autant de consignes afin de les remplacer par du HTML. Nous expliciterons ces dernières dans les sections suivantes.

I-D-2 - Titres

Nous allons commencer par ajouter de la structure à notre page. Pour ce faire nous allons utiliser les balises à contenu <h1> à <h6> pour identifier les différentes sections :

- <h1> est utilisé pour les gros titres du document ;

- <h2> est utilisé pour les sections du document ;

- <h3> est utilisé pour les sous-sections du document et ainsi de suite.

Par exemple, le titre ci-dessus est obtenu avec le code suivant :

<h2>Titres</h2>

Exercice 6

1. Vérifiez que le titre Titres juste au-dessus est bien un <h3> à l'aide des outils de développement en faisant un clic droit dessus.

2. Ajoutez la balise <h2> aux éléments de index.html marqués par les commentaires : <!-- section -->.

3. Ajoutez la balise <h3> aux éléments de index.html marqués par les commentaires : <!-- sous section -->.

4. Retestez la conformité de votre document.

I-D-3 - Éléments de regroupement

I-D-3-a - Paragraphes

Exercice 7

Utilisez maintenant les balises <p> et </p> autour des paragraphes du document. Les paragraphes vous sont signifiés par <!--début paragraphe --> et <!--fin paragraphe -->.

Note : si vous faites un clic droit suivi de « inspecter l'élément » sur ce paragraphe, vous verrez justement que ce texte est dans un paragraphe.

I-D-3-b - Listes

En HTML nous pouvons faire des listes ordonnées (numérotées) ou non ordonnées :

1. <ul> <!-- ul pour unordered list -->

2. <li>premier item non ordonné</li> <!-- li pour list item -->

3. <li>deuxième item</li>

4. </ul>

5. <ol> <!-- ol pour ordered list -->

6. <li>premier item ordonné</li>

7. <li>deuxième item</li>

8. </ol>

Ce qui donne une fois interprété par le moteur de rendu du navigateur :

- premier item non ordonné

- deuxième item

1. premier item ordonné

2. deuxième item

Exercice 8

1. Utilisez les balises <ul> et <li> pour structurer la liste à puces <!--liste --> dans index.html.
(Ne vous souciez pas encore des commentaires <!-- lien externe -->)

2. Utiliser les balises <ol> et <li> pour structurer la liste numérotée <!--liste numérotée --> dans index.html.

3. Retestez la conformité de votre document. (En fait vous devriez le tester régulièrement de vous-même, mais on vous tient par la main pour ce premier TD).

I-D-4 - Image : un exemple d'élément embarqué

Pour insérer une image, on peut utiliser la balise

<img src="adresse_image" alt="texte alternatif mais obligatoire">

Cette balise n'a pas de balise fermante, car elle ne peut avoir de contenu (cf. le début du TD). On remarque qu'elle possède deux champs src et alt que l'on appelle les attributs de la balise. Les attributs se trouvent toujours dans la balise ouvrante.

Exercice 9

1. Précédemment, on avait vu une autre balise avec un attribut : quelle était cette balise ?

L'attribut src doit contenir l'adresse de l'image. L'attribut alt permet d'ajouter un texte alternatif pour les navigateurs ne pouvant les afficher (navigateur textuel Lynx) ou pour les personnes ne pouvant pas bien les distinguer (aveugles ou déficits visuels légers). Attention, l'attribut alt est obligatoire.

Exercice 10

1. Enregistrez l'image chuck-jeune.jpg dans un répertoire images par rapport à votre fichier index.html.

2. Remplacez le commentaire <!--l'image de Chuck Young doit être positionnée ici --> par la balise <img> suivante

<img src="./images/chuck-jeune.jpg" alt="Une photo de Chuck Jeune, la légende est en marche.">

Note : l'adresse ./images/chuck-jeune.jpg est une adresse relative. Le point signifie « le dossier de la page Web courante ». Donc on va aller chercher l'image dans le dossier images du répertoire contenant la page Web index.html.

3. Faites de même avec l'image beware.jpg à positionner en lieu et place du commentaire <!--l'image de Chuck Beware ici -->.

4. Devinez quoi ? Il faut retester la conformité de votre document.

I-D-5 - Éléments sémantiques

I-D-5-a - Liens externes

L'un des éléments les plus emblématiques du HTML est sans doute la balise <a>. Elle permet de faire des liens hypertextes (le HT dans HTML).

Un lien est composé principalement d'une URL cible et d'un libellé (le texte cliquable souvent souligné en bleu) :

<a href="http://urlcible">le libellé</a>

On peut renseigner l'URL complète de la cible (URL en chemin absolu), par exemple :

<a href="http://lynx.browser.org/">Lynx</a>

ou donner une adresse relative à la page courante (URL en chemin relatif), par exemple :

<a href="./images/chuck-jeune.png">Image</a>

Exercice 11

1. Remplacez les commentaires <!-- lien externe ... par des balises <a> avec la bonne adresse.

2. Testez la conformité…

I-D-5-b - Liens internes

On peut ajouter à ces liens externes une partie lien interne basée sur les ancres #monancre. Toutes les balises peuvent prendre un attribut id comme dans l'exemple suivant. Attention, la valeur de cet attribut doit être unique dans le document.

<h2 id="un_identifiant">

On peut alors faire un lien vers cette balise en ajoutant #un_identifiant à la fin de l'URL. Par exemple, voici un lien vers la balise d'identifiant un_identifiant interne à la page Web courante index.html :

<a href="index.html#un_identifiant">Exemple de lien interne</a>

On peut raccourcir l'URL comme suit. Si on n'indique pas le document, c'est que l'on pointe vers le document courant par défaut.

<a href="#un_identifiant">Exemple de lien interne</a>

Exercice 12

1. Remplacez le commentaire <!-- lien interne ...--> de index.html par une balise <a> qui pointera sur l'une des premières balises. Vous aurez donc besoin d'ajouter un identifiant à cette balise cible.

2. Testez vos liens en cliquant dessus. Ils doivent vous emmener sur la balise dont l'identifiant correspond.

3. Testez la conformité…

I-D-5-c - Emphase

La balise <em> permet de mettre en évidence des passages importants dans un texte.

Exercice 13

Justement, il faut mettre en exergue le fait que Chuck Norris est très fort dans différents arts martiaux. Pour cela il faut mettre en emphase la phrase qui suit le commentaire : <!-- mettre en emphase cette phrase --> dans le fichier index.html.

Note : il existe un autre type d'emphase qui s'obtient avec la balise <strong>.

I-D-5-d - Citation

Voici un magnifique exemple de citation :

Un biscuit ça n'a pas de 'spirit', c'est juste un biscuit. Mais avant c'était du lait, des œufs. Et dans les œufs, il y a la vie potentielle.
Jean-Claude Van Damme

Les citations permettent d'identifier un court texte sur lequel on veut attirer l'attention. Cela est utilisé notamment pour montrer qu'on a du 'spirit'.

Exercice 14

1. Allez voir le code source de notre citation à l'aide des outils de développement. Quelles sont les deux nouvelles balises utilisées ?
La première balise (qui commence par un b) entoure la citation complète tandis que la deuxième (qui commence par un c) contient uniquement la référence (l'auteur, le livre…).

2. Utilisez ces deux balises pour mettre en avant la citation en tout début de document (recherchez <!-- utiliser blockquote ici -->).

3. Avez-vous vérifié tout au long du TD que votre page HTML reste valide ?

I-E - Fini !

Nous en avons fini en ce qui concerne le contenu et la structure de notre site. Nous savons ajouter de la structure à une page HTML avec des balises spécifiques.

Dans la partie 2 de ce TD, nous verrons comment améliorer l'aspect du site.

Remarque : pourquoi le fait d'ajouter <h1> à un titre change effectivement l'apparence des titres ? Cela n'est pas à la charge du CSS justement ?
En fait, les navigateurs appliquent des styles CSS par défaut à certaines balises HTML. Par exemple, les liens <a> sont en bleus et soulignés sans que l'on ait rien à faire. Cela évite d'avoir justement TOUT à refaire en CSS : le navigateur propose un style par défaut.

II - TD1 Partie 2 - Les bases du CSS Un langage de mise en page

Les standards définissant le CSS sont publiés par le World Wide Web Consortium (W3C) à l'adresse http://www.w3.org/Style/CSS/.

Cascading Style Sheets (CSS) est un mécanisme simple pour ajouter du style (exemple fonte, couleurs, espace) à un document web.
W3C

Le CSS est responsable du rendu du site sur votre écran, mais aussi sur smartphone et des impressions papier (des ensembles de règles CSS peuvent être spécifiées pour chacun de ces médias).

Savoir les bases du CSS est relativement facile et indispensable pour qui veut travailler dans les métiers du Web. En maîtriser tous les aspects est un métier (celui d'intégrateur Web, qui traduit en HTML et CSS le travail du Web-designer).

II-A - Tutoriel d'introduction

Voici un exemple de règle CSS

1. h3 {

2. font-style:italic;

3. color:blue;

4. }

Cette règle CSS donne à toutes les balises <h3> le style italique et définit comme couleur de texte le bleu.

Une règle CSS est composée de deux parties :

- un sélecteur CSS qui indique à quels éléments HTML s'applique le style. Dans notre exemple, le sélecteur h3 signifie que nous allons appliquer le style suivant à toutes les balises HTML <h3> ;

- un bloc de déclarations composé de plusieurs paires propriété CSS/valeur. Dans notre exemple, le bloc contient deux déclarations :

1. Nous donnons la valeur italic à la propriété CSS font-style,

2. nous donnons la valeur blue à la propriété CSS color.

Exercice 1

Mettons en place nos règles CSS :

1. Nous allons travailler principalement sur ce TD sur un fichier styles.css. Créer un fichier texte vide styles.css dans un nouveau répertoire css/. Nous déclarerons dans ce fichier des règles CSS ;

2. Copiez dans styles.css le style ci-dessus h3 { ... }.
Ouvrez la page index.html et remarquez que le style ne s'est pas appliqué, car nous n'avons pas encore lié le HTML avec le CSS ;

3. Dans le fichier index.html, ajoutez la ligne suivante dans l'en-tête du document HTML (dans la partie head) :

<link rel="stylesheet" type="text/css" href="css/styles.css">

Cette ligne permet de charger le fichier de style CSS styles.css et de l'appliquer à la page Web ;

4. Rouvrez la page index.html et notez que le style est désormais appliqué.

Nous allons vous présenter quelques propriétés CSS et la façon de concevoir des sélecteurs.

II-B - Les outils de développement sont vos amis

Pour la partie HTML, les outils de développement étaient déjà vos amis ; pour le CSS, ils sont promus au grade de « best-friend-forever ». Sélectionner un élément HTML avec les outils de développement ne permet pas seulement de voir les règles CSS appliquées à ce dernier, il permet aussi de les changer. Autant dire qu'il est conseillé d'abuser de cet outil pendant le TD pour bidouiller tout et n'importe quoi.

Exercice 2

1. Inspectez avec les outils de développement (F12) l'un des textes en rouge. Dans la colonne de droite, vous voyez les styles CSS appliqués à cette balise.

2. Désactivez la déclaration color:#d00 et remarquez le changement.

3. Remarquez que vos changements disparaissent quand vous rafraîchissez la page (F5). En effet, il faut les reporter dans la feuille de style pour les sauvegarder.

II-C - Commentaires

En CSS, seuls les commentaires avec /* et */ sont autorisés. Si vous utilisez // dans votre fichier styles.css vous allez avoir des problèmes (les règles CSS suivantes ne seront pas appliquées).

Exercice 3

1. Commentez la règle CSS h3 { ... } dans styles.css et remarquez que les titres <h3> ne sont plus en bleu ni en italique.

II-D - Quelques propriétés CSS

Comme dit précédemment, les blocs de déclarations comportent plusieurs déclarations de la forme proprieteCSS:valeur;. Nous présentons ici quelques exemples de propriétés CSS et de valeurs associées.

II-D-1 - Couleurs

Les couleurs peuvent s'utiliser sur plusieurs attributs d'un élément HTML :

- la couleur du texte : color:red; ;

- la couleur du fond : background-color:blue; ;

- la couleur de la bordure : border-color:yellow;…

Les 16 mots clés suivants peuvent être utilisés pour définir une couleur : aqua, gray, navy, silver, black, green, olive, teal, blue, lime, purple, white, fuchsia, maroon, red, yellow. Ils ont été choisis pour désigner 16 couleurs bien réparties comme le montre le diagramme suivant :

Le CSS3 les a complétés par 147 mots-clés de couleurs que vous pouvez retrouver à l'adresse http://www.w3.org/TR/css3-color/#svg-color.

Vous pouvez être plus précis et accéder aux 16 millions de couleurs que peut afficher un écran en donnant les valeurs R, V et B en hexadécimal des composantes Rouge, Vert et Bleu respectivement de la couleur. Cela s'écrit avec le format #RRVVBB (ou #RVB qui est un raccourci). Par exemple :

- #000000 est noir ;

- #FFFFFF est blanc ;

- #F00, qui est un raccourci pour #FF0000, est rouge ;

- #FF00FF est rose, que l'on peut aussi accéder avec le mot clé pink.

Remarque : vous pouvez utiliser le site Web https://www.webpagefx.com/web-design/color-picker/ pour trouver facilement le code #RRVVBB de n'importe quelle couleur.

II-D-2 - Dimensions

Certains éléments peuvent avoir une taille définie par CSS, d'autres épousent la place minimale nécessaire à leur rendu.

L'unité absolue de mesure la plus utilisée est le « pixel CSS » px. Cette unité correspond souvent avec les pixels physiques de l'écran, mais avec certaines subtilités :

1. Les navigateurs actuels permettent de zoomer, ce qui a pour effet d'afficher un « pixel CSS » sur plusieurs pixels ;

2. Certains médias comme l'imprimante ne disposent pas de pixels ; le pixel CSS est alors défini comme une échelle permettant une bonne lisibilité sur le média.

Les dimensions sont utilisées sur différentes parties d'un élément. Par exemple, les propriétés CSS width et height permettent de forcer respectivement la largeur et la hauteur d'un élément (ici les balises <img>) :

1. img {

2. width:50px;

3. height:100px;

4. }

On peut aussi donner des dimensions relatives en pourcentages ; width:50% va diminuer de moitié la largeur par rapport à celle qui aurait été calculée normalement.

Référence : pour plus de détails sur les unités disponibles http://www.w3.org/TR/css3-values/#absolute-lengths

II-D-3 - Fontes

Nous allons lister ici les propriétés les plus utilisées sur les fontes :

1. font-size : cette propriété permet de définir la taille de la police. Exemple :

font-size:12px;

2. font-weight : cette propriété permet de passer en mode gras. Exemple :

font-weight:bold;

3. font-style : cette propriété permet de définir le style de la fonte (i.e. italique ou non). Exemple :

font-style:italic;

4. font-family : cette propriété permet de choisir la fonte que vous souhaitez utiliser. Exemple :

font-family: "Lucida Sans Unicode", "Arial", "sans-serif";

Important : les deux dernières fontes précisées par la règle sont des fontes de secours (fallback) : elles seront utilisées si et seulement si les précédentes ne sont pas disponibles sur le navigateur. Quelques fontes classiques sont répertoriées sur http://www.w3schools.com/cssref/css_websafe_fonts.asp.

Importer de nouvelles fontes : vous pouvez associer à votre page Web de nouvelles fontes à l'aide de la règle @font-face. Exemple :

1. @font-face {

2. font-family: myFontName;

3. src: url(path/to/font/font.otf);

4. }

Si vous souhaitez en savoir plus, allez sur https://developer.mozilla.org/fr/docs/Web/CSS/@font-face. Voici deux sites pratiques pour télécharger de nouvelles fontes : http://www.1001fonts.com et http://www.fontsquirrel.com.

Référence : http://www.w3.org/TR/CSS21/fonts.html et http://www.w3.org/TR/css-fonts-3/.

II-D-4 - Textes

Nous allons lister ici les propriétés les plus utilisées concernant l'affichage des paragraphes de texte :

1. text-align : cette propriété affecte l'alignement des lignes de texte. Exemple :

text-align:center; /* ou left, right, justify */

Pour rappel, un paragraphe justifié est un paragraphe où les lignes s'arrêtent à la marge à droite et à gauche ;

2. line-height : cette propriété permet d'espacer verticalement les lignes de texte. Exemple :

line-height:150%;

3. text-indent : cette propriété indente la première ligne du texte, c'est-à-dire qu'elle la décale horizontalement. Exemple :

text-indent:12px;

Si l'on donne un pourcentage comme valeur de text-indent, celui-ci est compris comme un pourcentage de la largeur de l'élément parent.

II-D-5 - Exercices

1. Couleurs : le fond de notre page est tout blanc par défaut. Nous allons changer cela en donnant au <body> la couleur qu'a choisie le graphiste/Web-designer : #838892.

2. Dimensions : plusieurs études (cf. 1 et 2 ) suggèrent que des lignes trop longues ou trop courtes nuisent gravement à la lisibilité d'un site. Pour traiter grossièrement le problème, limitez la largeur de l'élément <body> à 600px.

3. Les titres des sections doivent avoir leur texte centré.

4. Le texte doit être aéré : utiliser une hauteur de ligne de 150%.

5. Chaque paragraphe doit être indenté de 5px.

6. Allez chercher une fonte de votre choix sur http://www.fontsquirrel.com. Liez-la à votre document avec la règle @font-face. Appliquez-la aux titres de section <h2> en n'oubliant pas de mettre des fontes en fallback (fonte de secours).
Attention : ne mettez pas d'espace dans le nom de votre fonte, ou sinon entourez-la avec des guillemets.

7. Le CSS est un standard au même titre que le HTML. Testez la conformité de votre fichier CSS avec le validateur https://jigsaw.w3.org/css-validator.

II-E - Les sélecteurs CSS de base

Les sélecteurs CSS permettent de préciser les éléments qui vont être impactés par la règle CSS. Ils sont aussi utilisés sur d'autres problématiques du développement Web que nous verrons l'année prochaine. Bref vous en aurez au partiel, c'est sûr.

Comme vous le savez depuis le TD1 HTML une balise peut prendre des attributs. Deux attributs sont très importants pour les règles CSS : l'identifiant id et la classe class d'une balise.

Par exemple :

<h2 id="monidentifiant" class="skill feature">...</h2>

Ce code HTML déclare une balise HTML <h2> avec comme identifiant unique monidentifiant et ayant deux classes : skill et feature. Attention, un identifiant est unique pour toute la page HTML. Un élément peut avoir plusieurs classes comme dans l'exemple précédent et ces classes sont faites pour être attribuées à de multiples éléments de la page.

Les classes, identifiant et le type des balises permettent de construire 95 % des sélecteurs CSS de base. Voyons la syntaxe pour les utiliser.

II-E-1 - Les sélecteurs de balises

Il s'agit juste d'utiliser le nom de la balise (a, p, img…) sans autre décorateur. Si on veut donner la couleur rose à tous les liens d'une page, il faut écrire

1. a {

2. color: purple ;

3. }

II-E-2 - Les sélecteurs d'identifiant

Le décorateur associé à l'identifiant est le caractère '#'. Si on veut donner une largeur de 100px à l'unique balise d'identifiant monidentifiant, il faut écrire

1. #monidentifiant {

2. width: 100px;

3. }

II-E-3 - Les sélecteurs de classes

Le décorateur associé aux classes est le caractère .. Si on veut donner une hauteur de 200px à tous les éléments qui ont la classe skill, il faut écrire

1. .skill {

2. height: 200px;

3. }

II-E-4 - Exercices

Tout va principalement se passer dans styles.css.

1. Conformément à la maquette du designer target.png, il faut alterner comme couleur de fond pour les titres des sections les valeurs #5BBDBF et #FF5850. Pour cela il nous faudra ajouter une classe « pair » et « impair » aux éléments h2 et h3 et leur associer le style adéquat dans styles.css.

2. L'image beware.jpg a du style, mais elle prend un peu trop de place : limitez sa hauteur à 300px.
Attention : la limite de 300px doit s'appliquer seulement à l'image beware.jpg et pas à chuck-jeune.jpg. Comment faire ?

3. On veut mettre en avant les innombrables arts martiaux que maîtrise Chuck Norris. Pour ce faire :

1. On va entourer chacun de ces arts martiaux (Taekwondo, Ju-Jitsu…) d'une balise <span> avec la classe skill dans le fichier HTML ;

2. D'un autre côté, il faut créer dans le CSS la règle qui associe à tous les éléments ayant la classe skill la mise en page suivante : texte en rouge et en italique (ou ce qui vous fait plaisir).

4. Testez la conformité de votre fichier CSS avec le validateur https://jigsaw.w3.org/css-validator.

II-F - Remarques finales

II-F-1 - Le CSS et HTML : des rôles bien distincts et complémentaires

Il y a une séparation claire entre les rôles du HTML (contenu avec des balises pour donner du sens ) et des CSS (présentation/mise en page). Ce choix n'est pas évident au premier abord : par exemple votre document « Word » ne sépare pas la présentation du contenu. Mais cette séparation est indispensable et très puissante :

- elle permet de réutiliser une présentation d'une page à l'autre. Par exemple quand lemonde.fr publie un nouvel article, il ne refait pas le style expressément pour ce dernier: il s'agit d'un nouveau document HTML partageant le même CSS que les articles précédents ;

- elle permet de refaire un site Web en se concentrant sur les CSS sans (trop) toucher au HTML ;

- elle permet de changer la présentation d'un document suivant s'il est destiné à l'impression ou à être visualisé avec un navigateur.

III - TD2 - HTML / CSS avancé 1/2 structuration et stylisation, block & inline, combinaison de sélecteurs

La spécification HTML5 propose différentes manières de classer les balises/éléments selon leurs caractéristiques (Liste des balises par catégorie). Nous allons ici nous intéresser à deux types spécifiques :

- les balises de structure : elles permettent de délimiter l'articulation logique de la page web en la découpant en différentes sections. Nous y consacrerons la prochaine section ;

- les balises au niveau du texte : elles apportent une précision sur la sémantique d'une partie du texte (mise en avant d'une partie de texte importante, ajout d'un type exposant, time…).
Voici quelques exemples de balises au niveau du texte :

- <sup> : un exposant ;

- <time> : mise en valeur d'une date ;

- <em> : emphase sur du texte ;

- <strong> : on ajoute de l'importance à un texte ;

- <br> : saut de ligne.

Ces balises au niveau du texte sont souvent naturellement liées à un style associé (les <em> seront stylisées par une mise en italique, les <sup> en exposants…). Les navigateurs se chargent d'ajouter pour nous certains styles par défaut très courants.

Il existe encore beaucoup d'autres balises HTML. Cela dit, il arrive qu'aucune ne corresponde à ce que l'on veut exprimer (lors d'une construction de layout par exemple). Deux balises neutres ont été ajoutées pour ces constructions :

- au niveau du texte <span> : cette balise est neutre, sans signification particulière. Son utilisation permet entre autres de créer des règles de formatage spécifiques du contenu textuel (par exemple lorsque nous avons ajouté la class skill) ;

- balise de structure <div> : cette balise est neutre, son utilisation permet de distinguer une section qui ne revêt aucune signification particulière. Contrairement au span elle provoque un saut de ligne.

III-A - Structuration de la page

Vous allez d'abord structurer logiquement le contenu du site. Voici un template HTML (modèle HTML en français) d'une structuration classique de page Web.

1. <!DOCTYPE html>

2. <html>

3. <head>...</head>

4. <body>

5. <header>

6. ...

7. <nav>...</nav>

8. </header>

9. <main>

10. <article>...</article>

11. <article>...</article>

12. <aside>...</aside>

13. </main>

14. <footer>

15. ...

16. </footer>

17. </body>

18. </html>

Pour fixer les idées, voici un aperçu d'une mise en page correspondant à l'exemple précédent :

Par défaut, ces balises découpent la page web en sections horizontales qu'elles occupent en entier (du bord gauche au bord droit de la section). Par défaut, les balises de structure s'empilent verticalement, car elles ne peuvent pas partager une même section horizontale (donc nous devrons appliquer un style particulier pour <aside>).

Expliquons le rôle de quelques balises de structure :

- <header> : section contenant l'en-tête affiché de la page (à ne pas confondre avec <head>, qui sont les méta-informations de la page Web) ;

- <nav> : section contenant une série de liens hypertextes pour la navigation sur le site ;

- <main> : section principale de la page, celle qui contient le contenu spécifique à cette page. Cette balise ne peut être présente dans une autre balise présentée ici à l'exception de <div> ;

- <article> : section contenant un document « autosuffisant », i.e. qui peut être séparé du reste de la page et gardera cependant tout son sens. Une page peut contenir plusieurs articles, dans le cas d'un blog par exemple, de commentaires, d'une page listant les publications récentes… ;

- <aside> : section contenant du matériel périphérique au contenu principal. Cela peut-être par ex. une série de liens spécifiques au document principal, un bandeau de publicités… ;

- <footer> : section contenant le pied de page ;

- <section> : une section non spécifique, ou une sous-section d'un article, d'un menu… Doit typiquement commencer par un titre <hX> ;

- <figure> : une illustration (au sens large) « autosuffisante » illustrant le document principal ou un article, et qui doit pouvoir être placée librement dans la page sans en altérer le déroulement (par ex. dans le texte, dans un appendice…) ;

- <h1>- <h6> : titres de section ;

- <blockquote> : une citation avec en particulier <cite> pour la référence de la citation ;

- <p> : paragraphes de texte ;

- <address> : coordonnées de contact de l'auteur. Il ne peut y avoir qu'un bloc <address> par article et un pour le restant de la page.

Exercice 1

1. Ajoutez une balise <header>. Son contenu sera la citation du TD1 et une barre de navigation <nav> vide pour l'instant,

2. Ajoutez une balise <main>, une balise <article> et une balise <aside> comme dans le template précédent. Mettez l'ancien contenu de la page dans <article> sauf les deux dernières sections (« Les sites amis » et « Le Top 10 des derniers facts proposés ») qui vont dans <aside>.

3. Ajoutez une balise <footer> qui contient le lien vers le retour au début du site.

4. Ajoutez dans la balise <nav> deux liens dans une structure de liste contenant : un lien nommé « Accueil » qui pointe sur la page courante index.html et un nommé « Contact » qui pointe vers une future page contact.html.

5. Validez votre page HTML sur le validateur https://html5.validator.nu/. (Faites-le systématiquement sans qu'on vous le demande :-) ).

Exercice 2

1. Construire une page contact.html au même niveau que index.html. Elle doit contenir le même template HTML (patron HTML) que index.html. En particulier :

1. Elle reprend les mêmes <header> et <footer> que index.html ;

2. Elle appelle la même feuille de style CSS ;

3. Elle définit son propre <title>.

2. Dans la partie <main> de la page, ajoutez

1. Un titre Adresse ;

2. L'image contact.jpg pour illustrer que nous sommes bien à l'écoute ;

3. Ajoutez l'adresse avec la balise <address> contenant :
IUT de Montpellier Sète
99 avenue d'Occitanie
34296 Montpellier Cedex 5
Email : chuckn@yopmail.com ;

3. Validez votre page HTML.

À ce point, le travail de division du site n'a pas encore de résultat visuel marquant. C'est avant tout un travail de structuration logique qui permet au navigateur, ou à un moteur de recherche, de mieux comprendre votre page web. Nous verrons comment changer la mise en page globale dans les TD suivants. Pour la suite du TD, nous allons ajouter du style aux éléments de la page courante.

III-B - Règles de composition des CSS

Rappelons qu'une règle CSS est composée d'un sélecteur CSS et d'un bloc de déclaration composé de plusieurs paires propriété CSS/valeur. Un sélecteur CSS indique à quels éléments HTML s'applique le style.

À partir des sélecteurs de base (de balise, de classe et d'identifiant) présentés dans le TD précédent, il est possible de créer des sélecteurs complexes. Par exemple, nous allons voir comment sélectionner les <div> ayant la classe toto et qui sont fils d'un élément d'identifiant titi.

Nous exposons dans cette section les principaux moyens de composer un sélecteur CSS complexe.

III-B-1 - Regroupement

La première façon de composer des sélecteurs est le regroupement. Les trois règles suivantes :

1. h1 {color: red}

2. h2 {color: red}

3. h3 {color: red}

peuvent s'écrire :

h1,h2,h3 {color: red}

III-B-2 - Combinaison

Pour préciser un élément, il suffit de concaténer (sans espace entre eux) plusieurs sélecteurs de base (balise, classe ou identifiant). Par exemple :

div.toto

correspond au sélecteur des <div> qui ont la classe toto. Ou encore

.titi.toto

correspond aux éléments qui ont la classe toto ET titi.

III-B-3 - Descendance

On veut pouvoir limiter une règle CSS à une sous-partie de l'arborescence HTML, pour cela on utilise la relation de descendance.

III-B-3-a - Descendance directe (enfant)

La relation de descendance directe est signifiée par le caractère >. Par exemple,

#titi > .toto

sélectionne les éléments de la classe toto qui sont enfants (direct) de l'élément d'identifiant titi.

III-B-3-b - Descendance indirecte (descendant)

La relation de descendance indirecte est signifiée par le caractère d'espacement. Par exemple,

#titi .toto

signifie que les éléments qui ont la classe toto qui sont descendants (directs ou indirects) de l'élément d'identifiant titi. Donc la différence avec > est qu'on n'est plus limité aux enfants puisqu'on intègre aussi les petits-enfants, arrière-petits-enfants…

Exercice 3

Nous allons vous faire jouer à un jeu qui permet de vérifier votre compréhension des sélecteurs. Le jeu consiste à écrire le sélecteur qui répond à la consigne donnée. Les balises de ce jeu (<plate>, <bento>…) ne sont pas des balises HTML5, mais le principe des sélecteurs reste le même. La partie de droite de la page est là pour vous aider.

Allez sur http://flukeout.github.io/ et passez les niveaux de 1 à 11 et le niveau 14.

Notes

- Vous pouvez passer directement à l'exercice que vous voulez en rentrant le numéro de l'exercice à la place du sélecteur.

III-B-4 - Pseudoclasses

Une pseudoclasse est un moyen d'indiquer un état particulier de l'élément qui doit être sélectionné. Voici quelques exemples :

1. /* Style des liens <a> n'ayant pas été visités */

2. a:link {color: yellow;}

3. /* Style des liens <a> ayant été visités */

4. a:visited {color: purple;}

5. /* Style des liens <a> si la souris les survole */

6. a:hover {text-decoration: underline;}

8. /* un paragraphe qui est le premier fils de son père */

9. p:first-child {color:red;}

10. /* le troisième paragraphe */

11. p:nth-child(3) {color: green;}

12. /* les textes des éléments li impairs seront verts et les pairs rouges */

13. li:nth-child(odd) {color: green;}

14. li:nth-child(even) {color: red;}

Exercice 4

1. Enlevez le fait que (tous) les liens soient soulignés. Pour cela, allez vous renseigner sur la propriété text-decoration.

2. Faites en sorte que les liens <a> visités apparaissent en bleu plus léger #0088FF.

3. Lorsque la souris passe sur un lien, lui donner la couleur orange.

III-C - Tableaux

L'élément <table> correspond à une structuration récurrente, qui sert à représenter un ensemble de données sous forme de colonnes et de lignes.

III-C-1 - Les éléments <table>, <tr>, et <td>

L'élément <table> contient la table. La table est composée de lignes (l'élément <tr>) contenant des cellules (élément <td>).

III-C-2 - L'élément <th>

Dans l'arborescence du document, un élément <th> doit être le fils d'un élément <tr>. Il représente une cellule en-tête (le titre d'une colonne ou le titre d'une ligne du tableau). Il peut être utilisé à la place d'un élément <td>.

Voici un squelette de table :

1. <table>

2. <tr>

3. <th>Caract1</th>

4. <th>Caract2</th>

5. <th>Caract3</th>

6. <th>Caract4</th>

7. </tr>

8. <tr>

9. <td>Val1_1</td>

10. <td>Val1_2</td>

11. <td>Val1_3</td>

12. <td>Val1_4</td>

13. </tr>

14. <tr>

15. <td>Val2_1</td>

16. <td>Val2_2</td>

17. <td>Val2_3</td>

18. <td>Val2_4</td>

19. </tr>

20. ...

21. </table>

Exercice 5

1. Créez une table avec les sept noms de colonnes suivants : Acteurs, Karaté, Taekwondo, Judo, Chun Kuk Do, Tangsudo, Ju-jitsu. Cette table doit se trouver en bas de la page index.html, dans la partie complémentaire <aside>. Les noms doivent être contenus dans des balises <span>.

2. Ajoutez la classe skill aux <span> correspondant à des noms d'arts martiaux.

3. Ajoutez les six lignes suivantes (les nombres correspondent à la valeur de l'acteur dans l'art martial correspondant) :

1. Chuck Norris, 5, 5, 5, 5, 5, 5

2. Steven Seagal, 3, 5, 3, 2, 3, 5

3. Bruce Lee, 5, 3, 3, 3, 4, 3

4. Jean-Claude Van Damne, 5, 3, 3, 3, 4, 3

5. Bolo Yeung, 2, 4, 4, 2, 5, 3

6. Dolph Lundgren, 2, 4, 4, 2, 5, 3

4. Testez la conformité de votre site.

III-C-3 - Les éléments <thead> et <tbody>

Les éléments <thead> et <tbody> servent à définir plus explicitement la structure de notre table :

- <thead> : la définition des colonnes (Acteurs, Karaté…)

- <tbody> : le corps du tableau, c'est-à-dire les lignes (nos héros et leurs niveaux de compétence).

Exercice 6

1. Ajoutez ces balises pour englober ces deux parties (en n'oubliant pas leurs balises fermantes </thead> et </tbody>)

2. Testez la conformité de votre site.

À ce stade la structure de votre table reflète le sens que vous vouliez y mettre. Voyons maintenant comment la styliser.

Exercice 7

1. Définissez une couleur de fond #00AAFF pour la partie en-tête thead du tableau.

2. Donnez la couleur violette #640051 au texte des skills dans le tableau sans modifier le style des éléments ayant la classe skill dans les paragraphes (voir la section sur les sélecteurs).

3. Ajoutez une règle pour que le fond d'une ligne (row) sur deux du corps de la table apparaisse en blanc et l'autre avec la couleur #CCC SANS modifier de quelque façon le HTML (voir la section sur les sélecteurs).
Attention : la ligne du <thead> doit rester bleue.

III-C-4 - Les attributs rowspan et colspan

Les balises <th> et <td> peuvent prendre des attributs rowspan et/ou colspan, qui permettent d'étirer la cellule courante pour prendre la place de plusieurs cellules :

- rowspan permet d'étirer la cellule sur plusieurs lignes (i.e. rows) ;

- colspan permet d'étirer la cellule sur plusieurs colonnes.

Exercice 8

Il apparaît que Chuck Norris est toujours au top (niveau 5) dans tous les arts martiaux.

1. Faites une cellule qui prend toute la largeur de manière à mettre cela encore plus en exergue.

2. Mettez le 5 de Chuck en avant avec une balise <strong> pour bien montrer qui est le patron.

3. (Optionnel) Si vous souhaitez centrer le 5, allez voir dans la suite du TD comment faire.

III-D - Le modèle de boîte

Comme vous l'avez vu précédemment, les balises de type structure définissent des boîtes. Ces boîtes disposent toutes des propriétés CSS suivantes :

- margin : marge à l'extérieur de la bordure, entre cette boîte et la suivante, et/ou entre cette boîte et son parent. La zone couverte par la marge est de la même couleur que son parent ;

- border : bordure qui entoure le contenu. Cette propriété attend trois valeurs :

1. width, par ex. 1px,

2. style, par ex. solid, dotted, dashed…,

3. color, par ex. black.
Attention : un border n'a pas de style par défaut, donc lui donner une width ne suffit pas pour le voir ;

- padding : marge intérieure à la bordure, c'est-à-dire espacement entre le contenu et la bordure de la boîte. Le padding partage le même arrière-plan (background-color) que la boîte ;

- width : la largeur du contenu, i.e. de la boîte content ;

- height : la hauteur du contenu, i.e. de la boîte content

Par exemple le code suivant

1. .maboite {

2. padding:20px 50px 20px 50px;

3. border:5px solid green;

4. background-color:gold;

5. }

s'affiche comme ceci :

Exercice 9

1. Inspectez la boîte ci-dessus pour voir le style qui y est appliqué. Trouvez dans la partie Style des outils de développement le modèle de boîte (comme ci-dessous) et inspectez les quatre boîtes content, padding, border et margin pour les voir se dessiner à l'écran.

Il y a trois syntaxes différentes pour donner des valeurs au margin, au padding et au border :

- margin : t r b l; : si on donne quatre tailles t, r, b et l, alors t est associé à la valeur du haut (top), r est la valeur droite (right), b au bas (bottom) et l à la gauche (left) ;

- padding : v h; : si on ne donne que deux tailles v et h alors v est associé aux valeurs verticales et h horizontales. C'est donc équivalent à padding: v h v h; ;

- padding : a; : si on donne une seule valeur, elle sera associée aux quatre côtés de la boîte, comme si on avait écrit padding: a a a a;.

Exemples :

1. #titi {margin : 5px 0 4px 7px;}

2. /* Marges verticales (haute et basse) de 10px et horizontales de 5px */

3. div {margin: 10px 5px;}

4. /* Le padding dans toutes les directions est de 5px */

5. .toto {padding : 5px}

Note : on peut aussi préciser (péniblement) les valeurs unitaires des propriétés margin-top, margin-left, margin-bottom…

Exercice 10

1. Ajoutez du padding vertical de 10px aux titres de sections.

2. Ajoutez du margin vertical de 30px aux paragraphes.

3. Ajoutez du padding horizontal de 5px aux éléments ayant la class skill dans la table (mais pas aux éléments ayant la class skill dans les paragraphes).

4. Ajoutez une bordure aux titres <h3> de 1px, de style solid et de couleur #CCCCCC.

III-D-1 - Centrer horizontalement

Pour centrer le contenu d'une balise :

- si l'on veut centrer du texte (ou une balise au niveau du texte) dans une balise : text-align: center ;

- si le contenu est lui-même dans une balise de structure moins large que la balise parent : margin: auto sur la balise de structure.

Exercice 11

1. Centrez le body horizontalement.

2. Dans la table, centrez le texte des cellules, (le 5 de Chuck notamment est encore trop discret).

III-E - Les contenus flottants

La propriété float associée à un élément permet de faire flotter ce dernier complètement à gauche ou à droite de la ligne où il se trouve. Les valeurs de la propriété float sont left, right, none et inherit.

Exercice 12

1. Placez l'image de Chuck jeune à gauche du texte (comment faire un sélecteur uniquement pour cette balise ?).

2. Placez l'image beware beware_img à droite du texte.

Exercice 13

1. Ajoutez un nouveau paragraphe qui commence à la phrase « Spécialiste en arts martiaux… » de la section « L'enfance ».
Vous devez alors avoir le rendu suivant :

2. Nous souhaitons plutôt ce rendu :

Pour interdire à notre paragraphe d'avoir un élément flottant sur son côté gauche, ajoutez-lui la règle clear:left.
Note : on peut aussi interdire le côté droit avec clear:right et les deux en même temps avec clear:both.

III-F - Position

La propriété CSS position offre de nouvelles possibilités pour le positionnement des éléments. Ses valeurs sont :

- static : comportement normal (par défaut), l'élément est inséré normalement ;

- Relative : le reste de la page fait comme si l'élément était positionné « normalement ». De son côté, l'élément est positionné relativement à la position où il aurait dû être. On voit donc un espace où l'élément aurait dû être en position:static ;

- absolute : le reste de la page fait comme si l'élément n'existait pas. L'élément se positionne relativement à son plus proche ancêtre positionné (voir ci-dessous) ou sinon à <body> (si aucun ancêtre n'est positionné) ;

- fixed : le reste de la page fait comme si l'élément n'existait pas. L'élément se positionne relativement à la fenêtre d'affichage ; il paraît donc fixé lors d'un défilement de la page.

Un élément est dit positionné s'il a une position autre que static (qui est la valeur par défaut). Pour indiquer le décalage de position, on utilise les propriétés top, left, right et bottom. Par exemple, les propriétés

1. position:relative;

2. top:20px;

3. left:20px;

vont positionner un élément 20px plus à droite et en bas qu'il n'aurait dû l'être.

Référence : Mozilla Developer Network (MDN).

Exercice 14

1. Testez votre compréhension des propriétés position: relative;top:20px;left:20px; précédentes en les appliquant temporairement sur l'image chuck-jeune.jpg.

2. Ajoutez les icônes de réseaux sociaux facebook.png et twitter.png toujours positionnées en bas à droite de la fenêtre d'affichage l'une au-dessus de l'autre. Essayez aussi temporairement de les afficher tout en bas à droite du document.

IV - TD3 - HTML/CSS avancé 2/2 display et mise en page

IV-A - Ordre d'application des sélecteurs CSS

Comme vous vous en souvenez, les sélecteurs servent à sélectionner un ensemble de balises sur lesquelles on applique une règle CSS. Nous avons appris lors du TD1 les sélecteurs de base et lors du TD2 la combinaison de sélecteurs.

Plusieurs règles CSS peuvent porter sur un même élément HTML. Si ces règles peuvent coexister, elles sont toutes appliquées. Par exemple, si vous avez le code CSS suivant :

div    { background-color:blue; }
.skill { color:red; }

alors un <div class="skill"> aura les deux propriétés background-color:blue et color:red.

Mais il peut aussi arriver que ces dernières soient contradictoires. Par exemple, si vous avez le code CSS suivant, de quelle couleur sera le texte d'un <div> de classe skill ?

.skill { color:red; }
div    { color:blue; }

Pour régler ces conflits, le CSS définit une notion de priorité basée sur l'emplacement des règles CSS puis sur la spécificité des sélecteurs CSS. Dans l'exemple précédent, c'est la première règle qui prévaut comme nous le verrons dans la suite.

IV-A-1 - Différents emplacements

Il y a plusieurs emplacements possibles pour déclarer du style CSS :

1. Style externe : (conseillé) on peut utiliser un fichier de style externe et le lier au document HTML avec la balise <link> dans le <head> :

1. <html>

2. <head>

3. <link rel="stylesheet" type="text/css" href="css/styles.css">

4. </head>

5. <body> ... </body>

6. </html>

2. Style interne : (déconseillé) on peut inclure des règles CSS directement dans le <head> à l'aide de la balise <style> :

1. <html>

2. <head>

3. <style type="text/css">

4. p {font-size: 12pt; color: pink}

5. </style>

6. </head>

7. <body> ... </body>

8. </html>

3. Style inline : (fortement déconseillé) on peut inclure du style CSS directement dans une balise avec l'attribut style :

1. <p style="font-size: 12pt; color: fuchsia">

2. Aren't style sheets wonderful?

3. </p>

Attention à ne pas confondre le style inline avec le futur display:inline.

Enfin les navigateurs appliquent un style par défaut sur les éléments. Cela permet de ne pas avoir à définir à chaque fois les styles les plus classiques. On peut observer le style par défaut dans les outils de développement de Chrome : ce sont les règles de styles associées à user agent stylesheet.

Pour prendre de bonnes habitudes, on préférera les styles externes comme styles.css qui permettent une séparation plus claire entre les rôles du HTML (contenu avec des balises pour donner du sens) et du CSS (présentation/mise en page). Comme dit à la fin du TD 1 partie 2, cette séparation est indispensable et très puissante :

- elle permet de réutiliser une présentation d'une page à l'autre. Par exemple quand lemonde.fr publie un nouvel article, il ne refait pas le style expressément pour ce dernier: il s'agit d'un nouveau document HTML partageant le même CSS que les articles précédents ;

- elle permet de refaire un site Web en se concentrant sur les CSS sans (trop) toucher au HTML ;

- elle permet de changer la présentation d'un document suivant qu'il est destiné à l'impression ou à être visualisé avec un navigateur. Dans ce cas, on appliquera un style CSS différent selon le média.

IV-A-2 - Priorité des sélecteurs

Reprenons l'exemple précédent :

.skill { color:red; }
div    { color:blue; }

Afin de savoir la couleur qui sera appliquée sur les éléments <div class="skill">, des priorités sont définies sur les sélecteurs CSS. Dans l'idée, comme le sélecteur .skill est plus spécifique que le sélecteur div, on va appliquer en priorité la règle color:red;.

La priorité d'un sélecteur CSS est une valeur (a,b,c,d) définie comme suit :

- la valeur a code la priorité basée sur l'emplacement de la règle. Par ordre de priorité décroissante, nous avons

- a=2 pour les styles inline,

- a=1 pour les styles externes et internes,

- a=0 pour le style par défaut du navigateur ;

- b compte le nombre de sélecteurs d'identifiant (e.g. #id) ;

- c compte le nombre de sélecteurs de classe (e.g. .skill) ou pseudoclasses (:over,:visited…) ;

- d compte le nombre de sélecteurs de balise (e.g. div, span) ou de pseudoélements (e.g. ::first-letter, ::after) ;

- les opérateurs de combinaison et le sélecteur universel * ne contribuent pas à la priorité.

Pour revenir à l'exemple précédent, les règles ont donc comme priorité (en supposant qu'elles sont écrites dans un fichier de style externe) :

div    /* -> (1,0,0,1) (un sélecteur de balise div)   */
.skill /* -> (1,0,1,0) (un sélecteur de classe skill) */

IV-A-3 - L'ordre de priorité

Il reste maintenant à expliquer comment on classe les priorités (a,b,c,d). L'ordre sur les priorités est défini comme l'ordre du dictionnaire (ordre lexicographique) :

- on regarde d'abord la « première lettre » a. Si a est strictement plus grand alors la règle CSS est plus prioritaire. En cas d'égalité,

- on regarde la « deuxième lettre » b pour déterminer la priorité. Si b est strictement plus grand (et donc a égal) alors la règle CSS est plus prioritaire. En cas d'égalité sur a et b,

- on regarde la « troisième lettre » c. En cas d'égalité,

- on regarde la « quatrième lettre » d.

- en cas d'égalité absolue, la règle écrite en dernier est prioritaire.

Ce mécanisme de priorité s'appelle la cascade et correspond au C de CSS (Cascading Style Sheet).

Exemple : div.skill (priorité (1,0,1,1)) est plus prioritaire que div (priorité (1,0,0,1)) car on a égalité sur a et b mais c est plus grand pour div.skill.

Exercice 1

1. Dans un fichier texte ou sur papier, écrivez les priorités des sélecteurs suivants et classez-les du plus prioritaire au moins prioritaire. On suppose que toutes ces règles sont définies dans un fichier externe, donc a=1, et les valeurs recherchées commencent toujours par (1,...).

1. .titi span

2. div span

3. nav.titi .tata div div div div div

4. ul li div.skill

5. #id

6. div > a

7. div + a

Exercice 2

1. Quelle est la couleur du texte « Priorité CSS » dans les deux cas suivants ? Quelle règle de priorité CSS explique votre réponse ?

1. Le fichier styles.css contient p {color:blue;}, et le fichier index.html contient

1. <html>

2. <head>

3. <style type="text/css">

4. p {color: pink}

5. </style>

6. <link rel="stylesheet" type="text/css" href="css/styles.css">

7. </head>

8. <body><p style="color:red">Priorité CSS</p></body>

9. </html>

1. Le même fichier styles.css et le fichier index.html sans la règle inline

1. <html>

2. <head>

3. <style type="text/css">

4. p {color: pink}

5. </style>

6. <link rel="stylesheet" type="text/css" href="css/styles.css">

7. </head>

8. <body><p>Priorité CSS</p></body>

9. </html>

IV-B - La propriété display

Comme nous l'avons vu au TD précédent, à chaque balise correspondent quatre boîtes (content, padding, border et margin, voir la section sur le modèle de boîte du TD précédent).

La façon dont ces boîtes vont occuper l'espace est gérée par l'attribut display. Nous allons voir dans cette partie les trois valeurs principales de la propriété display.

IV-B-1 - display:block

Les éléments block sont des éléments :

- qui par défaut occupent toute la largeur ;

- qui provoquent un saut de ligne avant et après leur affichage (que l'on ait diminué sa largeur ou pas) ;

- dont on peut définir la taille en CSS via les propriétés height et width.

En pratique, on utilise des éléments de display block :

- dès que l'on veut expliciter l'agencement (layout) de certains éléments HTML d'une page. Par exemple nous voulons que l'en-tête (header) ait une hauteur de 200px, qu'un paragraphe prenne 50% de la largeur… ;

- dès qu'il est naturel de prendre toute la place par défaut (exemple un titre <h2>).

Notez que les balises de structure que l'on a présentées au TD précédentes au TD précédents au TD précédent au TD précédent ont display:block comme style par défaut dans le navigateur, ce qui explique qu'elles s'empilent verticalement comme on l'avait expliqué.

IV-B-2 - display:inline

Les éléments inline sont des éléments :

- qui prennent leur taille en fonction de leur contenu ;

- qui ne provoquent pas un saut de ligne, ils sont écrits comme du texte les uns à la suite des autres ;

- dont on ne peut pas définir la taille en css via les propriétés height et width.

En pratique, on utilise des éléments de display inline :

1. Dans du texte, pour ajouter de la sémantique sans interrompre la lecture du lecteur (mettre en exposant un nombre par <sup>, préciser l'importance d'une partie du texte par <strong>, associer un lien avec <a>) ;

2. Lorsque l'on veut positionner des éléments à la suite.

Puisque associé au texte (<strong>, <a>…), on trouve en majorité les éléments inline comme feuilles de l'arborescence du HTML.

Notez que au TD précédent ont display:inline comme style par défaut dans le navigateur, ce qui explique qu'elles se comportent comme du texte.

IV-B-3 - Exemple

Le code HTML suivant

1. <p style="display:block;">display:block</p>

2. <p style="display:inline;">display:inline</p>

3. ...

4. <p style="display:inline;">display:inline</p>

5. <p style="display:block;">display:block</p>

6. <p style="display:block;">display:block</p>

7. <p style="display:inline;">display:inline</p>

s'affiche comme suit :

On remarque bien que les display:block prennent toute la largeur, avec un saut de ligne avant et après. Tandis que les display:inline s'affichent les uns à la suite des autres comme le texte d'un paragraphe.

Note (optionnelle) - Règle d'inclusion des éléments inline et block du point de vue du HTML et du CSS :

Inclure des éléments block dans des éléments inline n'est pas conforme en HTML(1), mais cela l'est du point de vue du CSS. En modifiant la propriété display d'un élément, nous pouvons donc inclure des éléments block dans des éléments inline. Mais modifier sempiternellement le display naturel du HTML signifie que l'on n'a pas utilisé la bonne méthode (et que le code risque d'être incompréhensible). Nous nous imposons donc de respecter la règle HTML.

IV-B-4 - Exercices

Nous allons mettre en page le menu de navigation de notre site en mode block puis en mode inline.

Dans ce premier exercice, nous allons créer un menu dans un style block.

Exercice 3

1. Changez le menu de votre site par le suivant

1. <nav>

2. <div><a href="./index.html">Accueil</a></div>

3. <div><a href="./facts.html">Facts</a></div>

4. <div><a href="./news.html">Actualités</a></div>

5. <div><a href="./contact.html">Contact</a></div>

6. </nav>

2. Puisque <nav> est display:block par défaut (le vérifier sur Chrome si possible), il doit prendre toute la largeur. Inspectez donc votre <nav> pour voir si c'est le cas. Que constatez-vous ?
Explication : en fait, un élément display:block ne prend pas toute la largeur de <body> mais de son plus proche block parent. Ici, le père de <nav> est le bloc <header> et donc <nav> prend toute la largeur de <header>.
Le plus proche block parent s'appelle le containing block.

3. Puisque <nav> est de type block, nous pouvons fixer ses dimensions. Donnez-lui la largeur 75%. Que constatez-vous ?
Explication : la largeur d'une balise en display:block est relative à celle de son containing block (<header> ici). Inspectez <header> puis <nav> pour connaître leur largeur. Vérifiez qu'on a bien un rapport de 75%.

4. Pour centrer le <nav> dans son parent <header>, on va lui donner des marges horizontales auto (gardez les marges verticales à 0).
Rappel : nous avons vu dans le dernier TD comment centrer horizontalement. Pour centrer un display:block dont le containing block est plus large, il faut mettre les marges horizontales en auto : elles se règlent alors automatiquement pour compléter la largeur manquante entre le block courant et le containing block. Ceci n'est pas valable pour les marges verticales.

5. Ajoutez des règles CSS pour que les fils <div> enfants de <nav> aient une couleur de fond #5BBDBF.

6. Ajoutez une règle CSS pour que les éléments <a> descendants de <nav> aient la couleur de fond #c0d5c2.

Exercice 4

Nouvelle mise en page du menu en display:inline cette fois-ci.

1. Donnez aux <div> enfants de <nav> le display inline.

2. Vous constatez des espaces entre les entrées du menu, ces derniers sont dus aux espaces dans le HTML, qui sont affichés lorsque les éléments sont inline.
Une solution temporaire (en attendant display:flex) : pour supprimer les espaces, changez le code des <div> enfants de la balise <nav> en mettant des commentaires :

1. <nav>

2. <div><a href="./index.html">Accueil</a></div><!--

3. --><div><a href="./facts.html">Facts</a></div><!--

4. --><div><a href="./news.html">Actualités</a></div><!--

5. --><div><a href="./contact.html">Contact</a></div>

6. </nav>

3. Donnez au <nav> une hauteur de 50px (<nav> est block donc on peut lui donner une hauteur).

4. (Optionnel) Ajoutez du padding horizontal de 10px sur les éléments <a>.

5. (Optionnel) Ajoutez à ces mêmes éléments <a> une bordure sur la gauche de 2px de style solid et de couleur noire.

6. (Optionnel) Enlevez la bordure sur le premier de ces éléments.
Astuce : Ii faut utiliser une pseudoclasse vue au TD dernier.

IV-C - display:none

La valeur display:none enlève complètement un élément du rendu, sans laisser d'espace à l'endroit où il aurait dû être. Nous allons coder en exercice un menu déroulant.

IV-C-1 - Menu déroulant : Partie 1 - positionnement

Dans un premier temps, nous allons juste positionner les sous-menus en dessous de leur titre. Cet exercice met en pratique les position que nous avons vues au TD précédent et que nous vous rappelons.

IV-C-1-a - Position

La propriété CSS position offre de nouvelles possibilités pour le positionnement des éléments. Ses valeurs sont :

- static : comportement normal (par défaut), l'élément est inséré normalement ;

- Relative : le reste de la page fait comme si l'élément était positionné « normalement ». De son côté, l'élément est positionné relativement à la position où il aurait dû être. On voit donc un espace où l'élément aurait dû être en position:static ;

- absolute : le reste de la page fait comme si l'élément n'existait pas. L'élément se positionne relativement à son plus proche ancêtre positionné (voir ci-dessous) ou sinon à <body> (si aucun ancêtre n'est positionné) ;

- fixed : le reste de la page fait comme si l'élément n'existait pas. L'élément se positionne relativement à la fenêtre d'affichage ; il paraît donc fixé lors d'un défilement de la page.

Un élément est dit positionné s'il a une position autre que static (qui est la valeur par défaut). Pour indiquer le décalage de position, on utilise les propriétés top, left, right et bottom. Par exemple, les propriétés

1. position:relative;

2. top:20px;

3. left:20px;

vont positionner un élément 20px plus à droite et en bas qu'il n'aurait dû l'être.

Référence : Mozilla Developer Network (MDN)

Exercice 5

1. Ajoutez les sous-menus suivants aux éléments de la navigation. Ces sous-menus doivent être les petits frères des liens <a>, c.-à-d. qu'ils se placent juste après <a> tout en ayant le même père <div>.

1. pour l'ancre « Accueil »

1. <div class="submenu">

2. <div><a href="./one.html">one</a></div>

3. <div><a href="./two.html">two</a></div>

4. <div><a href="./three.html">three</a></div>

5. </div>

- pour l'ancre « Contact »

1. <div class="submenu">

2. <div><a href="./other.html">other</a></div>

3. <div><a href="./another.html">another</a></div>

4. </div>

1. Positionnons bien ces sous-menus : nous souhaitons que l'affichage du reste de la page fasse comme si ces sous-menus n'existaient pas. De plus, nous souhaitons que les sous-menus se placent sous leur titre de menu (le <div> parent « Accueil » ou « Contact »). Nous allons procéder en plusieurs étapes :

1. Quelle valeur de position correspond à ce comportement des sous-menus ?

2. Créez la règle CSS qui affecte cette valeur de position aux balises de classe submenu avec un décalage de 50px par rapport au haut et de 0px par rapport à la gauche ;

3. Les sous-menus ne sont pas encore bien placés, car ils se positionnent par rapport à la mauvaise balise. Quelle est cette balise par rapport à laquelle ils se sont positionnés ? Relisez la section sur les éléments dits positionnés pour confirmer votre impression ;

4. Nous souhaitons que nos sous-menus se placent par rapport à leur <div> parent. Il va donc falloir rendre ce <div> positionné, sans que cela ne le déplace ni que le reste de la page ne bouge.
Quelle valeur de position donnée aux <div> parents correspond à la description précédente ? Créez la règle CSS et le menu doit être enfin bien placé.

IV-C-2 - Menu déroulant : Partie 2 - affichage lors du survol

Nous allons maintenant nous servir de display:none pour afficher le sous-menu juste quand la souris est au-dessus du titre correspondant.

Exercice 6

1. Donnez aux sous-menus la couleur de fond #aca. Puis masquez-les par défaut en CSS.

2. Réaffichez le premier sous-menu (resp. le deuxième) avec display:block lorsque la souris passe au-dessus de « accueil » (resp. « contact ») en CSS.
Aide : en pratique, nous allons vérifier si le père <div> du sous-menu est survolé (:hover). Nous souhaitons donc un sélecteur CSS qui sélectionne les éléments de classe submenu qui sont fils d'un <div> survolé qui sont fils d'un <nav>.

À ce stade les sous-menus apparaissent bien lorsque l'on survole les éléments « Accueil » et « Contact ». Par contre il n'est pas possible d'entrer dans ces sous-menus. Nous consacrons toute la prochaine section au comportement display:flex qui va permettre d'améliorer l'apparence de notre menu et de remédier à ce problème d'accessibilité.

IV-D - display:flex

La valeur de display flex correspond au layout appellé FlexBox. Appliquée à un élément, la valeur de display flex va permettre de modifier la disposition de ses enfants. C'est donc une différence fondamentale avec les valeurs block et inline, qui eux avaient un impact directement sur l'élément lui-même.

Lorsque le display est flex, on peut par exemple :

- fixer le sens de rendu des enfants ;

- l'espace entre ces derniers ;

- leur centrage dans les différentes directions ;

- modifier leur ordre d'apparition…

Nous précisons par la suite quelques-unes de ces contraintes/propriétés.

IV-D-1 - La propriété flex-direction

La propriété flex-direction permet de préciser si les enfants vont se mettre en ligne ou en colonne et dans quel ordre. Ses valeurs sont :

- row : mise en ligne dans l'ordre classique de gauche à droite ;

- row-reverse : mise en ligne dans l'ordre inversé ;

- column : mise en colonne dans l'ordre classique de haut en bas ;

- column-reverse : mise en colonne dans l'ordre inversé.

L'attribut flex-direction s'appliquant aux enfants, il rentre en conflit avec les valeurs de display block ou inline de ces derniers. L'exercice suivant va nous permettre entre autres de savoir qui surcharge l'autre en cas de conflit.

Exercice 7

1. Donnez à l'élément <nav> la valeur de display flex.

2. Changez la valeur du display des <div> directement enfants de <nav> en block puis en inline. Que cela change-t-il ?

3. Donnez à l'élément <nav> le bloc de déclaration flex-direction:column, que cela change-t-il ?

4. Remettez la direction dans sa valeur par défaut, row.

5. Donnez une largeur fixe de 100px à tous les <div> descendants de <nav> pour que les menus et les sous-menus soient de la même largeur.

IV-D-2 - La propriété align-items

La propriété align-items permet de préciser comment les enfants vont venir occuper l'espace perpendiculairement à la direction donnée par flex-direction. Dans notre cas (flex-direction:row), align-items va donc nous permettre de préciser comment occuper l'espace vertical des <div> contenus dans le <nav>.

Ses valeurs sont :

- stretch : étirer pour prendre tout l'espace (valeur par défaut) ;

- center : centrer sans étirer ;

- baseline : aligne les lignes de base des éléments ;

- flex-start : alignement au début de l'axe perpendiculaire au sens de flex-direction ;

- flex-end : alignement à la fin de l'axe perpendiculaire.

Référence : Mozilla Developper Network

Exercice 8

Dans cet exercice, nous souhaitons que les <div> titres des menus soient centrés verticalement mais qu'ils prennent toute la hauteur.

1. Pour mieux voir le comportement, nous allons donner jusqu'à la fin de cet exercice une hauteur de 200px et la couleur de fond #FF00FF à <nav> et un décalage de 200px vers le bas de sous-menu.

2. Centrez les éléments enfants de <nav> à l'aide de la propriété align-items de <nav>. Que constatez-vous sur la hauteur des <div> et l'accessibilité des sous-menus avec la souris ? Est-ce que le <div> est centré verticalement ?
Note : si rien de ne se passe, utilisez l'inspecteur du navigateur pour comprendre ce qui est centré (la marge automatique placée sur le <nav> par exemple peut expliquer des choses).

3. Utilisez maintenant la valeur stretch. Que constatez-vous sur la hauteur des <div> et l'accessibilité des sous-menus avec la souris ? Est-ce que le <div> est centré verticalement ?

4. Faites en sorte que les sous-menus restent accessibles et que les textes « Accueil » et « Contact » soient centrés verticalement dans la barre de navigation. Pour ceci :

1. Faites en sorte que les <div> prennent toute la hauteur à l'aide des deux questions précédentes ;

2. Centrez verticalement les liens <a> au sein des <div> : il faut pour cela que les <div> enfants du <nav> soient flex, ce qui va permettre de centrer verticalement ses enfants <a> à l'aide de l'un des deux comportements vus précédemment.

5. Annulez (commentez) les propriétés temporaires de la question 1.

IV-D-3 - La propriété justify-content

Cette propriété permet de préciser la façon dont les enfants vont se disposer dans la direction donnée par flex-direction.

Les valeurs possibles sont :

- flex-start : au début de l'axe donné par flex-direction ;

- flex-end : à la fin de cet axe ;

- center : centré sur cet axe ;

- space-between : les éléments vont du début à la fin de l'axe en ajoutant des espaces entre les éléments ;

- space-around : les éléments vont du début à la fin de l'axe en ajoutant des espaces autour des éléments (donc entre les éléments et avant le premier et après le dernier).

Exercice 9

1. Justifiez les blocs de titres de menus non à gauche, mais à droite de <nav>, avec votre display favori. Colorez temporairement le fond de <nav> pour pouvoir vérifier que les titres se sont bien déplacés sur la droite de <nav>.

IV-D-4 - Flexbox, une valeur relativement récente

Si ces dernières possibilités offertes par flex semblent triviales, voire naturelles pour le néophyte, elles représentent en pratique une avancée majeure dans le monde du CSS. Avant flex, certaines propriétés relevaient d'une expertise véritable de l'intégrateur (exemple : le centrage vertical), ou étaient même confinées dans le domaine du fantasme (les justifications, le comportement des éléments sur l'espace restant, etc.).

Aujourd'hui flexbox est bien implémenté dans les différents navigateurs. Nous ne vous présenterons donc pas d'autres valeurs de display, car elles sont devenues inutiles (display:inline-block, display:table), ni encore moins des techniques d'alignement avec des float, qui ont toujours été techniquement merdiques.

Il y a d'autres propriétés intéressantes autour de flexbox, la référence suivante est très instructive : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

IV-E - Mise en page globale

IV-E-1 - En-tête

Exercice 10

1. Placez la citation et le menu de navigation sur la même ligne (la citation sera à gauche et le menu à sa droite) toujours avec votre display favori.

2. Repositionnez le menu pour qu'il soit en bas de la balise <header> (oui, encore avec flexBox).

3. Mettez un fond blanc au <header>.

4. Enlevez la couleur de fond des liens dans le menu.

IV-E-2 - Deux colonnes

Il est temps d'avoir un layout (aménagement de l'espace) pour notre site.

Exercice 11

1. Donnez au body la width de 900px.

2. Déplacez dans le HTML la section contenant la <table> dans <aside> si cela n'est pas déjà fait.

3. Utilisez la valeur de display flex sur la balise <main> pour que ses enfants <article> et <aside> s'affichent comme deux colonnes côte à côte.

4. Fixez la largeur de <article> à 60%, et celle de <aside> à 30%. Ce dernier élément aura une marge gauche de 10%.

5. Donnez à <aside> et à <article> la couleur de fond #CCC.

IV-F - Cacher ou enlever un élément du rendu

Il existe plusieurs façons de faire disparaître de l'écran un élément HTML avec un bloc de déclaration :

- display:none

- visibility:hidden

Nous avons déjà utilisé le bloc de déclaration display:none dans le menu pour cacher un sous-menu sans que ce dernier marque la page par son absence. Le bloc de déclaration visibility:hidden quant à lui laisse l'espace inoccupé à la place de l'élément.

Voyons un usage de visibility:hidden.

Exercice 12

Nous voulons marquer visuellement le menu sous la souris par une petite puce dans les <a> du menu.

<span class="puce">■</span>

Elle se positionne à gauche du texte, elle n'est visible que lorsque la souris survole le <div> contenant. Dans le cas contraire l'espace reste occupé (pour ne pas faire un effet de flicker/tremblement au survol du menu).

1. Ajoutez cette puce devant le texte des liens <a>.

2. Ajoutez visibility:hidden à l'élément de classe puce et la valeur visible sur le survol de la souris sur le <div> parent.

3. Supprimez la couleur de fond sur les balises <a> pour plus de lisibilité.

4. (Optionnel) Styliser les sous-menus.

IV-G - Fini !

Le mot de la fin à propos de flex ?

Moi je stoppe sur mon flex. Quand je sticks ma vibes le dancefloor se breaks et se fluxe dans la vibes. Gad Elmaleh

V - TD4 Les formulaires

V-A - Introduction

Nous allons ajouter un formulaire d'inscription à notre site de fans de Chuck Norris, en utilisant la balise <form>. Cette balise <form> nous permettra d'avoir des réponses à des questions des plus ouvertes (« Que voulez-vous dire à Chuck ? ») aux plus fermées (« Parmi ces trois choix quel est votre sport favori ? », « Quel est votre sexe ? »… ). Il y a beaucoup de types de questions, correspondant chacune à un type de balises <input> ou <textarea> que nous verrons par la suite.

V-B - La balise <form> et les balises <input>

Le cœur du formulaire est constitué par deux types de balises : <form> et <input>.

La balise <form> délimite le contenu du formulaire et renseigne plusieurs attributs nécessaires au fonctionnement du formulaire :

- method : nom de la méthode HTTP utilisée pour envoyer les données. Peut prendre pour valeur post ou get :

- get envoie les données comme composantes de l'URL du serveur et requiert par conséquent que :

1. Les données soient encodées pour être compatibles avec les spécifications URL,

2. L'ensemble des données du formulaire plus l'URL du serveur forment une chaîne de caractères de moins de 2000 caractères (limite imposée par certains navigateurs),

- post envoie les données dans le corps de la requête HTTP et ne présente pas la limitation de taille, elle est donc à privilégier ;

- action : URL du serveur où les données du formulaire doivent être envoyées.

La balise <input> permet de définir différents champs dans lesquels l'utilisateur peut entrer des données. Ces champs offrent plus ou moins de liberté d'expression selon le type utilisé. La balise <input> a pour attributs :

- type : définit l'apparence visuelle du champ et la nature des données qui peuvent y être renseignées ;

- value : la valeur envoyée au serveur. Si elle est déjà renseignée lors de la création du formulaire, elle fait office de valeur par défaut ;

- name : le nom que prendra la donnée envoyée au serveur. Si l'input a pour name « firstname » et pour valeur « Éric », dans le cas d'une method get l'URL lors la soumission du formulaire contiendra ‘firstname=Éric' et si la méthode est post ces valeurs seront transmises via les champs Form Data de la requête HTTP.

Afin de pouvoir être envoyé, votre formulaire doit obligatoirement contenir une balise <input> avec l'attribut type fixé à « submit ». Cette balise définit le bouton qui déclenchera l'envoi des données au serveur lorsque l'on cliquera dessus.

Nous allons voir comment est envoyée la valeur d'un <input> lorsque l'on soumet un formulaire.

Exercice 1

1. Créez une nouvelle page inscription.html au site de Chuck Norris. Cette page va contenir le formulaire d'inscription au fan-club de Chuck que nous allons construire dans ce TD.

2. Ajoutez à la page inscription.html le formulaire suivant :

1. <form action="sendToMySecondYearInIut.php" method="post">

2. <input name="uname" type="text" >

3. <input type="submit" value="Envoyer">

4. </form>

3. Sous Chrome relativement récent uniquement : affichez la page et ouvrez la console (F12) pour aller sur l'onglet ‘Réseau', cochez la case « Preserve log », donnez la valeur dupont au champ texte, puis cliquez sur le bouton « Envoyer » du formulaire. Vous devez voir une requête contenant sendToMySecondYearInIut dans la console. Cliquez sur cette ligne et cherchez la valeur dupont dans les détails de la transaction.

4. Donnez à l'attribut method du formulaire la valeur get. Cliquez sur le bouton « Envoyer » du formulaire, l'URL doit maintenant finir par « sendToMySecondYearInIut.php?uname=dupont ».

Note : il est normal que l'URL sendToMySecondYearInIut.php n'existe pas (le fameux code de retour HTTP 404 apparaît dans la console), puisque vous êtes en première année. Nous verrons en deuxième année dans le cours « Programmation Web - Côté Serveur » comment le serveur peut récupérer les données envoyées par notre formulaire et les traiter.

V-C - La balise <label>

Il serait bien de préciser à l'utilisateur à quoi notre champ <input> fait référence. La balise <label> permet d'associer la question sous-tendue (« Nom? ») à l'input. Cette balise comporte un attribut for qui doit prendre pour valeur celle de l'attribut id du champ auquel est associé le label (il faut donc penser à donner un id à notre <input>).

Exercice 2

1. Remplacez le code de votre champ <input> par le code suivant :

<label for="surname">Nom</label>
<input id="surname" name="uname" type="text">

2. Ajoutez au formulaire une entrée qui correspondra au prénom (calqué sur l'exemple précédent).

3. Validez ce dernier et vérifiez que vos deux champs sont bien présents dans l'URL du navigateur (l'URL doit finir par sendToMySecondYearInIut.php?uname=dupont&firstname=super et la method du formulaire doit toujours être get).

4. Les deux champs apparaissent l'un à la suite de l'autre. Avec quelle balise vue dans le TD précédent peut-on les englober pour qu'il y ait un saut de ligne entre les deux ?

V-D - Les principaux types de balises <input>

Il existe un assez grand nombre de types d'input :

- le type radio permet de ne sélectionner qu'une seule des options possibles ;

- le type checkbox (case à cocher) permet de sélectionner autant d'options que l'utilisateur le souhaite ;

- le type password masque automatiquement les caractères entrés.

- les types email, URL, tel, date, time et number, etc. permettent d'adapter le clavier virtuel quand la page est affichée sur un smartphone. Suivant le navigateur, une présentation différente peut être associée. Des validateurs sont associés à ces champs (nous le verrons plus loin), une valeur de champ email doit par exemple contenir un « @ ».

Exercice 3

À l'aide de w3schools, ajoutez dans le formulaire les <input> libellés :

1. « Sexe » avec les deux valeurs que vous connaissez ;

2. « Date de naissance » avec le type d'input date ;

3. « Mot de passe » avec le type d'input password ;

4. « Email » avec le type d'input de type… email ;

5. « Niveau en karaté » avec le type d'input number allant de 0 à 5 ;

6. « Niveau d'engagement » avec un choix parmi trois valeurs libellées « Basique (5 €) », “Gold (15 €) » et « Tatane in your face (50 €) » ;

7. « J'ai bien lu les clauses que je n'ai pas lues » associé à une case à cocher ;

8. Vérifiez par envoi du formulaire que tous les champs sont bien renseignés, on rappelle que c'est l'attribut name de l'input qui est utilisé ;

9. Faites en sorte qu'il y ait un saut de ligne entre chaque <input> (comme dans le dernier exercice de la section précédente).

Notes

- Certains de ces inputs sont issus de la norme HTML5. De fait leur adoption au sein des navigateurs n'est pas uniforme. Les développeurs web peuvent être amenés à demander la nature du parc informatique cible du site web qu'ils doivent implémenter (en clair ils demandent : « quelle est la version d'Internet Explorer encore en cours sur votre parc ? »). Le site caniuse.com permet ensuite de savoir si nous pouvons utiliser tel ou tel aspect pour la réalisation d'un site. Les types date et time par exemple sont plus ou moins bien supportés par les navigateurs. Le type number l'est un peu plus. Vous pouvez constater quelques différences d'apparence dans votre formulaire suivant que vous êtes sur Chrome, Firefox, Internet Explorer ou Edge.

- À propos du mot de passe, remarquez que ce dernier apparaît en clair dans l'URL si vous êtes en get lors de l'envoi via à sendToMySecondYearInIut.php. Définitivement donc, un envoi avec post doit être privilégié, même si cela n'augmente pas vraiment la sécurité puisque le mot de passe transite toujours en clair sur le réseau (utilisez l'onglet Réseau comme dans l'exercice 1 pour le voir).

V-E - La balise <select>

Voyons maintenant un autre élément important d'un formulaire, correspondant à la balise <select>. Il permet de choisir parmi un ensemble de valeurs présentées par un menu déroulant. Tout comme <input>, cet élément peut aussi être libellé via un <label>. La liste déroulante permet de base de ne sélectionner qu'une option. Plusieurs options peuvent être sélectionnées si l'attribut multiple est ajouté à la balise <select>. Des groupes de choix peuvent être proposés avec la balise <optgroup>.

Exercice 4

À l'aide de developer.mozilla.org, ajoutez dans le formulaire les <input> libellés :

1. Ajoutez un <select> libellé « Pays d'origine » qui prend comme valeur de pays U.S.A , France, Chine et Viêt Nam, les values associées ne doivent pas dépendre de la langue du formulaire (la value associée à France doit être fr par exemple). L'utilisateur ne peut pas sélectionner plusieurs valeurs, le pays sélectionné par défaut est la France (indépendamment de l'ordre des balises <option> dans le HTML) ;

2. Ajoutez à la suite de ce champ un autre sélecteur libellé « Arts-martiaux préférés ». Les valeurs sont « Kung fu » , « Karaté » et « Full-contact ». L'utilisateur peut sélectionner plusieurs valeurs.

V-F - La balise <textarea>

La balise <textarea> permet de proposer une grande zone de texte pour que l'utilisateur puisse s'exprimer.

Exercice 5

1. Ajoutez un champ à votre formulaire libellé « Message pour Chuck » associé à un <textarea> sur lequel l'utilisateur peut s'épancher.

V-G - La balise <fieldset>

La balise <fieldset> permet de regrouper visuellement différents champs <input>.

Exercice 6

À l'aide de cette page, regroupez les champs sur ces trois grands axes suivants :

- « Informations personnelles » (contenant « Nom », « Prénom », « Email », etc.) ;

- « Les sports de combat » (contenant « Sport de combat préféré » et « Niveau en karaté ») ;

- « Inscription » (contenant « Message personnel à Chuck », « Mot de passe », la coche « J'ai bien lu.. », « Niveau d'engagement », etc.).

V-H - Ergonomie et convivialité

V-H-1 - Navigation

Pour les utilisateurs avancés, la navigation à l'aide de la touche « tabulation » permet de parcourir très vite le formulaire. L'attribut « autofocus » permet de spécifier au navigateur quel élément du formulaire doit avoir le focus quand la page est chargée. L'attribut « tabindex » permet de spécifier l'ordre dans lequel les éléments sont parcourus en appuyant sur « tabulation ».

Exercice 7

- Vérifiez que vous pouvez accéder à tous les champs avec la touche tabulation. Modifiez l'ordre de tabulation avec la propriété « tabindex ».

V-H-2 - Convivialité

Quelques attributs permettent d'améliorer la convivialité des champs de votre formulaire :

- placeholder : permet d'afficher une ligne de texte dans le champ qui disparaît dès lors que l'utilisateur tape une information. Cela permet de donner à l'utilisateur des renseignements sur le contenu attendu. À utiliser impérativement avec les champs pour lesquels vous avez spécifié un « pattern », sous peine de causer une extrême frustration à l'utilisateur. Vous devez alors utiliser l'attribut placeholder pour spécifier le format attendu, les caractères interdits/autorisés, etc.
ex. : placeholder="Entrez votre nom ici."

- checked / selected : pour les types « radio » et « checkbox », et pour <option> respectivement. Cet attribut permet de spécifier que l'option en question est sélectionnée/cochée par défaut. Utile quand vous savez que l'une des options sera utilisée beaucoup plus fréquemment que les autres. Vous épargnez alors du temps à l'utilisateur.

Exercice 8

1. Ajoutez un placeholder de valeur « yourmail@domain.com » au champ Email.

2. Ajoutez un attribut placeholder dans le <textarea> avec le texte suivant « Un inscrit sera tiré au sort, et verra son message transmis à Chuck Norris. »

3. Faites en sorte que le pays sélectionné par défaut dans « Pays d'origine » soit la France (et cela indépendamment de l'ordre des balises <option> dans le HTML).

Note : il existe depuis peu un pseudo-attribut css ::placeholder, mais celui-ci est moins bien supporté que l'attribut.

V-H-3 - Contrôle du contenu

La sécurité de votre serveur et de vos utilisateurs impose que vous contrôliez toujours au niveau du serveur les données entrées (cf. cours l'an prochain). Toutefois, le contrôle par le serveur demande que les données soient envoyées, que le serveur teste, puis réponde ; l'opération peut être longue.

Afin d'éviter une attente inutile aux utilisateurs de votre formulaire, vous pouvez demander au navigateur d'effectuer directement certains tests de validation, afin de prévenir les erreurs courantes (ex. : mauvais numéro de téléphone, mauvaise date…). Attention : cela ne vous dispense quand même pas de procéder aux vérifications côté serveur ! Deux attributs permettent de vérifier le contenu du formulaire :

- required : spécifie que le champ doit être obligatoirement rempli. Attribut à ajouter à tous les champs dont la légende comporte un astérisque « * » ;

- pattern : attribut spécifique aux champs « libres », il permet de spécifier une expression régulière. Cette chaîne de caractères au format particulier indique au navigateur tous les formats d'entrée autorisés pour le champ et le navigateur refusera d'envoyer le formulaire si un champ n'est pas correctement rempli. Par exemple, un « pattern » égal à 0[1-9](\.\d{2}){4} permettra de s'assurer qu'un numéro de téléphone respecte bien les règles de numérotation françaises, tandis que le pattern [a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,4} bloquera les erreurs d'adresse email les plus grossières. Vous trouverez de nombreux exemples de patterns utilisables dans ce cas du HTML5pattern.
Note : les patterns HTML sont automatiquement évalués contre la totalité de l'entrée. Il est donc inutile de les encadrer entre ^ et $ comme une expression régulière classique.

Exercice 9

1. Rendez la coche « J'ai bien lu les clauses que je n'ai pas lues » obligatoire. Vérifiez si l'envoi du formulaire est bien impossible alors.

2. Rendez aussi les champs « Nom » « Mot de passe » et « Email » obligatoires.

3. Par convention d'usage, le nom des champs obligatoires est suivi d'un « * ». Ajoutez-la aux labels des <input> obligatoires.

4. Ajoutez au champ password un pattern pour que ne soient acceptés que des caractères de l'alphabet latin ou numériques.

5. Faites en sorte que le mot de passe acceptable soit d'une longueur de 8 caractères minimum.

Note : pour être toujours protégé contre les bogues lorsque vous cogitez sur une expression régulière, ne sortez jamais sans votre Regulex. Regulex, le visualisateur de machine d'état qu'il vous faut pour vos expressions régulières.

VI - TD5 - Responsive design

VI-A - Introduction

Les smartphones, les tablettes et tous les appareils de la mobilité demandent de repenser le web d'aujourd'hui. Concevoir un site ou une application Web s'adressant à tous ces médias n'est pas une tâche triviale. Voici un aperçu des nombreuses solutions existantes :

- une solution en pur CSS. En effet, le CSS est le langage de base pour la mise en page des pages Web. Il est donc en constante évolution (CSS3 en cours d'élaboration) pour s'adapter aux nouveaux besoins ;

- coder deux sites en HTML/CSS : un pour les ordinateurs et un pour les smartphones (et un pour les tablettes ? et un pour les smartwatch ?). Exemple lemonde.fr et mobile.lemonde.fr ;

- des applications natives pour chaque système (Android, iOS, Windows Phone…) ;

- l'utilisation de la puissance de JavaScript pour faire des mises en page adaptatives ;

- faire le site en Flash (très mauvaise idée, car il n'est plus supporté sur Android ni iOS).

Plus pour nous positionner dans cette jungle que par purisme, nous prendrons deux hypothèses de départ :

- « Il n'y a pas besoin d'applications pour cela ! » : pas besoin de faire du natif Android ou iOS ;

- « Il n'y a pas besoin de faire deux sites web pour cela ! » : on s'interdit de faire un site Web pour mobile et un pour ordinateur.

Nous adopterons dans ce TD une approche itérative, en rajoutant au fur et à mesure des contraintes pour arriver à ce qui se fait aujourd'hui dans le responsive design.

VI-B - CSS2

Certaines propriétés n'ont pas attendu ni les nouveaux médias ni le CSS3 pour s'imposer aux développeurs. Elles prenaient déjà tout leur sens sur des sites particulièrement fournis et/ou sur des petits écrans 15 pouces.

VI-B-1 - Les pourcentages « % »

On peut commencer par exprimer toutes les tailles en relatif, en prenant comme référence la largeur de l'écran. C'est ce que nous avons déjà fait en utilisant des dimensions en %.

Exercice 1

1. Donnez à <body> la width de 100%. Donnez à la propriété margin la valeur auto si ce n'est pas le cas.

2. Enlevez au besoin la marge de gauche de 10% sur le <aside> et changez les dimensions relatives de <article> et <aside> à respectivement 67% et 33%.

Note : si adapter les largeurs en pourcentage marche bien, ce n'est pas le cas des hauteurs. Cela est dû au fait que la largeur de la page est connue (c'est la largeur de la fenêtre d'affichage du navigateur) mais sa hauteur ne l'est pas encore… (puisque la page n'est pas encore affichée et que la hauteur va dépendre de la quantité de contenu). Autrement dit, la hauteur de la zone du navigateur où s'affiche la page (viewport height) n'est pas forcément la hauteur de la page(2) (et c'est lié à la présence d'un ascenseur à droite pour descendre dans la page).

VI-B-2 - max-width et min-width

Les règles précédentes permettent d'avoir un rapport homogène, mais pas un rendu optimal :

- sur de petits écrans d'ordinateur, des éléments ne peuvent pas être correctement affichés (des images, des colonnes…) ;

- sur de très grands écrans, le texte devient illisible : les yeux fatiguent à cause des lignes trop longues.

Pour contraindre les dimensions maximales et minimales, nous utiliserons max-width, max-height, min-width et min-height, qui prennent le même type de valeur que width et height.

Exercice 2

1. Ajoutez une limite minimale pour les photos de Chuck Norris à 150px, (et encore, mieux vaut ne pas en parler à Chuck).

2. Ajoutez une limite maximum de largeur à <article> et à <aside> de 500px et de 250px.

3. Ajoutez une limite minimum de largeur à <article> et à <aside> de 200px et 150px.

VI-B-3 - Overconstraint

Mais que se passe-t-il quand on mélange min-width et des tailles en pourcentage ? Prenons l'exemple suivant

1. <div style="display:flex">

2. <div style="width:50%;max-width:200px;">

3. Div1

4. </div>

5. <div style="width:50%;">

6. Div2

7. </div>

8. </div>

qui s'affiche comme suit

Exercice 3

Remarquez en changeant la largeur de votre fenêtre (ou en zoomant) que :

1. Les deux <div> prennent toute la largeur quand <body> a une largeur inférieure à 800px (donc le premier <div> a une largeur de moins de 400px) ;

2. Mais quand la largeur de <body> est supérieure à 800px, alors les deux <div> ne remplissent plus toute la largeur de <body>.

Nous allons utiliser display:flex pour mieux mélanger les tailles relatives et les contraintes min-width/max-width. Nous avions déjà vu les règles de la colonne de gauche de cette super page sur FlexBox : c'était celles qui s'appliquaient au parent. Nous allons maintenant nous pencher sur la colonne de droite qui s'applique aux balises enfants. Regardez particulièrement les propriétés flex-shrink (valeur par défaut 1), flex-grow (valeur par défaut 0). Pour l'instant, nous ne toucherons pas à flex-basis (qui gardera donc son comportement par défaut auto).

Exercice 4

1. Lisez la section sur flex-shrink et flex-grow dans le guide de FlexBox ou toute autre page Web. N'hésitez pas à parler de votre compréhension avec votre professeur.

2. Donnons un exemple d'utilisation de flex-grow. Votre boulot est de vérifier que vous comprenez son fonctionnement.
Nous pouvons désormais résoudre le problème précédent avec flex-grow:1;.

1. <div style="display:flex">

2. <div style="width:50%;max-width:200px;">

3. Div1

4. </div>

5. <div style="width:50%;flex-grow:1;">

6. Div2

7. </div>

8. </div>

qui s'affiche comme suit

Maintenant que la largeur de <body> est supérieure à 800px, alors le second <div> voit sa largeur augmenter grâce à flex-grow:1;. Donc les deux <div> remplissent toujours la largeur de <body>.

3. Changez les largeurs de <article> et <aside> pour qu'elles soient par défaut de 300px et 200px. Mettez les propriétés flex-shrink et flex-grow pour ces deux éléments à 0.
Bougez la largeur de la page. Est-ce que les largeurs de <article> et <aside> changent ?

4. Nous souhaitons que quand l'écran est trop large, l'espace restant soit réparti entre <article> et <aside> de telle sorte que l'espace gagné par <article> soit 3 fois plus grand que celui gagné par <aside>.
Quelle propriété CSS devez-vous utiliser pour avoir ce comportement ? Implémentez ce comportement.

5. Pour vérifier que vous avez bien répondu à la question précédente, redimensionnez la fenêtre du navigateur pour que la largeur de <body> soit de 620px.
Quelles devraient être selon vous les largeurs de <article> et <aside> ? Inspectez maintenant les largeurs de <article> et <aside> pour vérifier votre calcul.

6. Nous souhaitons que quand l'écran est trop petit, <article> diminuera de deux tiers de la largeur à supprimer et <aside> diminuera du reste.
Quelle propriété CSS devez-vous utiliser pour avoir ce comportement ? Implémentez ce comportement.

VI-B-4 - Problèmes plus complexes

Il arrive un moment où diminuer encore la taille n'a plus de sens. Il faut prendre des mesures draconiennes, par exemple passer <aside> sous <article> ou carrément supprimer <aside>.

Les règles CSS déjà vues en TD ne permettent pas de coder ce genre de comportement. Il nous faut une façon d'écrire du CSS qui ne sera valide que dans des cas précis. Nous verrons dans la prochaine section comment cela est possible en CSS3.

VI-C - Votre site de Chuck Norris sur mobile

VI-C-1 - Les outils pour travailler ?

Jusqu'ici on pouvait considérer que tous les outils de développement d'Internet Explorer/Firefox/Chrome étaient égaux. En fait celui de Chrome était déjà un peu meilleur :

- autocomplétion des règles CSS ajoutées dynamiquement ;

- liste déroulante des valeurs possibles des champs ;

- plus rapide, plus stable (un processus par onglet) ;

- etc.

En tout cas, pour le reponsive design il n'y a pas photo : Chrome (ou son pendant libre Chromium) est vraiment votre « best-friend-ever ».

VI-C-2 - Que fait mon navigateur Web sur téléphone par défaut pour un site ?

Comment peut-on rendre un site Internet compatible mobile à moindre coût ?

Voici l'algorithme (simplifié) opérant par défaut :

- générer le site sur une taille d'écran virtuel, disons d'une largeur de 980px ;

- faire un zoom arrière de manière à faire rentrer le site dans l'écran du smartphone ; (oui, cela fait de petits éléments) ;

- supposer que l'utilisateur connaît le pinch to zoom pour naviguer dans le site :

Et ça marche ! De fait, c'est ce que font par défaut les smartphones quand ils tombent sur un site non responsive.

Exercice 5

1. Dans les outils développeurs (F12) de Chrome/Chromium, passez dans le device mode « Samsumg Galaxy S5 » sous Chrome/Chromium et rechargez votre page. Constatez que le site s'affiche en tout petit.

2. Vérifiez que la taille du <body> est de 980px, ce qui signifie que l'algorithme précédent a été utilisé pour l'affichage.
Remarquez aussi que la largeur de l'affichage est de 360px, ce qui signifie qu'un zoom arrière est effectué.

Même si cela marche, on ne peut pas dire que cela soit optimal. L'utilisateur mobile n'a pas la même attente que l'utilisateur sur ordinateur, il veut avoir accès rapidement aux informations essentielles, sans fioritures. On imagine que sur une smart watch par exemple un site comme Météo France serait largement plus dépouillé (sur une smartwatch elle afficherait un nuage ou un soleil et la température par exemple).

Typiquement nous voulons enlever des parties entières du site suivant la taille de l'écran.

La première chose à faire est donc de demander aux navigateurs de ne plus faire l'algorithme précédent (puisqu'on va le gérer nous-même) dans la balise <head> :

<meta name="viewport" content="width=device-width, initial-scale=1">

Exercice 6

1. Ajoutez cette instruction au site de Chuck Norris et visualisez avec Chrome en choisissant un smartphone. Inspectez la largeur de <body>. Que constatez-vous ?

Vous devez constater que l'algorithme précédent ne s'applique plus. En gros le navigateur n'essaie plus d'être intelligent : il vous laisse prendre le relai.

VI-D - La solution technique CSS3 : les media queries

Les media queries sont un jeu d'options ajoutées à la norme CSS3 et qui permettent de définir des règles CSS qui ne s'appliqueront que sous certaines conditions spécifiques.

Il existe deux manières différentes de faire appel à une media query :

- soit vous souhaitez un fichier CSS spécifique en entier, mais uniquement dans certaines conditions. Alors il faut ajouter à l'en-tête <head> de la page web une déclaration de fichier CSS standard, à laquelle on ajoute l'attribut media et une condition spécifique.

<link rel="stylesheet" media="condition" href="mon_css_special.css"/>

N'oubliez pas que le dernier CSS chargé prend le pas sur les précédents. Pensez donc à toujours déclarer vos media queries en dernier, sinon elles seront systématiquement écrasées par votre CSS « standard » ;

- soit vous souhaitez que juste certaines règles s'appliquent sous certaines conditions. Alors vous englobez vos règles avec la syntaxe suivante :

1. @media(ma_condition) {

2. div {background-color:white;}

3. ...

4. }

Une media query fonctionne de la manière suivante : la condition est évaluée et retourne une valeur « vrai » ou « faux ». Si la valeur est vraie, le fichier CSS/la règle CSS (selon la méthode employée) est appliquée.

Chaque condition est formée à partir d'une ou plusieurs conditions de base. Parmi l'ensemble des conditions possibles, nous allons nous intéresser particulièrement aux suivantes :

- min-width, max-width, min-height et max-height : permettent de renseigner une dimension minimale/maximale à remplir pour que la condition soit vraie. Par exemple,

1. @media(min-width:100px) {

2. div {background-color:white;}

3. }

- orientation : prend les valeurs landscape (écran horizontal) ou portrait (écran vertical)

Les conditions de base peuvent être combinées ensemble pour former des conditions complexes en utilisant les opérateurs logiques :

- « and » (ET) : les deux conditions de base doivent être vraies pour que la condition soit vraie ;

- « , » (OU) : au moins l'une des conditions de base doit être vraie pour que la condition soit vraie ;

- « not » (NON) : la condition de base qui suit le not doit être fausse pour que la condition soit vraie.

Exemple : la règle (min-width: 500px) and (min-height: 800px) n'est vraie que si la largeur de l'affichage est supérieure (ou égale) à 500px et la hauteur supérieure à 800px.

Exercice 7

- Allez sur le site Bootstrap et constatez qu'il y a deux largeurs pour lesquelles la mise en page change.

- Utilisez le device mode pour afficher les media queries (cliquer sur les trois points verticaux du device mode pour afficher ces media queries).

- Que se passe-t-il visuellement dans le menu lorsque vous redimensionnez la fenêtre autour du point de rupture situé à 768px ?

VI-D-1 - Les points de rupture

Afin d'organiser nos media queries, on utilise en général trois ou quatre valeurs de largeur d'écran, par exemple :

- 480px (Smartphone) ;

- 768px (Tablette) ;

- 992px (écran d'ordinateur « Standard ») ;

- 1200px (écran d'ordinateur « Large »).

Exercice 8

1. En dessous de 768px ne plus afficher la table de comparaison (de toute façon s'il ne doit rester qu'un seul, ce sera Chuck Norris).

2. En dessous de 480px faire en sorte qu'<aside> et <article> soient en colonne et plus en ligne.

3. (Optionnel) Sur une smartwatch (width 168px), n'affichez que les citations de Chuck Norris contenues dans le <aside>.

VI-D-2 - Mettez-moi un burger au menu !

Quand la taille de l'écran est limitée, une bonne pratique en responsive design est de changer l'affichage du menu pour un bouton burger :

Lorsque l'on cliquera dessus, le menu apparaîtra. Cela permet de ne pas perdre de place sur la page lorsque le menu est fermé. Pour fixer les idées, nous voulons un menu qui apparaît latéralement à la manière des exemples suivants :

- http://codepen.io/gungorbudak/pen/XbazEX

- http://codepen.io/drewr/pen/uxvdt

(Notez au passage que codepen.io est un très bon outil pour découvrir de nouvelles techniques !)

Exercice 9

Nous allons coder un deuxième menu, identique au premier dans son contenu, mais avec une mise en page différente. Nous allons afficher l'un ou l'autre des menus en fonction de la taille de l'écran.

1. Ajoutez un <div> de classe burger contenant l'image de burger (largeur 50px) juste avant le menu <nav>.

2. À partir du point de rupture ‘Smartphone', faites disparaître l'ancien menu et faites apparaître le <div class="burger"> à droite de la page (à la place du menu).

3. Implémentez le deuxième menu avec les caractéristiques suivantes :

1. son contenu est

1. <div class="burger">

2. <img src="images/burger.png" alt="burger" width="50px">

3. <div id="menu2">

4. <div><a href="./index.html">Accueil</a></div>

5. <div><a href="./facts.html">Facts</a></div>

6. <div><a href="./news.html">Actualités</a></div>

7. <div><a href="./contact.html">Contact</a></div>

8. </div>

9. </div>

- il se positionne par rapport à la fenêtre d'affichage (quelle valeur de position faut-il mettre ?), tout en haut à droite ;

- il occupe 80 % de la largeur de la fenêtre d'affichage et 100 % de sa hauteur (cherchez sur le Web les unités de mesure vh et vw(3)) ;

- il est visuellement au-dessus des autres éléments du site (cherchez sur le Web la propriété z-index) ;

- les sous-menus sont disposés verticalement.

Note : le hover sur les sous-menus n'a pas de sens sur téléphone portable. Il faudra gérer le clic avec du JS. La bonne solution est… suspense, vous la verrez en 2e année.

VI-D-3 - La mobilité en général

Les contraintes liées à la mobilité ne se limitent pas au responsive design. Pour vous donner une idée plus complète, voici d'autres exemples de contraintes fortes qui viennent s'ajouter :

- débit du réseau ;

- faible capacité du média (processeur, mémoire vive…) ;

- mode offline (on peut passer sous un pont… il faut prévoir pour le cas échéant un cache local qui stocke les opérations courantes, afin de les consommer lorsque le réseau revient) ;

- changement de paradigme de l'interface homme-machine (mouse over, menu déroulant…).

VII - Note de la rédaction de Developpez.com

Nous tenons à remercier Romain Lebreton qui nous a aimablement autorisés à publier son tutoriel. Nous remercions également Winjerome pour la mise au gabarit et Claude Leloup pour la relecture orthographique.

(1)En fait le HTML5 permet cette inclusion dans certains cas.

(2)L'unité vh permet maintenant de définir une taille de 0 à 100 relative au viewport.

(3)L'unité vh permet maintenant de définir une taille de 0 à 100 relative au viewport.