Intégrer des images dans un document HTML

Version imprimable

23/11/2013, 22h19
taleb51

Intégrer des images dans un document HTML

Bonjour
je voudrais savoir comment positionner plus de deux images en css et comment ecrire leur programme en html.je suis novis.
merci
23/11/2013, 23h23
rodolphebrd

Bonjour,

Les solutions sont multiples...

Montrez-nous votre code pour préciser une réponse.
24/11/2013, 01h41
Muchos

Citation:

comment ecrire leur programme en html

Quoi?! :aie:
Pour intégrer une image, on utilise simplement la balise IMG.
27/11/2013, 22h33
taleb51

differentes positions d'images
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:

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

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

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:

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>