The mandate
Programmer en html - Les images

Programmer en html - Les images

Catégorie: Javascript.
Posté par le 23/05/2014.
Dernière mise à jour le 23/05/2014.

<<Tutoriel précédent    Tutoriel suivant>>

Description

Dans ce tutoriel, vous apprendrez comment afficher des images sur votre page html.

Introduction

Ce tutoriel peut être réalisé à l'aide d'un simple éditeur de texte comme le « bloc notes ». Il ne nécessite aucun prérequis.

les images

Si vous désirez mettre une image dans votre document html, vous devez utiliser la balise « img ». Voici un exemple d'utilisation de cette balise html:

<img width="120" src="http://www.tutorielsenfolie.com/logo.png" height="90" alt="Image tutoriel html" />

L'attribut « src » indique au navigateur où trouver l'image. Comme pour les liens celle-ci peut être absolue mais elle est généralement relative.

Par exemple, si vous créez votre propre image et l'enregistrez comme « image.jpg » dans un répertoire appelé « tutoriel/html/images » le code à inscrire dans votre fichier html est le suivant:

<img src="tutoriel/html/images/image.jpg" />

Les attributs de largeur (width) et de hauteur (height) sont nécessaires parce que s'ils n'existent pas, le navigateur aura tendance à calculer la taille de l'image lors du chargement de la page au lieu d'attendre la fin du chargement de celle-ci. Par exemple, sans les attributs de largeur et hauteur, la mise en page du document peut sauter durant le chargement de la page html.

Texte alternatif

Vous pouvez également utiliser l'attribut « alt » qui est la description alternative de l'image. Il est utilisé pour l'accessibilité de votre site web et fourni une description de l'image pour les utilisateurs qui ne peuvent pas voir l'image (s'ils sont malvoyants, par exemple).

NB: comme la balise <br/>, l'élément « img » ne peux pas renfermer de contenu. C'est pour cela qu'aucune balise de fermeture n'est nécessaire.

Les formats d'images

La construction d'images pour le web est en dehors du scope de ce tutoriel, mais il convient de vous donner plusieurs informations concernant les formats.
Les formats de fichiers les plus couramment utilisés pour les images sont JPEG, GIF, et PNG. Ce sont des formats compressés et ont des usages très différents.

JPEG

Une JPEG utilise un algorithme mathématique pour compresser l'image et la qualité de l'image est légèrement moins bonne. Moins l'image est compressée, plus la taille de celle-ci est grande et plus elle est nette.

Les JPEG sont généralement utilisées pour des images telles que des photographies.

GIF

Un GIF ne peut pas avoir plus de 256 couleurs, mais ils maintiennent les couleurs de l'image originale. Plus le nombre de couleur est petit, plus la taille du fichier le sera également. GIF permet également d'utiliser des pixels transparents.

Les GIF sont généralement utilisés pour des images sans dégradé de couleur, tels que des icônes ou logos.

PNG

Un PNG reproduit les couleurs, un peu comme un GIF, mais permet d'obtenir 16 millions de couleurs ainsi que la transparence alpha ( par exemple: une zone pourrait être 50% transparente ).

Les PNG sont généralement utilisées pour des images polyvalentes comme par exemple des captures d'écran ou des logos.

La connexion au web est toujours plus rapide, mais vous voulez évidemment que vos pages web se télécharge le plus rapidement possible. En utilisant des images à très haute résolution votre site risque d'être lent à charger. La compression de l'image est un outil formidable mais vous devez trouver un équilibre entre la qualité d'image et la taille de l'image. La plupart des programmes modernes de manipulation d'image vous permettent de compresser les images et la meilleure façon de savoir ce qui est le mieux adapté pour vous est d'essayer plusieurs types de compression d'image et de comparer les tailles et la qualité.

La suite de ce tutoriel vous expliquera comment utiliser des tableaux dans votre page web.

Tu as aimé ce tutoriel ?
Aide nous à améliorer le site ! Deviens partenaire officiel ou suis nous sur facebook !

<<Tutoriel précédent    Tutoriel suivant>>

Commentaires[0]

Tu as aimé ce tutoriel ? Alors partage-le avec tes amis !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo Voir le flux rss

Mots Clés: html HTML5 Programmer en html web

Veve :
(11/04/2013 - 17:19:44)
il faut juste mettre "sudo" à la place de "su" pour exécuter la commande en root

Veve :
(11/04/2013 - 17:18:56)
Salut tu peux aller lire ce tutoriel: http://www.tutorielsenfolie.com/tutoriels-63-installation-configuration-opennebula.html Il fonctionne aussi sous ubuntu

safa.souissi4 :
(10/04/2013 - 20:58:13)
s'il vous plait c urgent :(

safa.souissi4 :
(10/04/2013 - 20:56:25)
bonsoir,je cherche un tutos pour installer opennebula.org sous ubuntu 12.

Veve :
(18/03/2013 - 20:07:49)
oui, j'essaye de voir d'ou viens le problème.

sonde :
(18/03/2013 - 13:29:57)
re merci (j apprend un peu plus) je crois que j ai trouver pourquoi je peu pas poster si il y a ligne code impossible de poster lol

Veve :
(17/03/2013 - 21:34:49)
Salut, j'espère que ça t'a aidé.

sonde :
(17/03/2013 - 09:59:02)
pour ton aide

sonde :
(17/03/2013 - 09:57:36)
slt Veve impossible de laisser com

sonde :
(17/03/2013 - 09:56:55)
??

Demi-dieu :
(15/03/2013 - 18:41:13)
salut ^^

sonde :
(13/03/2013 - 14:49:35)
un petit coucou

Tanamoureuse :
(29/09/2011 - 06:11:08)
Je t'aime

Faire un don

Ma Publicité ici


Faire un don