Vous êtes sur la page 1sur 3

HTML

Les images
On peut insérer des images dans une page grâce au tag <img>

<img src="url" alt="texte alternatif " >


src Adresse de l’image (dans un sous dossier)

Dans un paragraphe
<p>
<img src="images/foot.jpg" alt="Photo de foot" />
</p>
Avec le tag marquee
<marquee> <img src="url" alt="texte alternatif " > </marquee>
Les formats d'image reconnus sur le Web, sont le format JPEG pour les photos ;
PNG pour toutes les autres illustrations ; GIF qui peut être animé.
HTML
On peut préciser la taille de l’image par les attributs height et
width
<input type="image" src="img_submit.gif" alt="Submit"
width="48" height="48"/>
Ajouter un infobulle avec l’attribut title
Aligner une image avec le css
<p class="flotte">
<img src="images/new.png" alt="Nouveau !" />
</p>
<p> Toutes les nouveautés, rien que des nouveautés. </p>

.flotte { float:left; }
Exercice
• Créer une page avec le paragraphe suivant :
• Casablanca est la capitale économique du Maroc. C'est la ville la plus peuplée du
Royaume, avec une zone métropolitaine de plus de 6 millions d’habitants.
• Ajouter un titre Casablanca.
• Ajoutez une «info-bulle» au paragraphe ci-dessus avec le texte «À propos de
CASABLANCA».
• Insérer une image de 250px sur 400px plan de casa
• Définir la couleur du paragraphe en bleu, police sur courrier et taille du texte sur
50px
• Placer une image de 42x42 à gauche du paragraphe représentant le port de casa
• Encadrer le paragraphe d’une bordure rouge de 1px
• Définir la couleur d’arrière plan sur rose pale de la page
• Ajouter un lien vers defaut.html. Cette page contient une liste de quartier, pour
chaque quartier on donnera son nom, et 2 rubriques l’une pour une description et
l’autre pour sa population. Il contient un lien retour vers le page sur casablanca

Vous aimerez peut-être aussi