Intégrer des images dans un document HTML

**taleb51** · 23/11/2013, 23h19

Bonjour
je voudrais savoir comment positionner plus de deux images en css et comment ecrire leur programme en html.je suis novis.
merci

**rodolphebrd** · 24/11/2013, 00h23

Bonjour,

Les solutions sont multiples...

Montrez-nous votre code pour préciser une réponse.

**Muchos** · 24/11/2013, 02h41

comment ecrire leur programme en html

Quoi?!

Pour intégrer une image, on utilise simplement la balise IMG.

**taleb51** · 27/11/2013, 23h33

bonjour
ce que je voudrais c'est comment positionner la premiere image (drapalgerie2.jpg)
completement a droite ,la seconde(portable.jpg) completement a gauche et éventuellement une troisieme image(image.jpg) au milieu avec des (css) pour chaque image?.
voici mon html sur le <body> avec son css qui positionne les deux images a la meme position!!!

html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<figure> <img src="drapalgerie2.jpg" alt="drapeu du pays"  /> </figure>
<p> <img src="portable.jpg" alt="tel_portable"  /> </p>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
img {
float:right ;
width:50px;
height:40px;
border-radius:20px;
border: 1px solid #0000ff;}

merci

**Muchos** · 28/11/2013, 14h32

Bonjour taleb51,

Si vous ne connaissez pas bien HTML/CSS, ce que vous voulez faire est un peu difficile. Je vous donne donc une solution, en espérant que vous la compreniez.
Quelques remarques avant ça :

je vous conseille de lire les tutoriels CSS de ce site;
utilisez les bonnes balises HTML. La balise P définit un paragraphe, et FIGURE une illustration;
l'attribut ALT doit véritablement être l'alternative textuelle de votre image. Néanmoins, si c'est un simple habillage visuel (l'image pourrait ne pas être là), laissez le ALT vide.

Ma proposition est donc :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
 <meta charset="UTF-8" />
 <title>Mes images alignées.</title>
 <style type="text/css">
.gauche {
 float: left;
 /* À gauche et HORS du flux */
}
.droite {
 float: right;
 /* À droite et HORS du flux */
}
div {
 text-align: center;
 /* Tout élément DANS le flux est centré */
}
div::after {
 content: " ";
 display: block;
 clear: both;
 /* Tout ce qui suit
 passe en-dessous */
}
 </style>
</head>
<body>
<p>Avant les images...</p>
<div>
 <img alt="Developpez.com : Club des développeurs et IT pro" class="gauche"
  src="http://www.developpez.net/template/images/logo.png" />
 <img alt="Developpez.com : Club des développeurs et IT pro"
  src="http://www.developpez.net/template/images/logo.png" />
 <img alt="Developpez.com : Club des développeurs et IT pro" class="droite"
  src="http://www.developpez.net/template/images/logo.png" />
</div>
<p>Après les images...</p>
</body>
</html>

Intégrer des images dans un document HTML

HTML

Discussions similaires

Partager

Partager