Cégep de Sainte-Foy | Techniques d'intégration multimédia

582-104-SF Intégration 1

Leçon 4

Introduction au langage CSS [1]

CSS

Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).

Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

  • 1996 : acceptation des CSS niveau 1 par le W3C, qui les lia au HTML
  • 1998 : CSS niveau 2
  • 2007 : CSS niveau 2.1
  • Aujourd'hui : CSS niveau 3
  • CSS niveau 4 : le développement de plusieurs modules des CSS de niveau 4 est en cours depuis 2010.

CSS de niveau 3.0 est développée en parallèle à la version 2.1 depuis 1999. CSS3 devient « modulaire », afin de faciliter ses mises à jour et son implémentation par des agents utilisateurs aux capacités et aux besoins de plus en plus variés (navigateurs graphiques, navigateurs pour mobiles, navigateurs vocaux). C'est cette version qui est maintenant très largement employée par les développeurs web.

Séparer la structure de la forme

Avec la généralisation de l'usage des CSS, désormais le mot d'ordre est : séparer la structure de la forme! C'est-à-dire que les instructions concernant la structure (HTML) d'une page web sont complètement séparées des informations concernant sa mise en forme (CSS).

Les avantages

  • Conception simplifiée des pages Web;
  • Compatibilité accrue sur une large variété d'agents utilisateurs (ordinateurs de table, assistants personnels, téléphone portable, synthétiseur vocal, navigateur braille, etc.);
  • Entretien et mise à jour simplifiés.

Références

CSS dans Wikipédia

CSS 2.1: les spécifications officielles

CSS: une liste de toutes les spécifications

CSS: travaux en cours

La toute première page Web

Le flux Internet

De la saisie d'une adresse dans votre navigateur jusqu'à la réception du document demandé, voici une description brève des étapes d'une requête effectuée d'un ordinateur client (votre ordinateur) vers un serveur.

Étapes d'une requête effectuée d'un ordinateur client vers un serveur

  1. Saisie d'une adresse www dans le navigateur.
  2. Le navigateur contacte le serveur HTTP situé à cette adresse.
  3. Le serveur HTTP reçoit la requête du navigateur.
  4. Le serveur HTTP recherche le document Web.
  5. Le serveur HTTP envoie le document Web.
  6. Votre navigateur reçoit le document.
  7. Votre navigateur traite le code source.
  8. Le navigateur affiche la page Web.

Les CSS

C'est à partir de la dernière étape de la liste précédente qu'interviennent les CSS.

  1. Si le document en contient, elles décrivent au navigateur l'aspect visuel que doit prendre le document HTML.
  2. Si le navigateur comprend et reconnaît les CSS, il convertit la page en un document que vous pouvez visualiser et avec lequel vous pouvez interagir.
  3. S'il n'en comprend qu'une partie, il ignore ce qu'il ne peut déchiffrer.
  4. S'il ne comprend pas du tout les CSS, il affiche une version brute du document HTML.

Rédiger des CSS

Tout comme pour le HTML, la méthode la plus simple pour rédiger les CSS consiste à utiliser un éditeur de texte brut.

Les fichiers CSS sont en effet de simples documents texte.

On ne peut pas utiliser des outils de traitement de texte comme Word ou encore des formats de texte comme rtf pour coder, car ils insèrent par défaut dans le code des éléments indésirables de mise en forme, comme des retours de ligne, des espaces multiples, des tabulateurs, des paragraphes, de la mise en forme indésirée... Seuls les éditeurs de texte brut peuvent faire le travail de codage.

La rédaction des CSS peut se faire à l'aide d'éditeurs CSS ou HTML comme Brackets, ou de logiciels plus sophistiqués de type WYSIWYG (What You See Is What You Get) comme Dreamweaver.

Où trouve-t-on les règles de style?

Lieux Remarques
à l'externe

Dans un fichier de texte brut comportant l'extension .css et qui est lié à la page HTML par l'intermédiaire d'un élément <link> ou @import.

Les règles de style rédigées à l'externe sont privilégiées dans la plupart des situations car elles permettent une séparation nette entre le contenu et sa présentation.

à l'interne À l'intérieur d'un élément <style> dans l'en-tête (<head>) d'un fichier HTML (.html). Cette méthode est surtout utile pour tester une page ou encore parfois pour mettre en forme un site à page unique.
en ligne À même le balisage HTML à l'aide d'un attribut «style="..."». Cette méthode ne doit être employée que dans des situations précises, tel qu'un courriel en HTML par exemple, car elle contrevient au principe de séparation entre le contenu et sa mise en forme.

Les composantes d'une feuille de style

La feuille de style est le document (indépendant ou imbriqué) contenant les règles de style.

Une règle de style est en quelque sorte une directive contenant des indications de mise en forme visant un ou des éléments de contenu d'une page web.

La règle de style est composée des quatre éléments suivants:

  1. sélecteur
  2. déclaration
  3. propriété
  4. valeur

Feuille de style


Règles de style en ligne

Les règles de style en ligne sont rédigées à même le balisage HTML. Voici un exemple de règle de style en ligne associée à un élément <td>:

<td style="background-color:green"> ... </td>

Cette règle de style, rédigée à l'intérieur de la balise ouvrante d'une cellule de tableau, permet d'appliquer la couleur vert à l'arrière-plan de la cellule concernée.

Règle générale, cette pratique est à éviter. Mais il existe des situations particulières où les styles en ligne sont pertinents, par exemple dans l'élaboration d'un courriel en HTML.

Le tableau présentant les couleurs « nommées » des CSS 2.1 que vous pouvez consulter au bas de la présente page est un exemple d'utilisation pertinente de règles de style en ligne :

  • La colonne de droite de ce tableau comporte 16 cellules de couleurs différentes.
  • Dans une feuille de style externe ou interne, il aurait fallu rédiger 16 règles de style distinctes pour ces 16 cellules.
  • En plus de ces 16 règles, il aurait aussi fallu inscrire 16 noms de classe distincts dans le balisage HTML.
  • Dans cette situation, où chaque cellule est un cas particulier, il peut être pertinent d'avoir recourt aux règles de style en ligne.

Extrait du balisage du tableau cité en exemple (remarquez les règles de style en ligne apparaissant dans les balises <td>):

Exemple de règle de style en ligne
Exemple d'utilisation de styles en ligne.

Feuille de style interne

La feuille de style interne est rédigée à même l'en-tête du document HTML, dans un élément <style> ... </style> mais reste tout de même isolée du balisage HTML proprement dit, comme le montre cet exemple:

Les règles de style d'une feuille de style interne sont souvent insérées dans des marques de commentaires HTML <!-- et --> de telle sorte qu'aucun contenu de la feuille de style ne soit interprété comme une commande HTML.

Exemple de styles internes.

Feuille de style externe (ou « attachée »)

On trouve souvent au tout début d'une feuille de style externe l'évocation du type d'encodage de caractères employé, tel que @charset "utf-8";, puis la suite est une série de règles de style, comme le montre cet exemple:

@charset "utf-8";

Il ne doit y avoir ni caractère, ni commentaire, ni espace avant la déclaration du codage de caractères au début d'une feuille de style externe. Pour plus de détails, consultez les règles du W3C.

La déclaration du codage est utilisée pour assurer l'interprétation correcte de certaines valeurs d'attribut qui peuvent contenir des caractères spéciaux.

Exemple de css.

Règle de style

Exemple:

h1 {
  font-family: Helvetica;
  font-size: 1.4em;
  color: #0033cc;
}

Les caractères spéciaux de type accolades { } indiquent le début et la fin de chaque règle de style.

Dans cet exemple, la règle permet de mettre en forme l'élément h1 en lui attribuant une police de caractère, Helvetica, ainsi qu'une taille de police et une couleur de police.

À noter que cette règle de style est écrite avec des sauts de ligne et de l'indentation pour assurer que le code soit lisible et bien organisé. C'est la méthode que nous utiliserons tout au long de la session.

Il vous arrivera en effet de voir la même règle écrite ainsi:

h1 {font-family:Helvetica;font-size:1.4em;color:#0033cc;}

C'est tout aussi valide, mais moins facile à lire et à corriger.

À l'instar du HTML, les CSS exploitent les espaces blancs, l'indentation et les sauts de ligne pour une meilleure lisibilité.

Dans une règle de style, l'élément qui choisit la portion du document HTML à mettre en forme est le sélecteur.

Sélecteur

Un sélecteur correspond à l'élément ou les éléments HTML auxquels une règle CSS s'applique.

Le sélecteur de l'exemple précédent est h1. Il s'agit, dans ce cas, d'un élément HTML simple, présent dans tout document HTML.

  • Il est écrit avant la première accolade.
  • Notez qu'il est écrit sans les chevrons < et > qui encadrent la balise correspondante dans le document HTML.

Lorsque plusieurs éléments HTML, classes ou identifiants apparaissent au sein d'une même règle, séparés par des virgules, on dit que le sélecteur est «groupé».

h1, h2 ,h3 { ...

Lorsque le sélecteur comporte une série d'éléments HTML, de classes ou d'identifiants placés dans un ordre hiérarchique, avec des espaces mais sans virgules, on dit que le sélecteur est «composé».

ul li a { ...

Déclaration

Les déclarations sont placées entre les accolades pour les isoler des sélecteurs.

Une déclaration est composée d'une propriété et d'une valeur CSS séparées par un deux-points, le tout se terminant par un point-virgule. Voici l'une des trois déclarations de l'exemple cité plus haut:

font-family: helvetica;

Lorsque plusieurs déclarations apparaissent au sein d'une même règle, comme c'est le cas de l'exemple ci-haut, on dit qu'elles sont groupées.

Propriété

La propriété décrit un aspect de la présentation d'un document, comme sa couleur d'arrière-plan, sa taille de police ou sa largeur de bordure.

CSS3 propose au total plus de 300 propriétés.

La propriété est toujours suivie par une valeur dont elle est séparée par un deux-points.

Dans l'exemple précédent, font-family est la propriété: il s'agit de la police de caractère du sélecteur h1, lui-même une évocation de l'élément HTML portant le même nom.

Valeur

La valeur est un descripteur définissant une apparence spécifique, comme un nom ou un code de couleur, une mesure de longueur, un pourcentage ou un nombre d'unités.

Une valeur est toujours suivie d'un point-virgule, qui délimite du même coup la déclaration.

Dans l'exemple qui précède, la valeur de la propriété color est #0033cc.

Il s'agit du code numérique hexadécimal (voir plus bas sur cette page) de la couleur de police du sélecteur h1, lui-même une évocation de l'élément HTML portant le même nom.

En l'occurrence, #0033cc est un bleu moyen.

Notes sur la couleur

Références supplémentaires:

Notation hexadécimale longue

La notation numérique de la couleur utilisée dans l'exemple suivant se nomme notation hexadécimale longue:

  1. les deux premiers chiffres désignent le rouge,
  2. les deux chiffres du milieu, le vert,
  3. les deux chiffres de la fin, le bleu.

Exemple :

h1 {
  color: #0a4dee;
}

Voir cette couleur dans Google

Notation hexadécimale courte

Cette variante de la notation hexadécimale utilise seulement 3 chiffres, lorsque les chiffres sont implicitement dédoublés. Ainsi, #999999 devient #999, #ff0066 devient #f06, etc.

Exemple :

h1 {
  color: #f06;
}

Voir cette couleur dans Google

RGB (Red, Green, Blue)

Les couleurs peuvent aussi être décrites à l'aide du conteneur rgb():

  • Valeurs entre 0 et 255 : rgb(50, 10, 204)

Exemple :

h1 {
  color: rgb(50, 10, 204);
}

Voir cette couleur dans Google

RGBA (Red, Green, Blue, Alpha channel)

Le conteneur rgba() permet d'ajouter une valeur d'opacité à la couleur décrite:

  • Ajout d'une valeur entre 0 et 1 pour l'opacité : rgba(50, 10, 204, 0.4)

HSL (Hue, Saturation, Lightness)

Les couleurs peuvent aussi être décrites à l'aide du conteneur hsl() qui décrit la teinte (hue), la saturation (saturation) et la luminosité (lightness).

Exemple :

h1 {
  color: hsl(10%, 25%, 78%);
}

HSLA (Hue, Saturation, Lightness, Alpha channel)

Le conteneur HSLA permet d'ajouter une valeur d'opacité à la couleur décrite.

Exemple :

p {
  background-color: hsla(24%, 0%, 98%, 0.6);
}

Couleurs nommées

Certains mots de couleur peuvent également servir à titre de valeur des propriétés de couleur.

Le HTML reconnaît les termes de 140 couleurs, dont 17 couleurs dites standards. Les couleurs standards sont listées dans le tableau suivant:

Les noms de couleur standards du HTML/CSS
Terme HTML Code hexadécimal Couleur
aqua #00ffff  
black #000000  
blue #0000ff  
fuchsia #ff00ff  
green #008000  
gray #808080  
lime #00ff00  
maroon #800000  
navy #000080  
olive #808000  
orange #ffa500  
purple #800080  
red #ff0000  
silver #c0c0c0  
teal #008080  
white #ffffff  
yellow #ffff00  

Informations supplémentaires

Les 140 noms de couleurs du HTML/CSS : liste complète des noms de couleurs du HTML/CSS

W3School color picker

Google color picker

Travaux pratiques

Téléchargez le dossier fourni et ouvrez-le dans Brackets, puis ouvrez-le en parallèle dans Chrome.

Sources: tf_cours05_seahawks_sources.zip (23 Ko)

Suivez ensuite les consigne en classe pour la création d'une feuille de style interne.

Les sélecteurs

Les exemples de règles CSS les plus évidents utilisent des balises HTML comme sélecteurs: body, h1, p, ul...

Ces règles affectent donc toutes les instances de ces balises dans les pages HTML auxquelle elles sont liées. Par exemple, une règle appliquée au sélecteur h1 affecte tous les éléments h1 du document HTML auquel cette règle de style est liée.

Cet effet n'est pas toujours désirable: on souhaite parfois n'intervenir que sur certaines balises d'un type donné: par exemple, les hyperliens du menu n'ont pas nécessairement les mêmes attributs visuels que ceux du contenu. Or, il s'agit pourtant de la même balise a dans les deux cas.

Pour pallier à cette situation, il existe une panoplie de sélecteurs qui permettent une sélectivité variable, selon le besoin.

Les principaux sélecteurs de styles
Sélecteur Description Exemple*
Sélecteur universel S'applique à tous les élément du document * {}
Cible tous les élément de la page
Sélecteur de type Correspond aux noms des éléments h1, h2, h3 {}
Cible les éléments 'h1>, <h2> et <h3>
Sélecteur de classe (class) Correspond aux éléments dont la valeur de l'attribut class est celle indiquée après le point .note {}
Cible tous les éléments dont l'attribut class a la valeur «note»
p.note {}
Cible tous les éléments <p> dont l'attribut class a la valeur «note»
Sélecteur d'identifiant (id) Correspond à l'élément dont la valeur de l'attribut id est celle infiquée après le symbole dièse (#) #introduction {}
Cible l'élément dont l'attribut id a la valeur «introduction»
Sélecteur d'enfant Correspond aux éléments qui sont les enfants directs d'un autre li>a {}
Cible tous les élément <a> qui sont des enfants d'un éléments <li>, mais sans les autres éléments <a> de la page
Sélecteur de descendant Correspond aux éléments qui sont des descendants de celui indiqué (et non seulement ses enfants directs) nav a {}
Cible tous les élément <a> descendants de <nav>.
Sélecteur de frère adjacent Correspond à l'élément enfant qui suit immédiatement un autre enfant de même parent h1+p {}
Cible le premier élément <p> qui vient après un élément <h1>, sans les éléments <p> suivants
Sélecteur de frère général Correspond aux éléments qui sont les frères d'un autre, même s'ils ne le suivent pas directement h1~p {}
Si deux éléments <p> sont les frères d'un élément <h1>, la règle s'applique aux deux

See the Pen c05-IntroCSS_01 by Sylvain Lamoureux (@slamoureux) on CodePen.

Activités d'évaluation

Contrôle de lecture 2

Le contrôle de lecture 1 aura lieu au cours 8.

Il concerne le contenu des pages Web des leçons 4 à 7.

Questions de révision pour le contrôle de lecture

  1. Écrivez une règle de style complète et identifiez clairement tous les éléments la composant: règle de style, sélecteur, déclaration, propriété, valeur.
  2. Nommez les trois endroits où peuvent se trouver les règles de style associées à un document HTML.
  3. Considérez la règle de style suivante qui contrôle la couleur des hyperliens :
    a {
      color: aqua;
    }
    À partir du code illustré plus bas, proposez une règle modifiée qui fait en sorte qu'elle ne s'applique cette fois qu'aux hyperliens de la navigation principale.

  4. Code pour question de révision du cours 4

TP4 - Intro au langage CSS

Le TP 4 est une initiation à l'incorporation de règles de style dans un document CSS.

Sources

  • Utilisez le dossier de votre tp3 (fichiers the.html et contact.html, dossier images)
  • Téléchargez cette image supplémentaire et placez-la dans le dossier images: boucle.gif

Documents à remettre

Un dossier rigoureusement nommé comme suit:

  • groupe du lundi 9h : gr2_nominitialeprenom_tp4
  • groupes du lundi 12h : gr1_nominitialeprenom_tp4

contenant un fichier the.html, contact.html et un dossier images.

Structure de fichiers :

Arborescence de fichiers pour le tp4.

Échéancier

Remettez le dossier complet, zippé, sur LÉA, dans l'espace prévu à cette fin, au plus tard :

  • le vendredi suivant le cours, 9h le matin

Grille d'évaluation (pondération: 2% de la session)

  • La structure et le nom des fichiers respectent l'énoncé: /1
  • Le doctype et encodage du texte sont précisés et sont fonctionnels: /2
  • Les hyperliens sont bien formés: /2
  • L'élément <title> est présent et contient Titre de la page + Titre du site: /2
  • Les règles de syntaxe et l'imbrication des éléments sont respectés: /2
  • L'indentation est complète et bien faite: /2
  • Les images sont balisées, elles s'affichent et comportent un attribut alt: /2
  • Le formulaire st correctement balisé: /4
  • La page contact.html est structurée correctement: /2
  • Total: /20

Travail à faire

Les règles de style que vous allez soit copier, soit rédiger, dans les étapes qui suivent, doivent obligatoirement être mises en forme comme le montre l'exemple suivant, c'est-à-dire une déclaration par ligne et des retraits sous le sélecteur :

Règle d'écriture d'une règle CSS.

1. Créez votre structure de dossiers

Ajouter un nouveau dossier nommé «css» dans votre dossier grx_nomprenom_tp4 (contenant aussi les fichiers the.html et contact.html et le dossier images).

Votre structure de dossiers doit ressembler à ceci :

2. Démarrez Brackets et ouvrez votre dossier de travail

Dans la colonne de gauche de Brackets, ouvrez le dossier grx_nomprenom_tp4 grâce à l'option Ouvrir un dossier; vous aurez ainsi accès à tous les fichiers et dossiers d'y trouvant ;

3. Créez le fichier styles.css dans le dossier css

Dans votre dossier de travail, repérez le dossier css et cliquez-droit sur ce dossier: choisissez Nouveau fichier et nommez ce fichier styles.css.

4. Liez la feuille de style aux documents HTML

Afin de lier ce fichier .css aux documents HTML, faites d'abord afficher le document the.html et insérez la ligne de code suivante à la suite de <title> à l'intérieur de l'élément <head> :

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

Répétez cette opération dans le fichier contact.html :

Pour le moment, votre page web ressemble à ceci dans Chrome :

5. Insérez les éléments de structure HTML pour compléter la structure de vos pages

Insérez les conteneurs header, nav, article, aside et footer dans vos DEUX pages HTML (the.html et contact.html) comme le montre l'image suivante.

Cette étape est cruciale avant d'entamer la rédaction des règles de style, car les règles de style y font référence.

Insertion d'éléments de structure dans le code HTML de contact.html et the.html
Ajout des éléments de structure du HTML

6. Insérez une première règle de style pour la réinitialisation des marges

Dans votre feuille de style, sous l'encodage de caractères, insérez le code suivant (y compris le commentaire CSS se trouvant au début du fichier) :

@charset "utf-8"; 
/* Réinititialisation de base */
* { 
  margin: 0; 
  padding: 0;
}

Les commentaires CSS sont délimités ainsi: /* Commentaire css */

  • Il s'agit des règles de style chargées de réinitialiser les valeurs de marges internes et externes de tous les éléments HTML.
  • Disposez ces règles comme le montre l'exemple vu en classe plus tôt dans le cours, c'est-à-dire avec un retour à la ligne et un retrait après chaque déclaration.
  • Actualisez l'affichage de votre navigateur et constatez le résultat: les marges en bordure du document, ainsi qu'entre les titres et les paragraphes ont disparues :

Insérez des valeurs à margin et padding (par exemple: 50px) pour en voir l'effet, puis remettez le tout à zéro.

7. Forcez les éléments HTML5 de structure à un affichage de type bloc

À la suite de la dernière règle de style, insérez la règle suivante, y compris les commentaires :

/* HTML5 éléments de structure */
aside, figcaption, figure, footer, header, nav {
  display: block
}
  • Cette règle assure le comportement bloc des éléments de structure HTML;
  • Cela ne devrait pas engendrer de changements visibles pour le moment.

8. Styles génériques et charte graphique

Dans votre feuille de style, à la suite du code s'y trouvant, insérez le code suivant :

/* Styles génériques et charte graphique */
html {
  font-size: 62.5%; /* Taille de réf. des caractères = 10px */ 
  background-color: #767676; /* Arr.-plan hors contenu */
}
body {
  color: #333;
  font-family: "Century Gothic", helvetica, arial, sans-serif;
  font-size: 1.5em; /* équivalent 15px */
  line-height: 1.5; 
  max-width: 720px; 
  margin-left: auto; /* pour centrer le contenu */
  margin-right: auto; /* pour centrer le contenu */
  background-color: #E3EDC2; /* Arr.-plan du contenu */
}

Notez les changements obtenus : couleurs de fond, police de caractères, interlignes...

TP5

9. Mise en forme des titres

Insérez les règles suivantes qui définissent la mise en forme des titres et sous-titres :

/* Titres */
h1 {
  font-size: 1.2em;
  margin: 0 33% 5px -15px; 
  padding: 7px 15px; 
  background: #FFF; 
  color: #686397;
}
h2 {
  font-size: 1.5em;
  padding: 14px 0 0 0;
  margin: 0 0 7px 0;
  border-bottom: 1px solid #B0D742;
}
h3 {
  padding: 10px 0 0 0;
}

10. Mise en forme des hyperliens

Définissez maintenant l'allure des hyperliens en insérant le code suivant dans votre feuille de style :

/* Hyperliens généraux */
a:link {
  color: darkgoldenrod;
}
a:visited {
  color: darkgoldenrod;
}
a:hover {
  color: #3a8413;
}
a:active {
  color: #ABD240;
}

Ce code façonne les quatre états des hyperliens du document; survolez les liens pour noter les états :

11. L'en-tête et la navigation principale de la page web

Insérez le code suivant dans votre feuille de style pour mettre en forme l'en-tête :

/* En-tête */

header {
  padding: 28px 15px 12px 15px;
  background-color: #abd240;
}

Insérez le code suivant pour mettre en forme la navigation principale :

/* Navigation principale */
nav ul {
  padding: 4px 15px 4px 15px;
  background-color: #686397;
}
nav ul li {
  display: inline; /* Pour placer les li en rangée */
}
nav ul li a {
  padding-right: 30px; 
  text-align: left;
  font-weight: bold;
  font-size: .9em;
  letter-spacing: .05em;
}

Notez l'effet de la déclaration display: inline; : elle permet de rendre en ligne les éléments de liste pour les placer côte à côte, comme ceci :

Afin de supprimer le soulignement des liens de la navigation principale, ajoutez la déclaration text-decoration: none; (voir le texte en vert plus bas) dans la dernière règle de style insérée, comme ceci :

nav ul li a {
  padding-right: 30px; 
  text-align: left;
  text-decoration: none;
  font-weight: bold;
  font-size: .9em;
  letter-spacing: .05em;
}

Le soulignement des liens de la navigation principale disparaît :

Vous allez maintenant compléter la mise en forme les liens de la navigation principale afin de les distinguer des hyperliens du contenu. L'ajout de nav dans le sélecteur, avant l'élément a permettra de viser uniquement les liens du menu.

Inscrivez le code suivant à la suite de votre feuille de style pour définir les quatre états; n'oubliez pas les commentaires :

Les hyperliens de la navigation principale ont maintenant une allure qui leur est propre:

12. Ajout de marges internes aux conteneurs principaux

Ajustez maintenant les conteneurs article et aside avec ce code (incluant les commentaires) :

Votre page prend vraiment forme avec cet ajout :

13. Ajustez la date avec le code suivant :

14. Ajustez l'image de la théière en la faisant «flotter» au travers du texte :

La propriété float et sa valeur left permettent ici de faire flotter l'image dans le contenu texte, à la gauche de la page :

Si le texte n'entoure pas bien l'image, vous pouvez la changer de place dans le code HTML.

15. Ajustez l'espacement de l'ensemble des paragraphes du document :

Ce code génère une marge en haut de chaque paragraphe :

16. Mise en forme de l'élément figure et de son contenu

Ajustez l'image et la légende qui apparaissent dans la section aside :

Remarquez comme l'image et la légende sont maintenant bien intégrées :

17. Mise en forme des tableaux

Effectuez la mise en forme des tableaux en écrivant des règles pour chacun des éléments qu'ils contiennent :

18. Pied de page

Appliquons maintenant une mise en forme au pied de page pour compléter la première étape :

19. Testez la page

Votre page est maintenant complètement mise en forme.

Faites varier la largeur de la fenêtre du navigateur: vous noterez que cette page est fluide mais possède une largeur maximale :

20. Effectuez la mise en forme du formulaire

Pour effectuer la mise en forme du formulaire correctement, vous devez modifier le code HTML. Comme on l'a vu précédemment, les contrôles de formulaires sont de type «en ligne» c'est-à-dire qu'ils s'insèrent au fil du texte.

Pour former des blocs avec certains contrôles de formulaires, on peut utiliser des éléments div.

Dans la page contact.html, repérez le fieldset «Adresse» et ajoutez les éléments div comme on le voit sur l'image suivante:

Ajout d'éléments div
Insertion de div dans le formulaire.

Maintenant, repérez le groupe de cases à cocher (checkbox) : créez une liste non ordonnée (ul) et placez les couples label et input dans des éléments de liste (li), comme on le voit sur l'image suivante :

Ajout d'éléments liste pour coupler label et input
Insertion d'une liste dans le formulaire.

Vous allez maintenant mettre en forme le formulaire de la page contact.html en ajoutant des règles de style dans votre document styles.css à la suite des autres règles.

Insérez ces règles de style (commentaire inclus) pour mettre en forme les fieldset et leurs legend :

Notez la marge interne des fieldset et la taille et l'espacement des legend :

Ajustez la longueur des champs de texte en ajoutant ces règles de style :

Certains champs de texte ont des tailles différentes, correspondant à leurs fonctions, et ont une marge à leur droite lorsque nécessaire :

Ajustez la taille du texte des intitulés :

Remarquez la taille du texte de tous les intitulés et la marge de droite des intitulés accompagnant les boutons radio :

Ajustez la taille de la zone de texte (textarea)

La zone de texte possède maintenant une taille plus pratique pour l'utilisateur:

21. Rendez votre page réactive

Ajoutez ce code à la toute fin de votre feuille de style afin de rendre votre page réactive. La réactivité permet de modifier la mise en forme d'une page en fonction de la largeur de la fenêtre du navigateur :

Notez bien dans le code suivant que l'élément @media englobe entièrement la série de règles de style par des accolades.

Règles css @media

Pour constater les changements, il faudra élargir suffisamment la fenêtre de votre navigateur web.

Remarquez :

  • le changement de la position de la date ;
  • la disposition du contenu sur deux colonnes ;
  • les modification de mise en forme de plusieurs éléments de contenu de la section aside dont la couleur d'arrière-plan et la couleur du texte.

22. Ajoutez une favicon à votre page

Le favicon est une petite image chargée dans l'en-tête de la fenêtre du navigateur, généralement à la gauche du texte du title.

Le favicon du tp3.

Il s'agit d'une image au format jpg, gif, png ou ico d'une taille obligatoire de 16x16 pixels ou de 32x32 pixels. Elle peut comporter de la transparence, comme c'est le cas de l'image gif montrée en exemple.

Cette image est chargée grâce à l'élément <link> que l'on insère dans l'élément <head> de la page HTML avec les attributs appropriés, comme le montre l'exemple suivant:

<link rel="icon" type="image/png" href="images/boucle.gif">

L'adresse du favicon (href) doit pointer là où se trouve l'image. Dans l'exemple ci-dessus, le favicon, dont le nom est boucle.gif, se trouve dans le dossier images, d'où l'adresse "images/boucle.gif".

Haut de page