Les Images

Voir au format PDF

Vous êtes ici : >> HTML-CSS / Les Images

Temps d'étude : 1h.

Niveau : Facile.

Tags : Les Images

Fichier(s) utile(s) pour ce cours : /

Afficher une image dans une page web html ?

Nous allons créer un premier fichier nommé : image.html
explications Html / Css

Pour afficher une image dans une page web, vous devez posséder un fichier image, de préférence l'extension doit être : .jpg, .png, .gif

Si vous n'avez pas d'image, vous ne pourrez rien afficher. ce qui parait plutôt logique.

Pour récupérrer une image, nous pouvons demander à notre ami Google de nous trouver cela :

explications Html / Css

Cliquer sur l'une des images :

Ensuite effectuer un clic droit > Enregistrer l'image sous.

Une fois que vous avez enregistré l'image, glissez la dans le même dossier que votre fichier html (juste à côté) :

Si le nom de l'image est un peu compliqué, il est préférable de renommer le fichier image.

Exemple Html

image.html

	<!Doctype html>
	<html>
		<head>
				<meta charset="utf-8">
			<title>Mon Image</title>
		</head>
		<body>			
			
			<img src="image.jpg" title="Cette photo montre un paysage de vacances" alt="Paysage Vacances">
			
		</body>
	</html>

Vous pouvez tester ce code, vous verrez qu'il fonctionne et affiche votre image.

Pour redimensionner et gérer la taille de votre image, l'idéal serait de passer par photoshop (logiciel de retouche d'image), sinon une option existe directement en code Html :

			<img src="image.jpg" title="Cette photo montre un paysage de vacances" alt="Paysage Vacances" width="200" height="150">

A vous de tester cela dans votre navigateur ! Exécution > Lancer dans Firefox.

Votre image ne s'affiche pas ?

Est-ce que votre fichier image.html est bien enregistré (ctrl+s) ?
Est-ce que votre fichier image.jpg est bien placé au même endroit (dans le même dossier) que le fichier image.html ?
Est-ce que le nom de votre fichier image est correct ?
L'extension de votre fichier est bien ".jpg" et non pas ".jpeg" ou ".png" ou ".gif" ?

Le Résultat
Paysage Vacances

Décryptons ensemble le code Html :

la balise <img> permet d'insérer une image en Html

L'attribut src="" permet de préciser le chemin de l'image

L'attribut title="" permet de préciser un titre pour l'image.
Vous ne l'avez pas vu s'afficher ? passez donc votre souris sur l'image !

L'attribut alt="" permet de préciser un texte de remplacement. Ce texte s'affichera si l'image est manquante et en plus de contribuer à un bon référencement, cela aide les personnes malvoyantes, il faut donc toujours penser à ajouter cet attribut !

L'attribut width="" permet de préciser la taille en largeur de votre image

L'attribut height="" permet de préciser la taille en hauteur de votre image

Résumé
Nous n'avons pas besoin de CSS si on souhaite afficher une image dans une page web mais nous pouvons utiliser du code CSS pour améliorer la mise en forme de l'image.

Afficher une image de fond dans une page web ?

Nous allons créer un premier fichier nommé : fond.html

Exemple Html :

fond.html

	<!Doctype html>
	<html>
		<head>
				<meta charset="utf-8">
			<title>Mon Fond</title>
			<link rel="stylesheet" href="fond.css">
		</head>
		<body>			
					
		</body>
	</html>

Exemple Css :

fond.css

		body{
		background: #000 url(fond.jpg) no-repeat;
		background-size: cover;
		}

Le Résultat

Décryptons le code :

body permet de selectionner tout le corps du document.

background permet d'appliquer un fond, nous choisissons une couleur noire #000 + une image fond.jpg + no-repeat nous demandons à ce que cette image ne soit pas répétée dans le cas où elle ne recouvre pas toute la zone du navigateur.

background-size est une propriété css3 permettant de couvrir tout l'écran, il s'agit d'un fond extensible, peut importe la taille et la résolution d'écran utilisées.

Faites le test !

Qu'elle est la différence entre intégrer une image avec la balise Html <img> et appliquer une image en fond via la propriété background en Css ?

Lorsqu'on utilise la propriété background, nous pourrons écrire par dessus

Si nous n'avons pas besoin d'écrire par dessus une image, dans la majorité des cas nous utiliserons la balise <img>

Gérer une opacité sur une image de fond ?

Pour gérer une opacité sur une image de fond, nous allons créer un premier fichier nommé : fond2.html

Pour afficher une image en fond d'une page web, vous devez posséder un fichier image, de préférence l'extension doit être : .jpg, .png, .gif

Exemple Html :

fond2.html

	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Mon Fond</title>
			<link rel="stylesheet" href="fond2.css">
		</head>
		<body>
			<div class="contenu">
				<p>Du texte...</p>
			</div>
		</body>
	</html>

Exemple Css :

fond2.css

	body{
	background: #000000 url(fond1.jpg) no-repeat; /* image de fond */
	background-size: cover; /* couverture du fond */
	}
	.contenu{
	background-color: rgba(255, 255, 255, 0.3); /* atténuation, nous gardons 30% de la couleur blanche */
	width: 800px; /* largeur */
	height: 500px; /* hauteur */
	margin: 200px auto 0 auto; /* marges ext*/.
	padding: 10px; /* marges int. */
	}
	.contenu  p{
	position : relative; /* positionnement */
	top: 50%; /* écartement de 50% du haut de la page */
	text-align: center; /* alignement du texte */
	}

Le Résultat

Décryptons ensemble le code :

body permet de selectionner tout le corps du document.

background permet d'appliquer un fond, nous choisissons une couleur noire #000 + une image fond.jpg + no-repeat nous demandons à ce que cette image ne soit pas répétée dans le cas où elle ne recouvre pas toute la zone du navigateur.

background-size est une propriété css3 permettant de couvrir tout l'écran, il s'agit d'un fond extensible, peut importe la taille et la résolution d'écran utilisées.

.contenu permet de selectionner une zone du document.

background-color: rgba(255, 255, 255, 0.3); (255, 255, 255 correspond au code couleur blanc), le 0.3 permet d'atténuer et de garder seulement 30% de sa couleur.
Un autre moyen consiste à utiliser la propriété CSS opactiy je vous la déconseille dans la mesure où cela atténuera également la couleur du texte (et non pas que le fond).

width: 800px; permet de fixer une largeur de 800 pixels.

height: 500px; permet de fixer une hauteur de 500 pixels.

margin: 200px auto 0 auto; permet de fixer les marges extérieures : 200pixels du haut, 0 en bas, automatique à gauche et à droite (permettant d'être centré horizontalement.

padding: 10px; permet de fixer les marges intérieures : 10px s'applique tout autour (haut, droite, bas, gauche) dans le contenu de la zone

.contenu p permet de selectionner le paragraphe p à l'intérieur de la zone

position : relative; permet de gérer le positionnement

top: 50%; permet de s'écarter de 50% du haut de page

text-align: center; permet de gérer l'alignement du texte

Créer un fond degradé avec linear gradient ?

Créons deux nouveaux fichiers : fond3.html & fond3.css

Exemple Html :

fond3.html

	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Mon Fond</title>
			<link rel="stylesheet" href="fond3.css">
		</head>
		<body>
			<div class="contenu">
				<p>Du texte...</p>
			</div>
		</body>
	</html>

Exemple Css :

fond3.css

	.contenu{
	background: #f6eadd; /* fond de couleur uni pour les anciens navigateurs */
	background: linear-gradient( #f6eadd, #f9dac3); /* fond degradé pour les nouveaux navigateurs qui prenne en charge cette valeur linear-gradient */
	width: 800px; /* largeur */
	height: 500px; /* hauteur */
	margin: 0 auto; /* marges extérieures */
	}

	/* Autres possibilités : */
	/* background: linear-gradient( to left, red, blue); 	-- direction du dégradé */
	/* background: -moz-linear-gradient(top, #f6eadd 0%, #f9dac3 100%); 	-- degradé pour Firefox */
	/* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6eadd), color-stop(100%,#f9dac3));	-- degradé pour GoogleChrome et Safari */
	/* background: -o-linear-gradient(top, #f6eadd 0%,#f9dac3 100%); 	-- degradé pour opera */
	/* background: -ms-linear-gradient(top, #f6eadd 0%,#f9dac3 100%); 	-- degradé pour InternetExplorer */
	/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6eadd', endColorstr='#f9dac3',GradientType=0 );	-- degradé pour IE6-9  */

Le Résultat

Nous remarquons ci-dessus le degradé dans les couleurs orange !

Effet de transition

Voici un exemple de transition sur les images :

image2.html

	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Image</title>
			<link rel="stylesheet" href="image2.css">
		</head>
		<body>
			<div>
				<img src="image.jpg">
				<img src="image.jpg">
				<img src="image.jpg">
			</div>
		</body>
	</html>

image2.css

	div{ margin: 100px 0 0 0; } /* marges */
	div  img{
    height: 100px; /* hauteur */
    width: 100px; /* largeur */
    border: 5px solid #ccc; /* bordure */
    float: left; /* effet flotant (côte à côte) */
    margin: 15px; /* marges */
    transition: margin 0.5s; /* durée de transition lorsque l'on survole l'élément (hover) */
	}
	div img:hover {
	margin-top: 2px; /* on modifie la marge de 2px vers le haut (au lieu de 15px initial) lors du survol */
	}

Le Résultat (passer votre souris sur l'image)

Décryptons le code :

div{margin: 100px 0 0 0; } permet d'ajouter 100pixels de marges

div img{ height: 100px; } permet d'ajouter une hauteur aux images

div img{ width: 100px; } permet d'ajouter une largeur aux images

div img{ border: 5px solid #ccc; } permet d'ajouter une bordure aux images

div img{ float: left; } permet de donner un effet "flottant" côte à côte aux images

div img{ margin: 15px; } permet d'ajouter de la marge extérieure autour des images

div img{ transition: margin 0.5s; } permet de donner un effet "progressif" dans la transition des margins sur les images

div img:hover{ margin-top: 2px; } permet de donner un effet différent lors du survol sur l'image avec le curseur de la souris

Effet grossissant

Voici un exemple de transition sur les images :

image3.html

	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Image</title>
			<link rel="stylesheet" href="image3.css">
		</head>
		<body>
			<div>
				<img src="image.jpg">
				<img src="image.jpg">
				<img src="image.jpg">
			</div>
		</body>
	</html>

image3.css

	img{
		height: 100px; /* hauteur */
		width: 200px; /* largeur */
		margin: 15px 0; /* marges ext. */
		transition: 1s; /* effet progressif de transition : 1 seconde */
	}
	img:hover { /* la taille est augmentée lors du survol et l'image décalée par le margin */
		height: 130px;
		width: 300px;
	}

Le Résultat (passer votre souris sur l'image)

Décryptons le code :

img{ height: 100px; } permet d'ajouter une hauteur aux images

img{ width: 200px; } permet d'ajouter une largeur aux images

img{ margin: 15px 0; } permet d'ajouter de la marges extérieure en haut et en bas des images

img{ transition: transition: 1s; } permet de donner un effet "progressif" dans la transition de la taille sur les images : 1 seconde

div img:hover{ height: 130px; } permet de donner un effet différent lors du survol sur l'image avec le curseur de la souris

div img:hover{ width: 400px; } permet de donner un effet différent lors du survol sur l'image avec le curseur de la souris

Effet de transition - Image - 4

Voici un exemple de transition sur les images :

image4.html

	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Image</title>
			<link rel="stylesheet" href="image4.css">
		</head>
		<body>
			<div>
				<img src="image.jpg"><p>Du texte d'accompagnement</p>
			</div>
		</body>
	</html>

image4.css

	div {
		height: 133px; /* hauteur */
		width: 730px; /* largeur */
		line-height: 0px; /* alignement dans la hauteur (du texte) */
		color: transparent; /* couleur transparente */
		font-size: 50px; /* taille du texte */
		text-transform: uppercase; /* transformation du texte en majuscule */
		transition: 0.5s; /* durée de transition */
	}
	div:hover {
		line-height: 210px; /* alignement dans la hauteur (du texte) */
		color: #575858;/* couleur */
	}
	div img{
		float: left; /* effet flottant (côte à côte) */
		margin: 0 15px; /* marges */
	}

Le Résultat

Décryptons le code :

div{ height: 133px; } permet d'ajouter une hauteur

div{ width: 730px; } permet d'ajouter une largeur

div{ line-height: 0px; } alignement vertical (du texte)

div{ color: transparent; } couleur transparente

div{ font-size: 50px; } taille du texte

div{ text-transform: uppercase; } transformation du texte en majuscule

div{ transition: 0.5s; } durée de transition

div:hover{ line-height: 210px; } Lors du survol, alignement dans la hauteur (du texte)

div:hover{ color: #575858; } Lors du survol, changement de couleur

div img{ float: left; } effet flottant (côte à côte)

div img{ margin: 0 15px; } marges extérieures

Effet de rotation

Voici un exemple de transition sur les images :

image5.html

	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Image</title>
			<link rel="stylesheet" href="image5.css">
		</head>
		<body>
			<div>
				<img src="image.jpg">
				<img src="image.jpg">
				<img src="image.jpg" class="rotation360">
			</div>
		</body>
	</html>

image5.css

		div img {
		margin: 20px; /* marges */
		border: 5px solid #eee; /* bordure */
		box-shadow: 4px 4px 4px rgba(0,0,0,0.2); /* ombre */
		transition: 0.5s; /* transition all : sur toutes les propriétés */
		}
		div img:hover {
		transform: rotate(-7deg); /* rotation 7 degrés */
		}
		div img.rotation360:hover {
		transform: rotate(-360deg); /* rotation 360 degrés */
		}

Le Résultat

Décryptons le code :

div img { margin: 20px; } marges extérieures

div img { border: 5px solid #eee; } bordure

div img { box-shadow: 4px 4px 4px rgba(0,0,0,0.2); } ombre

div img { transition: 0.5s; } effet de transition

div img:hover{ transform: rotate(-7deg); } rotation 7 degrés

div img.rotation360:hover{ transform: rotate(-360deg); } rotation 360 degrés

Allez au chapitre suivant : 10. Les Positionnements