1. Objectif de l’activité

  • Apprendre à concevoir une page web en utilisant HTML5

  • Apprendre à réaliser le disign d’une page web en utilisant CCS3

  • Réaliser une page web d’affichage de résultats de mesures d’une balise de radioactivité dans une page web statique.

geiger
Figure 1. Exemple de résultat à obtenir.

2. CSS3

Le CSS est le langage de base permettant de mettre en forme les pages webs qui consituent les sites internet. Il est simple et se maitrise assez vite. Découvrons pourquoi le CSS3 est incontournable, quels sont ses avantages et quels sont ses limites.

2.1. A quoi sert CSS3 ?

CSS est utilisé pour définir des styles pour les pages web, y compris la conception, la mise en page et les variations de l’affichage pour différents appareils et tailles d’écran.

Le langage HTML n’a jamais été destiné à contenir des balises pour le formatage d’une page Web !

HTML a été créé pour décrire le contenu d’une page Web.

<h1> Ceci est une rubrique </h1>

<p> Ceci est un paragraphe. </p>

Avec HTML3.2, certaines balise de formatage sont apparues comme <font> avec des attributs de couleur pour changer la police et la couleur du texte. Le développement de grands sites Web, où les informations des polices et la couleur ont été ajoutés à chaque page, est devenu un processus long et coûteux. De plus, la "relookage" d’un site nécessitait alors de reprendre tout le code du site.

Pour résoudre ce problème, le World Wide Web Consortium (W3C) créé CSS.

Désormais :

  • HTML définit la structure et le contenu d’une page web

  • CSS définit la mise en page, son aspect visuel.

exemple :

context
Figure 2. Accéder au code CSS d’une page web : Editeur de style {}

2.2. Avantages

  • Gain en productivité : CSS3 dispose de nombreux effets visuels comme on peut le constater avec l’exemple précédant. Les bords arrondis des éléments étaient autrefois difficiles à obtenir, il fallait définir plusieurs images et coder de nombreuses règles CSS à appliquer au code HTML. CSS3 à introduit une nouvelle règle appelée border-radius qui permet d’appliquer des arrondis à un élément. Cette propriété a en plus l’avantage de permettre d’appliquer un arrondi particulier pour chaque coin de l’élément. On peut appliquer un arrondi de 5px en haut à gauche, 10px en haut à droite, 5px en bas à droite et 10px en bas à gauche ou simplement un arrondi de 10px pour les quatre coins.

arrondis

  • Le gain de maintenance : Les définitions de style sont généralement enregistrées dans des fichiers .css externes. Avec un fichier de feuille de style externe, on peut changer l’apparence d’un site Web entier en modifiant un seul fichier !

2.3. Inconvénients

Les possibilités qu’offrent le langage sont très grandes et il est difficile pour un développeur de toutes les maitriser.

2.4. Les langages complémentaires au CSS3

D’autre langage, complémentaire au HTML5 seront nécessaire pour réaliser de belles pages web. Il pourront-être soit directement intégré dans la page soit écrits sur une autre page et reliés à la page codée en HTML5. Parmi ces principaux langages, ont retrouve :

  • HTML5 : Le HTML5 (HyperText Markup) est un langage qui repose sur le principe de balises imbriquées. En résumé, il sert à indiquer au navigateur comment afficher la page web qui pourra contenir aussi bien du texte, des images, des vidéos, des animations, …​.

  • Javascript : Le Javascript sert principalement à agir sur le comportement du navigateur. Avec ce langage, vous pourrez par exemple afficher une fenêtre d’alerte lorsqu’on clique sur un lien, mettre le site web dans les favoris, imprimer la page …

  • PHP : Le PHP est un langage très complet avec de nombreuse fonctions. Il permet de faire le lien entre votre site et une base de données, d’afficher son contenue de façon dynamique, de gérer des variables, de traiter des formulaires …

  • SQL : SQL est le langage pour agir sur vos base de données. Si le PHP fais le lien entre elles et votre site web, il vous faudra coder en SQL pour effectué des actions (ajouter, supprimer, modifier, trier, rechercher …) sur celles-ci.

2.5. Outils de développement

Si un simple bloc-note peut suffire pour coder en HTML5 ou CSS3, d’autres alternatives existent et apportent souvent un meilleur confort, en premier lieu, la coloration syntaxique, l’auto-complétion, le formatage du code (gestion des indentations) et la gestion du jeu de caractères (utf-8).

2.5.1. Editeurs payant :

2.5.2. Editeurs gratuits :

2.5.3. Editeurs "rustiques" :

2.5.4. IDE online https://repl.it/

Pour un premier exercice, nous allons utiliser un outil de développement online https://repl.it/. Repl est une interface de développement web qui permet de coder en ligne.

Cliquer sur le lien afin d’accéder à la page web https://repl.it/. Cliquer ensuite sur + new repl en haut à gauche de la page, sélectionner HTML, CSS, JS. Cliquer sur Create repl.

2.5.5. Documentation

On trouve beaucoup de tutoriels et de cours sur internet concernant le CSS. Il faut cependant faire attention de bien avoir à faire à la dernière version CSS3.

Parmis les meilleurs, on peut citer :

repl
Figure 3. Configurer repl pour développer en HTML, CSS et JavaScript

3. La syntaxe

La définition des styles repose sur une syntaxe simple :

selector

  • Selecteur : il s’agit d’une balise HTML, d’un de ses attributs, d’un élément HTML idendifié (le nom donné à une balise grace à son attribut id) ou à tout élément HTML appartenant à une même classe (attribut class).

  • Déclaration :

    • Le bloc de déclaration contient une ou plusieurs déclarations séparées par des point-virgules.

    • Chaque déclaration comprend un nom de propriété CSS et une valeur, séparés par deux points.

    • Une déclaration CSS se termine toujours par un point-virgule, et les blocs de déclaration sont entourés par des accolades.

Exemple
p {
  color: red;
  text-align: center;
}

Dans cet exemple, tous les paragraphes (balises <p>) de la page html où ce css sera appliqué seront alignés au centre, avec une couleur de texte en rouge :

3.1. Travail à faire : premier test

  • Saisir le code suivant et observer le résultat dans un navigateur.

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;
  text-align: center;
}
</style>
</head>
<body>

<p>Hello World!</p>
<p>Le style des paragraphes a été modifié par un CSS.</p>

</body>
</html>

3.2. Les commentaires

Les commentaires sont utilisés pour expliquer le code et doivent aider à le comprendre lorsque l’on cherchera à le modifier ultérieurement. Il est important de commenter efficacement son code, quelque soit le langage utilisé.

Les commentaires css sont ignorés par les navigateurs.

Un commentaire CSS commence par /* et se termine par */.
Les commentaires peuvent également étendre sur plusieurs lignes:

 
p {
  color: red;
  /* Ceci est un commentaire sur une seule ligne */
  text-align: center;
}

/* Ceci est un
commentaire
sur plusieurs lignes */

3.3. Les sélecteurs

Les sélecteurs CSS sont utilisés pour identifier dans la page web les éléments HTML qu’on souhaite modifier.

On peut diviser les sélecteurs CSS en cinq catégories:

  • sélecteurs simples

  • Sélecteurs combinés

  • Sélecteurs pseudo-classe

  • Sélecteurs pseudo-éléments (sélectionner un style pour une partie d’un élément)

  • Sélecteurs d’attribut (éléments de sélection en fonction d’un attribut ou valeur d’attribut)

3.3.1. Selecteurs simples

Nous avons précédemment testé l’utilisation d’un sélecteur simple pour redéfinir le style d’une balise HTML. Dans ce cas, toutes les balises de la page sont affectées identiquement. Pour modifier une balise spécifique, il faut l’identifier :

Le sélecteur d’ID css

  • Le sélecteur d’ID utilise l’attribut id d’un élément HTML pour sélectionner un élément spécifique.

  • L’identifiant d’un élément est unique dans une page, de sorte que le sélecteur id est utilisé pour sélectionner un élément unique.

  • Pour sélectionner un élément avec un identifiant spécifique, écrire un caractère dièse (#), suivi de l’identifiant de l’élément.

#para1 {
  text-align: center;
  color: red;
}

3.3.2. Travail à faire : Le sélecteur d’ID

  • Saisir le code suivant et observer le résultat dans un navigateur.

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>Ce paragraphe ne sera pas affecter par le style définit par le sélecteur #para1</p>

</body>
</html>
Le sélecteur de classe css

  • Le sélecteur de classe sélectionne les éléments HTML avec un attribut de classe spécifique (exemple : class="une_classe").

  • Pour sélectionner des éléments avec une classe spécifique, écrire un caractère point (.), suivi du nom de la classe.

Dans cet exemple, tous les éléments HTML avec class = "center_red" sera rouge et aligné au centre:
.center_red {
  text-align: center;
  color: red;
}

3.3.3. Travail à faire : Le sélecteur de classe

  • Saisir le code suivant et observer le résultat dans un navigateur.

<!DOCTYPE html>
<html>
<head>
<style>
.center_red {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center_red">Ce titre est centré et en rouge</h1>
<p class="center_red">Ce paragraphe est centré et en rouge. C'est la même classe qui est appliquée au titre et au paragraphe.</p>

</body>
</html>
Le sélecteur universel CSS

Le sélecteur universel (*) sélectionne tous les éléments HTML de la page.

* {
  text-align: center;
  color: blue;
}

3.3.4. Travail à faire : Le sélecteur universel

  • Saisir le code suivant et observer le résultat dans un navigateur.

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Tous les éléments de la page sont affectés par le style définit par sélecteur universel.</p>
<p id="para1">Même ce paragraphe </p>
<p>et celui-ci aussi !</p>

</body>
</html>

3.3.5. Les sélecteurs regroupés et combinés

Les sélecteurs regroupement de sélecteurs sélectionnent tous les éléments HTML avec les mêmes définitions de style.

Dans le code CSS suivant les éléments h1, h2 et p ont les mêmes définitions de style :

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

Il est alors préférable de les regrouper dans une même définition afin de minimiser le code.

Pour regrouper les sélecteurs, séparer chaque sélecteur par une virgule :

h1, h2, p {
  text-align: center;
  color: red;
}

3.3.6. Travail à faire : Regroupement et combinaison de sélecteurs

  • Saisir le code suivant et observer le résultat dans un navigateur.

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: red;
}

p {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Ici un titre de niveau 2</h2>
<p>Ici un paragraphe. Tous les styles sont identiques et définit dans un regroupement.
Les paragraphes combinent deux styles.
</p>

</body>
</html>

3.3.7. Synthèse sur les sélecteurs

Sélecteur Exemple Description

.class

.intro

Sélectionne tous les éléments avec class="intro"

#id

#firstname

Sélectionne l’élément avec id="firstname"

*

*

Sélectionne tous les éléments

element

p

Sélectionne tous les <p>

element,element,..

div, p

Sélectionne tous les <div> et tous les <p>

4. Insérer un css

Lorsqu’un navigateur lit une feuille de style, il forme le document HTML selon les informations qu’elle contient.

Il y a trois façons d’insérer une feuille de style:

  • CSS interne

  • CSS en ligne

  • CSS externe

4.1. CSS interne

  • Une feuille de style interne peut être utilisé si une seule page HTML a un style unique.

  • Le style interne est défini dans l’élément <style>, à l’intérieur de la section de tête.

4.2. CSS en ligne

  • Un style en ligne peut être utilisé pour appliquer un style unique pour un seul élément.

  • Pour utiliser les styles en ligne, on ajoute l’attribut de style à l’élément concerné. L’attribut style peut contenir une propriété CSS.

Exemple
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">Titre principal</h1>
<p style="color:red;">Un paragraphe.</p>

</body>
</html>

4.3. CSS externe

  • Avec une feuille de style externe, on peut changer l’apparence d’un site Web entier en changeant un seul fichier !

  • Chaque page HTML doit inclure une référence (chemin d’accès) au fichier de feuille de style externe dans l’élément <link>, dans la section de la tête.

Exemple
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

</body>
</html>

4.3.1. Travail à faire : Feuille de style externe

  • Saisir le code suivant et observer le résultat dans un navigateur.

Code HTML de la page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Titre principal</h1>
<p>Un paragraphe.</p>

</body>
</html>
Feuille de style css : style.css
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

5. Les principales propriétés CSS

L’ensemble des propriétés CSS sont listées et documentées ici : https://www.w3schools.com/cssref/default.asp

Les propriétés CSS sont trop nombreuses pour que ce cours puisse toutes les explorer. Nous nous contenterons des principales.

5.1. L’arrière plan d’un élément

Il existe des propriétés de base CSS pour définir les effets de fond pour les éléments.

propriétés de fond CSS:

  • Couleur de l’arrière plan

  • Image de fond

  • Répétition du fond

  • comportement de l’arrière plan

  • Position d’arrière-plan

5.1.1. Couleur de l’arrière plan : background-color

La propriété background-color spécifie la couleur de fond d’un élément.

La couleur d’arrière-plan d’une page est définie comme suit:

Exemple
body {
  background-color: lightblue;
}

Avec CSS, une couleur est le plus souvent définie par:

  • un nom de couleur valide - comme "red"

  • une valeur HEX - comme "# FF0000"

  • une valeur RGB - comme "rgb(255,0,0)"

Liste complète des valeurs de couleurs possibles : https://www.w3schools.com/cssref/css_colors_legal.asp.

5.1.2. Travail à faire : Couleur de fond des éléments

  • Saisir le code suivant et observer le résultat dans un navigateur.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Exemple d'utilisation de la propriété background-color</h1>
<div>
Ce texte est à l'intérieur d'une balise div (division).
<p>Ce texte est un nouveau paragraphe dans la division mais on a définit un background-color spécifique pour les paragraphe !</p>
Ce texte est encore dans la division.
</div>

</body>
</html>

5.1.3. Image d’arrière plan : background-image

La propriété background-image spécifie une image à utiliser comme arrière-plan d’un élément.

Par défaut, l’image est répétée de sorte qu’elle couvre l’élément entier.

L’image d’arrière-plan d’une page peut être définie comme ceci:

Exemple
body {
  background-image: url("image.jpg");
}

5.1.4. Travail à faire : Image de fond

  • Télécharger l’image suivante et insérer la en fond de page dans une page web :

fond page web oeillets

5.1.5. Répétition de l’image d’arrière plan : background-repeat

Par défaut, la propriété background-image répète une image à la fois horizontalement et verticalement. La propriété background-repeat permet de la répéter uniquement :

  • verticalement : repeat-y;

  • horizontalement : repeat-x;

  • pas répétée : no-repeat

Certaines images ne doivent être répétées que horizontalement ou verticalement pour ne pas apparaitre de façon étrange comme ceci:

Exemple
body {
  background-image: url("gradient_bg.png");
}
strangeBackground

Si l’image ci-dessus est répétée seulement horizontalement (background-repeat: repeat-x;), l’arrière-plan sera mieux:

Exemple
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
repeatxBackground

On pourra parfois ne pas souhaiter répéter l’image d’arrière-plan.

Exemple
/*Montrer l'image d'arrière-plan une seule fois:*/
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}
norepeat

5.1.6. Position de l’arrière-plan : background-position

La propriété background-position est utilisée pour spécifier la position de l’image d’arrière-plan.
Elle peut prendre pour valeur :

  • une combinaison de (left, right, center) et de (top, center, bottom), exemple : left center

  • une position absolue en pixels (xpos ypos), exemple : 100px, 200px

  • une position relative (x% y%), exemple : 50% 50%

Exemple
/*Placez l'image d'arrière-plan dans le coin en haut à droite:*/
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
backgroundPosition

5.1.7. Comportement de l’image d’arrière-plan : background-attachment

La propriété background-attachment indique si l’image d’arrière-plan doit défiler ou être fixes (ne défile pas avec le reste de la page).

Les valeur qu’elle peut prendre sont :

  • fixed : fixe

  • scroll : peut défiler.

Exemple
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

Tester :

5.1.8. Raccourci des propriétés de l’arrière plan

Pour raccourcir le code, il est également possible de spécifier toutes les propriétés d’arrière-plan dans une propriété unique. Ceci est appelé une propriété raccourcie.

La propriété background est un raccourci pour définir toutes les propriété de l’arrière-plan .

Exemple
body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

5.1.9. Travail à faire : Manipuler l’arrière-plan

  • Faire les 5 exercices auto-corrigés CSS Background de w3schools

5.2. Le formatage du texte

Le formatage du texte est l’une des principales utilisation du CSS. Il permet, en autre, d’agir sur :

  • La police de caractères (la famille de polices, la taille et le style d’un texte)

  • La couleur

  • L’alignement

  • La décoration

  • …​

5.2.1. Famille de polices

En CSS, il existe deux types de noms de famille de polices:

  • famille générique - un groupe de familles de polices avec un aspect similaire (comme « Serif » ou « Monospace »)

  • famille de polices - une famille de polices spécifiques (comme « Times New Roman » ou « Arial »)

Famille générique Famille de police Style Description
Serif Times New Roman
Georgia		 Les polices Serif ont des petites lignes aux extrémités de certains caractères
Sans-serif Arial
Verdana		 Ces polices n'ont pas la lignes à la fin des caractères
Monospace Courier New
Lucida Console		 Tous les caractères monospaces ont la même largeur

  • La famille de la police d’un texte est défini avec la propriété font-family.

  • La propriété font-family peut contenir plusieurs noms de polices qui pourront se substiter : si le navigateur ne supporte pas la première police, il essaie la police suivante, et ainsi de suite.

  • On commence par indiquer la police que l’on veux, puis en dernier recours, on indique une famille générique. Le navigateur pourra choisir une police similaire dans la famille générique, si aucune autre police indiquée n’est disponible.

  • Si plus d’une famille de polices est spécifiée, on les sépare par des virgules

Remarque : Si le nom d’une famille de polices est plus d’un mot, il doit être entre guillemets, comme: "Times New Roman".

Exemple
p {
  font-family: "Times New Roman", Times, serif;
}

5.2.2. Travail à faire : Famille de police

  • Saisir le code HTML suivant et le tester dans un navigateur :

<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
  font-family: "Times New Roman", Times, serif;
}

p.sansserif {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

<h1>Famille de polices de caractères CSS</h1>
<p class="serif">Paragraphe dont la police de caractères est Times New Roman, ou à défaut Times, ou à défaut une police de type Serif.</p>
<p class="sansserif">Paragraphe dont la police de caractères est Arial, ou à défaut Helvetica, ou à défaut une police de type Sans Serif.</p>

</body>
</html>

  • Appliquer la famille de police monospace aux balises de titre principal.

5.2.3. Taille de police

  • La propriété font-size définit la taille du texte.

  • La valeur taille de la police peut être une taille absolue ou relative :

    • Taille absolue :

      • Définit le texte à une taille spécifiée

      • Ne permet pas à un utilisateur de changer la taille du texte dans tous les navigateurs (mauvais pour des raisons d’accessibilité)

      • Cette solution est utile lorsque la taille physique du périférique est connue (par exemple un écran d’affichage).

    • Taille relative :

      • Définit la taille par rapport aux éléments environnants

      • Permet à un utilisateur de changer la taille du texte dans les navigateurs

Remarque : Si vous ne spécifiez pas une taille de police, la taille par défaut pour le texte normal, comme les paragraphes, est 16px (16px = 1em).

  • Être en mesure de gérer la taille du texte est important dans la conception web.

  • Toujours utiliser les balises HTML appropriées, comme <h1> - <h6> pour les titres et <p> pour les paragraphes.

  • Ne pas utiliser la propriété de taille de police pour faire ressembler un <p> à un <h1> par exemple.
Exemple
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 0.875em;
}

5.2.4. Travail à faire : taille de police

  • Saisir le code HTML suivant et le tester dans un navigateur :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>
</head>
<body>

<h1>Titre principal</h1>
<h2>Titre secondaire</h2>
<p>Ceci est le premier paragraphe.</p>
<p>Ceci est le second paragraphe.</p>

</body>
</html>

  • Créer une sous-classe p.fixe qui définie une taille fixe de caractères de 14px.

  • Appliquer cette sous-classe au premier paragraphe.

  • Créer une sous-classe p.relative qui définie une taille relative de caractère de 0,5em (soit 50% de la taille normale).

  • Appliquer cette sous-classe au second paragraphe.

5.2.5. Le style de police

La propriété font-style est principalement utilisée pour spécifier le texte en italique.

Cette propriété a trois valeurs:

  • normale - Le texte est affiché normalement

  • italique - Le texte est en italique

Exemple
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

5.2.6. Poids police

  • La propriété font-weight spécifie le poids d’une police :

Exemple
p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

5.2.7. Travail à faire : Exercices sur les polices de caractères

  • Faire les 5 exercices auto-corrigés CSS Font de w3schools

5.3. Les attributs du texte

5.3.1. Couleur du texte

  • La propriété color est utilisée pour définir la couleur du texte.

  • La couleur du texte par défaut pour une page est généralement définie dans le sélecteur de corps body { color: DarkSlateGray;}.

  • La couleur est spécifiée par:

    • un nom de couleur - comme « rouge »

    • une valeur HEX - comme "# FF0000"

    • une valeur RGB - comme "rgb (255,0,0)"

Exemple
body {
  color: blue;
}

h1 {
  color: green;
}

p {
  color: rgb(169, 169, 169);
}

a {
  text-decoration: none;
  color: #008CBA;
}

5.3.2. Travail à faire : Couleur du texte

  • Saisir le code HTML suivant et le tester dans un navigateur :

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: blue;
}

</style>
</head>
<body>

<h1>Titre principal : On souhaite que le texte soit en vert. </h1>
<p>Ceci est un paragraphe ordinaire. La couleur de texte par défaut est bleu, elle est définie dans le sélecteur body.</p>

</body>
</html>

  • Créer le sélecteur approprié pour que tous les titres principaux soient en vert.

5.3.3. Alignement du texte

  • La propriété text-align est utilisée pour définir l’alignement horizontal d’un texte.

  • Un texte peut être aligné :

    • à gauche : left

    • à droite : right

    • centré : center

    • justifié : justify

Le montre l’exemple ci-après centre aligné, et à droite et à gauche du texte aligné (alignement à gauche est sélectionné par défaut si la direction du texte est de gauche à droite, et l’alignement à droite est par défaut si la direction du texte est de droite à gauche): .Exemple

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

5.3.4. Décoration de texte

  • La propriété text-decoration est utilisée pour souligner, barrer, …​, le texte.

  • La propriété text-decoration est composée de plusieurs sous-propriétés :

    • text-decoration-line : définit le genre de décoration de texte à utiliser :

      • souligné : underline

      • surligné : overline

      • barré : line-through

    • text-decoration-color : spécifie la couleur de la décoration appliquée

    • text-decoration-style : propriété définit le style de la décoration appliquée :

      • solide : solid

      • ondulé : wavy

      • pointillés : dashed, dotted

      • double : double

Exemple
a {
  text-decoration: none;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: solid;
}

h1 {
  text-decoration: underline overline dotted red;
}

5.3.5. Travail à faire : Exercices sur les attributs du texte

  • Faire les 5 exercices auto-corrigés CSS Text de w3schools

5.4. Le modèle des boites

Tous les éléments HTML peuvent être considérés comme des boîtes. En CSS, le terme "modèle de boîte" (box model) est utilisé quand on parle de la conception et la mise en page.

Le modèle de boîte CSS définit une boîte qui entoure tous les éléments HTML. Il se compose :

  • de marges,

  • des bordures,

  • du rembourrage,

  • du contenu réel.

L’image ci-dessous illustre le modèle de boîte:

boxmodel

Explication des différentes parties:

  • Contenu : Content Le contenu de la boîte, où le texte et les images apparaissent

  • Rembourrage : Padding Efface une zone autour du contenu. Le rembourrage est transparent

  • bordure : Border bordure qui va autour du rembourrage et le contenu

  • Marge : Margin Efface une zone en dehors de la bordure. La marge est transparent

Le modèle de boîte nous permet d’ajouter une bordure autour des éléments, et de définir l’espace entre les éléments.

Exemple : Démonstration du modèle de boîte
div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
demoboxmodel

5.4.1. La largeur et la hauteur d’un élément

Pour régler la largeur et la hauteur d’un élément correctement dans tous les navigateurs, il faut savoir comment fonctionne le modèle de boîte :

Lorsqu’on définit les propriétés de largeur (width) et de hauteur (height) d’un élément avec CSS, on ne définit que la largeur et la hauteur de la zone de contenu.
Pour calculer la taille totale d’un élément, il faut également ajouter le remplissage, les bordures et les marges.
Exemple : cet élément <div> aura une largeur totale de 350px
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

Voici le calcul:

320px (largeur)
+ 20px (remplissage gauche et droite)
+ 10px (bordure gauche et droite)
+ 0px (marge gauche et droite)
= 350px

La largeur totale d’un élément doit être calculé comme suit:

Largeur totale de l’élément =
largeur + remplissage gauche
+ remplissage droite
+ bordure bordure
+ bordure droite
+ marge gauche
+ marge droite

La hauteur totale d’un élément doit être calculé comme suit:

Hauteur totale de l’élément =
hauteur
+ rembourrage supérieure
+ rembourrage inférieure
+ bordure supérieure
+ bordure inférieure
+ marge supérieure
+ marge inférieure

5.4.2. Travail à faire : Exercices sur les attributs du texte

  • Faire les 4 exercices auto-corrigés CSS Box Model de w3schools

5.4.3. Poisitionnement d’un élément : Mise en page flottante

  • La propriété float indique comment un élément sera positionner dans sa boite (on dit flotter), par exemple une image à gauche du texte dans une boite.

  • La propriété float peut avoir l’une des valeurs suivantes :

    • left :L’élément flotte à la gauche de son conteneur

    • right : L’élément flottant à droite de son récipient

    • none : L’élément ne flotte pas (sera affiché à l’endroit où il se trouve dans le texte).

  • La propriété clear spécifie de quel côté il ne doit pas y avoir d’autres éléments.

Exemple de l’utilisation des propriétés float et clear

5.4.4. Le clearfix Hack

Si un élément est plus grand que l’élément contenant et qu’il est flottant, il sera en dehors de son contenant. La propriété clearfix::after permet de régler ce problème :

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
clearfix

Exemple de l’utilisation des propriétés float et clearfix

Avec les propriétés float et clearfix, il est facile de positionner des boîtes côtes à côtes :

Exemple
* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
  padding: 50px; /* if you want space between the images */
}

Exemple de positionnement de boites côtes à côtes

Prorpiété box-sizing

On peut facilement créer trois boîtes flottantes côte à côte. Cependant, lorsque si on ajoute quelque chose qui agrandit la largeur de chaque boîte (par exemple un rembourrage ou une bordure), le positionnement des boîtes est rompu. La propriété box-sizing permet d’inclure le rembourrage et la bordure dans la largeur totale de la boîte (et hauteur) ce qui permet de conserver le positionnement des boites.

Tout savoir sur la mise page flottante

5.4.5. Travail à faire : Exercices sur la mise page flottante

  • A partir du code de la page d’exemple :

    • Supprimer le sélecteur universel et observer les effets

    • Réintroduire le sélecteur universel, supprimer le sélecteur clearfix et observer les effets.

    • Ajouter une bordure solide de 5px aux boites.

    • Créer une classe red_bord qui spécifie une bordure rouge de 5px et l’appliquer au dernier paragraphe.

    • Pour dégager le dernier paragraphe des boites, ajouter à la classe red_bord un remplissage au dessus.

    • On note que cette solution n’a aucun effet. Réintroduire le sélecteur clearfix et observer les effets.

    • Dans la boite de droite, répéter 10 fois le paragraphe Some text inside the box. et observer les effets.

    • Ajouter la propriété adéquate pour fixer la hauteur de la boite à 500px.

    • Toujours dans la boite de droite, répéter 10 fois de plus le paragraphe Some text inside the box. et observer les effet.

    • Le contenu de la boite déborde (trop plein). Ajouter la propriété overflow: auto; à la classe box et observer les effets.

Débordement :

  • La propriété overflow (ou overflow-x ou overflow-y) indique si on doit ajouter des barres de défilement lorsque le contenu d’un élément est trop grand pour tenir dans la zone spécifiée, ou s’il faut le couper brutalement.

  • La propriété overflow` peut prendre les valeurs suivantes:

    • visible : Défaut. Le trop-plein n’est pas coupé. Le contenu déborde à l’extérieur de l’élément.

    • hidden : Le trop-plein est coupé, et le reste du contenu sera invisible.

    • scroll : Le trop-plein est éclipsé, et une barre de défilement est ajouté pour voir le reste du contenu.

    • auto : Similaires scroll, mais il ajoute des barres de défilement seulement si nécessaire.

  • Faire les 3 exercices auto-corrigés CSS Overflow de w3schools

6. Applications

6.1. Lorem ipsum

6.1.1. Travail à faire : Mise en forme d’un texte

  • Télécharger le fichier loremipsum.html et l’ouvrir dans un navigateur

  • Ouvrir le fichier HTML avec un éditeur de texte et repérer la structure de la page :

-body
 |-header
 |
 |-section class="section" id="section1"
 | |-article id="article1"
 | |-article id="article2"
 | |-article id="article3"
 |
 |-div
 | |-lien
 |-footer

  • Identifier le nom du fichier css qui assurera la mise en page et créer ce fichier

  • Ajouter dans ce fichier les règles css suivante :

    • Corps de la page :

      • Couleur de fond : #f1f1f1;

      • Polices : Arial, Helvetica, sans-serif;

    • Entête :

      • Rembourrage : 30px;

      • Alignement du texte : centré

      • Taille de la police : 35px;

    • Pied de page :

      • Couleur de fond : Noir

      • Rembourrage : 10px;

      • Alignement du texte : centré

      • Couleur du texte : Blanc

    • Lien

      • Pas de décoration du texte (lien non souligné)

      • Couleur du texte : DarkGrey

      • Poid de la police : gras (bold;)

      • Taille de la police : 1,5 fois la taille normale (1.5em;)

      • Couleur du texte au passage de la souris : grey

    • Les articles : Ils seront placés côte à côte dans 3 boites de largeurs identiques sur 100% de la largeur de l’écran

      • Premier arcticle à gauche de l’écran : float: left;

      • Rembourrage : 10px

      • Hauteur : 500px

      • Ajout automatique des barres de défilements si nécessaires.

      • Couleur de fond de l’article 1 : #ccc;

      • Couleur de fond de l’article 2 : #aaa;

      • Couleur de fond de l’article 3 : #bbb;

loremipsum
Figure 4. Résultat attendu

6.2. Mesure de la radioctivité

6.2.1. Travail à faire : Mise en forme d’une page

  • Télécharger le fichier geiger.html et l’ouvrir dans un navigateur

  • Ouvrir le fichier html avec un éditeur de texte et repérer la structure de la page

  • Créer et ajouter un fichier css pour assurer sa mise page pour obtenir un résultat comme ci-dessous.

Vous avez une totale liberté pour réaliser votre mise en page.

Soyez créatif !
geiger
Figure 5. Exemple de résultat à obtenir.

7. Aller plus loin…​

Il est fortement conseiller de faire les exercices auto-corrigés du site de référence w3school.com :

the end