HTML et CSS

HTML / CSS >
Eléments de contenu >
Images

Images

Pour cette partie il nous faut d'abord un fichier image (jpg, png, gif...). N'importe quelle image peut faire l'affaire (dans les limites de la décence et du bon goût, nous sommes en cours...). Nous aurons besoin de connaître son URL. Pour obtenir l'URL d'une image trouvée sur un site, faire un clic doit dessus et choisir "copier l'adresse de l'image" dans le menu contextuel. Certaines règles sont à respecter (voir post-it ci-contre) mais pour les besoins de l'exercice on peut les oublier momentanément.

Supposons qu'elle s'appelle 'monimage.jpg' et qu'elle soit enregistrée dans le dossier de travail 'essais_HTML_et_CSS'.

Code :

<img src="monimage.jpg">
Résultat :
image introuvable
L'attribut src indique l'URL de l'image. C'est le seul attribut indispensable pour insérer une image. La balise <img> est une balise vide.
Insérez une image de votre choix dans un fichier HTML.

Autres attributs recommandés de la balise <img>:
L'attribut "alt" permet d'indiquer le contenu de l'image pour le cas où elle ne pourrait pas être affichée (si elle est introuvable, par exemple).

<img src="monimage.jpg" alt="texte de remplacement">

Les attributs "height" et "width" permettent d'indiquer la taille en pixels de l'image affichée. Si un seul des deux est indiqué, l'image garde ses proportions initiales.
 

<img src="monimage.jpg"  height="120">


L'image (de taille originale largeur x hauteur = 100 x 80 pixels) a été agrandie jusqu'à une hauteur de 120 pixels en respectant ses proportions.
<img src="monimage.jpg" height="60" width="150" >


L'image a été mise aux dimensions largeur x hauteur = 300 x 60

Les attributs id et title s'appliquent aux images comme aux autres éléments HTML

Une image peut être utilisée pour faire, un lien en incorporant la balise <img> entre les balises<a> et </a>

Créez un fichier contenant 2 images, séparées par des sauts de ligne <br>.
Créez un lien de chaque image vers l'autre: en rétrécissant la fenêtre du navigateur on doit ne pouvoir voir qu'une image à la fois, et passer de l'une à l'autre en cliquant dessus.
Complétez le code pour qu'un texte "clique-moi" apparaisse lorsque le pointeur se place sur les images
 
Licence Creative Commons
licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé
Auteur : Nathalie Bonnin
Professeur de Physique, Chimie, Informatique au lycée La Martinière Monplaisir (Lyon 8ème)
Contact :
nathalie.bonnin (chez) scientillula.net
Licence Creative Commons
La totalité du contenu du site Scientillula.net appartient à Nathalie Bonnin et est mise à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé