CODAGE HTML et CSS
GRETA Clermont-Auvergne • Pôle Plurimédia
Précisions techniques
Insertion d'images
dans un diaporama reveal.js
Image derrière un texte
Comment placer une image
couvrant entièrement le fond d'une diapositive ?
▼
Repérer les balises <section>
Chaque diapositive est paramétrée entre les balises
<section> et </section>
Pour faciliter ce repérage, les diaporamas fournis
identifient les diapositives avec class="diapo"
▼
Où placer le code
d'une image de fond ?
Le code d'appel des images d'arrière-plan est placé
dans la balise <section> de la diapositive :
<section class="diapo"
data-background="img/nom-image.jpg"
data-background-size="cover">
▼
Où placer le fichier
de l'image de fond ?
Dans l'exemple ci-dessous,
l'image d'arrière-plan est placée
dans un dossier intitulé “img”
⬇
data-background="img/nom-image.jpg"
Image sous (ou sur) un texte
Comment placer une image dans une diapo,
avant ou après du texte ?
▼
Utiliser la balise <img>
Une image se paramètre dans une balise <img>
Cette balise est autofermante
(il n'y a pas de balise </img>)
▼
Quels codes utiliser pour paramétrer une image ?
Il s'agit d'appeler l'image dans la page,
de saisir sa description, puis de définir sa largeur
<img href="img/nom-image.jpg"
alt="photo du sujet"
style="width:200px">
▼
Où placer le fichier
de l'image incorporée ?
Dans l'exemple ci-dessous,
le fichier de l'image est placée
dans un dossier intitulé “img”
⬇
href="img/nom-image.jpg"
Collecte des images
On trouve de belles images, libres de droits,
sur les sites suivants :
Retouche d'images
On peut retoucher efficacement des images
sur les sites suivants (classés du plus simple au plus complexe) :