terminal-media.fr
icon icon facebook icon icon icon icon
cross

 
rss
 
SERVICES


Les images et les images d'arrières-plans

Pour le web, il existe trois formats d'images principaux. le format est un type de fichiers possédant ses propres caractéristiques disctintes et peut-être utilisé néanmoins avec la même intention dans une page.

Voici les diffrerends types d'images pour le web de l'HTML5.

Gif : Elles peuvent soit être animées (reconstitués en séquences de plusieurs images) ou être fixes mais toujours dotés d'un nombre maximal de 256 couleurs. Utile pour créer des interfaces, leurs poids en octets et kiloctets, sont en général assez léger. Pratique pour un affichage rapide même sans réseau à haut débit alors que les zones d'accès à internet restant inégaux sur la planète. Pourtant au détriment de leur poids leur codage entraîne parfois une perte de qualité. L'extension est .gif

Jpeg : Codage d'image pour la photographie, il est un compromis entre me format gif et png, à la fois légèr et représenté parmi 16 millions de couleurs. Elles doivent être utilisées pour des images moyennes sans trop de contraste. L'extension est .jpg.

Png : format d'images s'affichant en seize millions de couleurs, pratique quand il s'agit de présenter des images grand format. Avec le soucis q'une qualité maximale. Le problème reste le poids de l'image et qui rends l'affichage de la page plus long. L'extension est .png.

A noter également:
Que les images doivent être numérisés en 72/dpi. C'est à dire en 72 point par inches. Le inches étand une unité de mesure anglaise.

Pour afficher une image la syntaxe est la suivante:
<img src="images/ma_photo.jpg" width="90" height="120" alt="le gars" />

A savoir que le dossier enfant s'appelle ci-dessus images et que l'image s'appelle ma_photo.jpg

Pour une image se trouvant sur un autre site à l'extérieur de celui-ci

<img src="http://www.terminal-media.fr/images/ma_photo.jpg" width="90" height="120" alt="le gars" />

A noter que seule dans la balise img l'attribut src (source) est obligatoire.

width : indique la largeur de l'image
height: indique la largeur.
alt: indique le texte alternatif qui s'affiche si l'image est absente.

Les images d'arrière-plan en CSS

Une couleur d'arrière-plan ou une image cela s'obtient en incluant dans le fichier css avec un sélecteur, la propriété, background-color: et la valeur red; ou background-color : et la valeur en héxadécimale #cc0000;

Ce qui donne avec le code dans la feuille de style:

body { background-color : #cc0000; }
ou

pour une image d'arrière-plan:
body { background-image: url ('arr-pln.gif'); }
Par défaut, l'image se répète jusqu'à remplir l'intégralité de l'arrière-plan du navigateur

Si l'on souhaite ne pas répéter l'image rajoutez la propriété :

body { background-image: url ('arr-pln.gif');
background-repeat: no-repeat; }


Pour la répéter, ce qui est la valeur par défaut:

background-repeat: repeat;

Si l'on souhaite répéter l'image uniquement à l'horizontale. Il faut préciser.

background-repeat: repeat-x;

ou pour à la verticale.

background-reapeat: repeat-y;

Positionner une image d'arrière-plan

Positionne une image au pixel près.
body { background-image: url ('arr-pln.gif');
background-position: 20px 20px; }

Défilement de l'image

Cette propriété permet de fixer une image alors que le reste de la page défile.

background-attachement: scroll;

background-attachement: fixed;

exemple :

<!DOCTYPE html>
<html lang="fr>
<head>
<meta charset="utf-8">
<title>HTML 5</title>
<style type="text/css">


body { background-image: url
(interface/fond.jpg);
background-repeat: no-repeat;}
background-position: center center;
background-attachement: fixed; }
.presentation { text-align-center; }
</style>
</head>
<body>
<p class="presentation" Un îlot de verdure, un jardin des plaisirs, quoi de plus pour vivre une incroyable aventure</p> </body>
</html>



Page précédente Revenir à la rubrique Page suivante