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 CSSUne 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-planPositionne une image au pixel près.body { background-image: url ('arr-pln.gif'); background-position: 20px 20px; } Défilement de l'imageCette 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> |
|
|
|
