7 - Plus de HTML : le multimédia
Vous savez maintenant faire beaucoup de choses. Mais reste encore beaucoup à faire pour réaliser un site capable d'afficher des informations.
- Les images
- Les tableaux
- Donner l'illusion d'un changement de texte sur la page
1 - Les images
Pour insérer des images dans une page html, il va falloir utiliser la balise img.
HTML gère les png, les jpeg (ou .jpg), les gif ...
Comme on veut afficher une image, il faut lui donner le nom et la localisation de l'image à travers l'attribut src, pour source.
Nous allons faire quelques exemples avec l'image du sigle Creative Commons et du sigle des codes OpenSource. Nous en profiterons pour donner quelques indications sur ces licencse (et d'autres).
01° Téléchargez les images ci-dessus (clic droit, enregistrer sous) et placez les comme indiqué ci-dessous : en gros, on met la première au même endroit que la page html et l'autre dans un sous-dossier nommé mes_images.
travail
page_1.html
cc.png
mes_images
Open_Source.png
Pour afficher cc.png à partir d'un code dans fichier page_1.html, c'est facile : comme l'image est au même endroit que le fichier html, donner simplement son nom (src="cc.png") permet de la trouver graçe à l'adressage relatif.
Pour afficher Open_Source.png à partir d'un code dans fichier page_1.html, c'est plus délicat : il faut indiquer la position du dossier contenant l'image à l'aide de son adresse relative, sachant qu'on part du dossier travail où se trouve la page html d'appel : src="telechargement/mes_images.png"
02° Rajouter les lignes suivantes pour afficher correctement les deux images sur votre page.
<img src="cc.png">
<img src="mes_images/Open_Source.png">
Normalement, nous avons :
Les deux images sont l'une à côté de l'autre : il s'agit donc d'une balise inline plutôt qu'une balise block. Enfin presque : en réalité, c'est une balise inline-block : c'est une balise inline mais qui possède des attributs width et heigth comme un block... D'ailleurs, la propriété CSS display peut réellement prendre les trois valeurs :
display: inline;
display: block;
display: inline-block;
On voit également que la balise img est une balise vide : elle ne contient que des attributs. Autre point important : elle ne possède obligatoirement pas de balise de fermeture. En HTML, ce n'est plus une nécessité. Par contre, si vous voulez un jour transformer votre document en XHTML, il faudra les rajouter. Ce langage est plus rigoureux.
Enfin, la balise src peut également contenir une adresse internet pointant vers l'image.
Texte alternatif
L'attribut alt permet d'afficher un texte alternatif si l'image ne peut s'afficher correctement pour une raison ou une autre (ici, j'ai volontairement fait l'erreur de remplacer les .png par des .gif).
<img src="cc.gif" alt="Logo CC">
<img src="mes_images/Open_Source.gif" alt="Logo Open Source">
03° Testez.Ca devrait donner le test ci-dessous.
Width et heigth
Autres attributs qui sont normalement obligatoires si vous voulez que votre site soit bien reconnu des malvoyants ou que votre site ne bouge pas trop lors du chargement des images : les attributs width et height.
Ainsi, normalement, il faut noter ceci dans votre code:
<img src="cc.png" alt="Logo CC" width="150" height="150">
<img src="mes_images/Open_Source.png" alt="Logo Open Source" width="165" height="165">
Mais c'est assez lourd à faire. C'est quelque chose qu'un générateur automatique de page html (en Php ou en Pyhton) pourrait faire de façon automatique par contre.
Title : texte au survol
L'attribut title qui permet d'afficher un texte lorsqu'on survole l'image.
<img src="cc.png" alt="Logo CC" width="150" height="150" title="LOGO CC">
<img src="mes_images/Open_Source.png" alt="Logo Open Source" width="165" height="165" title="LOGO OPEN SOURCE">
04° Testez.Ca devrait donner le résultat ci-dessous.
Image et Lien
Plutôt que de placer un texte à l'intérieur d'une balise a de lien, on peut utiliser une image.
A titre d'exemple, voilà un code permettant de partir vers la partie 06.
<a href="#partie_06">
<img src="telechargement/Open_Source.png" alt="Logo Open Source" width="165" height="165" title="VERS LE DEBUT DE LA PARTIE">
</a>
ou
<a href="#partie_06">
<img src="/telechargement/Open_Source.png" alt="Logo Open Source" width="165" height="165" title="VERS LE DEBUT DE LA PARTIE">
</a>
05° Créer deux liens en utilisant des images.
Image map
Voilà une partie très intéressante : gérer des zones sur une image.
On pourrait ainsi envisager une image du système solaire sur laquelle on pourrait créer des liens vers les planètes simplement en cliquant sur les planètes.
Voilà une image du système solaire utilisable légalement que j'ai trouvé ici : le-systeme-solaire.net.
Remarque : l'image est centrée, pour l'instant nous n'avons pas encore vu comment le faire proprement.
Pour définir des zones sur l'image, nous allons pouvoir utiliser un cercle, un rectangle ou un polygone.
Mais d'abord, il faut attribuer un attribut usemap à l'image voulue. On donnera comme valeur l'identifiant de la map(carte).
Ensuite, il faut définir les différentes zones (area à l'intérieur de l'image en utilisant une balise map dans laquelle on va donner les coordonnées des différentes zones.
<img class="affichage_image_b" src="systemesolaire.png" alt="Image du système solaire" usemap="#mes_zones">
<map name="mes_zones">
<area shape="circle" coords="134,82,10" href="#partie_01" alt="exemple cercle" title="cercle">
<area shape="rect" coords="0,24,35,133" href="#partie_02" alt="exemple rectangle" title="rectangle">
<area shape="poly" coords="252,82,271,59,312,53,294,88,252,96" href="#partie_03" alt="exemple polygone" title="polygone">
</map>
Cela donne l'image suivante.
06° Passez la souris sur l'image et tentez de retrouver les astres soumis à un lien.
Ordre des planètes : Mercure, Vénus, Terre, Mars, Jupiter, Saturne, Uranus, Neptune ( et Pluton qui a été retrogradée au statut de planète naine).
Pour rappel, le moyen mnémotechnique pour se souvenir de l'ordre des planètes :
Me Voilà Tout Mouillé, J‘ai Suivi Un Nuage.
C'est bien beau, mais comment je sais où trouver les coordonnées moi ?
Commençons par le cercle : il faut donner les coordonnées x du centre, y du centre et la valeur R du rayon.
Pour les trouver : on ouvre par exemple Paint et on pointe le centre de la Terre.
Les coordonnées du curseur s'affiche en bas à gauche de la fenêtre. Bilan : coordonnées du centre (134,82).
Pour trouver le rayon, il suffit de se placer sur le contour du cercle "Terre". Bilan : on obtient les coordonnées (123,89). Le rayon correspond à la distance entre le centre et son perimètre. Environ (134-123) pixels, soit un dizaine de pixels.
Pour le rectangle : il faut donner les coordonnées des 2 points dans l'ordre : Point x1 (en haut à gauche) puis point x2 (en bas à droite) : x1,y1,x2,y2.
Nous allons ainsi tracer un rectangle autour du bout de Soleil, on obtient 0,24,35,133.
Dernier élement : Le polygone : il suffit de prendre autant de points qu'on veut en donant à chaque fois x,y: x1,y1,x2,y2,x3,y3,x4,y4....
Nous allons ainsi tracer un rectangle autour du bout de Soleil, on obtient 0,24,35,133.
07° Créer votre page avec ces codes et gérer une ou deux planètes en plus.
Si votre image est vraiment compliquée, vous pouvez taper "image map" sur Internet. Vous trouverez bien des sites proposant de gérer des maps à l'aide d'un outil en ligne plutôt qu'en codant l'image à l'ancienne.
2 - Gestion des images en CSS
Image centrée
Commençons par voir comment centrer les images. Les images ont leur propre format d'affichage (propriété display: inline-block) : l'image se comporte comme un élément inline mais on peut modifier sa taille d'affichage (width, height) comme un élément block.
Si vous voulez centrer une image, il faut donc modifier le type d'affichage (display:block;) puis lui signaler de gérer automatiquement les marges droite et gauche (margin: auto;). Vous obtiendrez alors des images centrées sur la largeur voulue.
Si vous voulez faire cela sur toutes les images, il faut donc l'appliquer directement à la balise img, sinon il suffit de créer une class.
img
{
overflow:scroll; /* Signale d'utiliser la barre de défilement si l'image est trop grande */
text-align: center; /* Sera utilisé sur le texte alternatif s'il y a besoin */
display: block;
margin-left: auto;
margin-right: auto;
}
La première ligne précise d'afficher une barre de défilement si l'image dépasse la taille disponible.
La seconde signale de centrer également au besoin le texte alternatif (alt)
Image encadrée
Parfois, on désire que l'ima soit encadrée à droite ou à gauche par le texte. Il faut alors utiliser la propriété float.
Voilà ce qu'on obtient en mode normal en plaçant l'image (en display: inline-block attention) dans la balise p :
<p><img ...>Texte</p>
D'après le site Creative Commons : Creative Commons est une organisation à but non lucratif qui a pour dessein de faciliter la diffusion et le partage des oeuvres tout en accompagnant les nouvelles pratiques de création à l’ère numerique. Creative Commons propose des contrats-type ou licences pour la mise à disposition d’œuvres en ligne. Inspirés par les licences libres, les mouvementsopen source et open access, ces licences facilitent l’utilisation d’œuvres (textes, photos, musique, sites web, etc).
Pour en savoir plus, autant aller sur le site directement ICI
Comme vous le voyez, c'est moche car l'image augmente fortement la hauteur de la première ligne.
On peut faire mieux : on peut placer l'image encadrée par le texte en dehors de la balise p et utiliser la propriété float :
Soit
<img class=image_a_gauche" ...>
<p>Texte</p>
<p>Texte2</p>
Pour la classe image_a_gauche avec le css suivant :
.image_a_gauche
{
float: left;
}
Et ça donne :
D'après le site Creative Commons : Creative Commons est une organisation à but non lucratif qui a pour dessein de faciliter la diffusion et le partage des oeuvres tout en accompagnant les nouvelles pratiques de création à l’ère numerique. Creative Commons propose des contrats-type ou licences pour la mise à disposition d’œuvres en ligne. Inspirés par les licences libres, les mouvementsopen source et open access, ces licences facilitent l’utilisation d’œuvres (textes, photos, musique, sites web, etc).
Pour en savoir plus, autant aller sur le site directement ICI
Ca manque de marge à droite, non ? Si je rajoute dans le CSS de l'image : margin-right: 10px, on obtient :
D'après le site Creative Commons : Creative Commons est une organisation à but non lucratif qui a pour dessein de faciliter la diffusion et le partage des oeuvres tout en accompagnant les nouvelles pratiques de création à l’ère numerique. Creative Commons propose des contrats-type ou licences pour la mise à disposition d’œuvres en ligne. Inspirés par les licences libres, les mouvementsopen source et open access, ces licences facilitent l’utilisation d’œuvres (textes, photos, musique, sites web, etc).
Pour en savoir plus, autant aller sur le site directement ICI
08° Recreer cette disposition :
D'après le site Creative Commons : Creative Commons est une organisation à but non lucratif qui a pour dessein de faciliter la diffusion et le partage des oeuvres tout en accompagnant les nouvelles pratiques de création à l’ère numerique. Creative Commons propose des contrats-type ou licences pour la mise à disposition d’œuvres en ligne. Inspirés par les licences libres, les mouvementsopen source et open access, ces licences facilitent l’utilisation d’œuvres (textes, photos, musique, sites web, etc).
Pour en savoir plus, autant aller sur le site directement ICI
Par contre, si on veut que l'image n'empiète pas sur le second paragraphe, c'est raté !
Heureusement, il suffit d'appliquer la propriété css suivante au second paragraphe :
<img class="image_a_gauche" ...>
<p>Texte</p>
<p style="clear: left;">Texte2</p>
Et ça donne :
D'après le site Creative Commons : Creative Commons est une organisation à but non lucratif qui a pour dessein de faciliter la diffusion et le partage des oeuvres tout en accompagnant les nouvelles pratiques de création à l’ère numerique. Creative Commons propose des contrats-type ou licences pour la mise à disposition d’œuvres en ligne. Inspirés par les licences libres, les mouvementsopen source et open access, ces licences facilitent l’utilisation d’œuvres (textes, photos, musique, sites web, etc).
Pour en savoir plus, autant aller sur le site directement ICI
Remarque : le float fonctionne avec absolument tout : avec les balises p, div ... On peut donc faire un site entier en n'utilisant que ces propriétés. Par contre, la fonction flex que nous verrons plus tard font ça beaucoup mieux maintenant.
Image autodimensionnée
Si vous voulez que votre image soit redimensionnée automatiquement si sa taille de base est trop grande pour la taille de l'écran :
img {
max-width: 100%;
height: auto;
}
Toutes les images de ce site sont de ce type. Il suffit de réduire la taille de la fenètre pour le voir.
Bordure des images
Avec le CSS, vous pouvez également utiliser les propriétés des bordures dont l'effet bordure arrondie :
img {
border-radius: 20px;
}
Et cela donne
à partir de
On peut obtenir un effet image cerclée avec
img {
border-radius: 50%;
}
Et cela donne
à partir de
On peut rajouter ce qu'on veut à cette propriété bordure. Comme les hover :
img:hover {
box-shadow: 0 0 30px 5px rgba(50, 0, 50, 0.5);
}
Et cela donne ceci lorsqu'on passe au dessus de l'image :
Opacité
On peut rendre une image en partie opaque, en partie transparente. La valeur est à fixer entre 0 (transparente totale) à 1 (opacité totale).
img:hover {
opacity=0.3;
}
Voilà le résultat avec un coefficient de 0.3.
Voilà le résultat avec un coefficient de 0.6.
Voilà le résultat avec un coefficient de 0.9.
Effet sur les images
Nous allons retrouvé bons nombreux d'effets qu'on trouve dans les manipulateurs d'images ou dans le module PILLOW de Python. Voici les propriétés que vous pouvez rajouter dans le CSS :
Avec filter: blur(4px);, on obtient :
Avec filter: brightness(250%);, on obtient :
Avec filter: contrast(180%);, on obtient :
Avec filter: grayscale(100%);, on obtient :
Avec filter: hue-rotate(180deg);, on obtient :
Avec filter: invert(100%);, on obtient :
Avec filter: saturate(5);, on obtient :
Avec filter: sepia(50%);, on obtient :
Avec filter: drop-shadow(8px 8px 10px yellow);, on obtient :
Pour retrouver d'autres possibiltés, le mieux est d'aller voir sur le site de w3schools.
3 - Les tableaux
Les tableaux, c'est facile mais c'est long à coder.
Commençons par la balise-conteneur, celle qui englobe l'ensemble : la balise table
<table>
...
</table>
Dans cette balise, nous allons créer des lignes de tableaux. La balise qui désigne la ligne est la balise "table row" (rangée) tr
Pour créer un tableau à trois lignes :
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Il reste maintenant à définir le contenu de chaque ligne : le nombre de colonnes doit être identique sur chaque ligne. Le contenu (data) des cellules est défini par l'utilisation des balises "table data" td.
Si on veut 4 colonnes, on aura ainsi :
<table>
<tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr>
<tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr>
<tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr>
</table>
09° Créer un tableau de cinq lignes sur 4 colonnes qui ressemble ceci:
| Masse m(kg) | Age (années) | Durée (s) | Catégorie |
| 78 | 32 | 12.3 | Amateur |
| 65 | 22 | 11.2 | Amateur |
| 82 | 28 | 10.3 | Pro A |
| 75 | 25 | 10.2 | Pro B |
Si on réduit la taille de l'écran, les tableaux ont la facheuse tendance à prendre plus de place que le conteneur qu'on leur donne... Pour palier à cette inconvénient, on code souvent le tableau dans une div "conteneur" à laquelle on attribue une propriété CSS directement dans le HTML de façon à l'empécher de dépasser la taille imposée par le contenant global.
En réalité, il faudra taper ceci si vous voulez éviter les problèmes de tableaux qui cassent toutes votre belle présentation sur un petit écran:
<div style="overflow-x:auto;">
<table>
<tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr>
<tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr>
<tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr>
</table>
</div>
Dernière remarque : on veut parfois gérer le CSS de la première ligne différemment des autres : pour cela, on peut insérer une balise précisant que la première ligne est composé de l'en-tête du tableau, le header. Et la balise se nomme justement th pour table header. C'est bien fait, non ?
La balise th permet en plus d'indiquer au navigateur la nature des éléments présents en colonne dans votre tableau. Cela rajoute de la sémantique en gros.
<div style="overflow-x:auto;">
<table>
<tr> <th>en-tête</th> <th>en-tête</th> <th>en-tête</th> <th>en-tête</th> </tr>
<tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr>
<tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr>
</table>
</div>
10° Créer un tableau dont les en-têtes sont R, G, B, Couleur réelle.
La ligne suivante devra contenir la valeur de l'intensité et la dernière case devra avoir le fond coloré correspondant à la bonne combinaison.
Si vous ne voyez vraiment pas ce que je demande, faites un tour ici : ICI
8 - Gestion des tableaux en CSS
Encore une fois, le mieux est d'aller voir sur le site de w3schools.
Il manque encore une activité ici et deux questions.
11° ...
12° ...
5 - Modification de texte en CSS
Nous allons voir comment donner l'illusion qu'un texte change lorsqu'on le survole.
Voilà le texte de base
Magie : Le texte change !
En réalité, je n'ai pas du tout modifié le texte:
- J'ai créé une balise div contenant deux paragraphes identifiés par class="p1" et class="p2".
- J'utilise la classe du second paragrahe dans CSS pour ne pas le faire apparaitre à l'aide de la propriété display réglée à "none", "rien" :
display:none. - On va dire à CSS de faire disparaitre le paragraphe "p1" au survol de la balise div "essai_magie".
- On va dire à CSS de faire apparaître le paragraphe "p2" au survol de la balise div "essai_magie".
<div class="essai_magie">
<p class="p1">Voilà le texte de base</p>
<p class="p2">Magie : Le texte change !</p>
</div>
.p2
{
display:none;
}
.essai_magie:hover .p1
{
display:none;
}
.essai_magie:hover .p2
{
display:block;
}
Comme on agit sur des classes, on peut donc le faire en série sur un ensemble de balises div de classe "essai_magie".
13° Essayer de faire de même avec un ensemble de trois définitions dont seul le nom apparait au départ. Au survol du nom de la définition, on doit voir sa définition complète apparaître.
A titre d'exemple, voilà ce qu'on peut obtenir avec la liste de code précédente.
- J'ai créé une balise div contenant deux paragraphes identifiés par class="p1" et class="p2".
- J'utilise la classe du second paragrahe dans CSS pour ne pas le faire apparaitre à l'aide de display:none.
- On va dire à CSS de faire disparaitre le paragraphe "p1" au survol de la balise div "essai_magie".
- On va dire à CSS de faire apparaître le paragraphe "p2" au survol de la balise div "essai_magie".
...
<div class="essai_magie">
<p class="p1">Voilà le texte de base</p>
<p class="p2">Magie : Le texte change !</p>
</div>
...
.p2
{
display:none;
}
...
.essai_magie:hover .p1
{
display:none;
}
...
.essai_magie:hover .p2
{
display:block;
}
Comme vous le voyez, c'est perfectible mais c'est déjà pas mal pour quelques lignes de code.
Il existe une autre propriété assez similaire en CSS : la propriété visibility. Cela permet de cacher une balise mais elle continuera de prendre de la place sur la page, même sans apparaitre visuellement.
Les deux valeurs basiques sont :
visibility:visible;
visibility:hidden;
Pour rappel, avec la propriété display, nous avons vu :
display:block;
display:inline;
display:inline-block;
display:none;
Dans les prochaines activités, nous allons voir comment placer les éléments à gauche, à droite et comment gérer les affichages : vous avez certainement constaté que sur cette page, le menu de navigation change de place lorsque la taille de la fenêtre devient petite... Nous allons voir comment gérer cela en CSS.