1 / 12

Cours XHTML/CSS

Cours XHTML/CSS. Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images. Introduction. La manipulation d'images en CSS est un sujet très vaste mais aussi très intéressant. Dans un premier temps, nous nous limiterons à quelques exemples extrêmement simples :

step
Download Presentation

Cours XHTML/CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cours XHTML/CSS Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images

  2. Introduction La manipulation d'images en CSS est un sujet très vaste mais aussi très intéressant. Dans un premier temps, nous nous limiterons à quelques exemples extrêmement simples : • Insertion d'une image dans une page • Redimensionnement d'une image • Utilisation d'une image comme lien hypermédia • Suppression de la bordure d'une image

  3. Insérer une image dans une page Pour insérer une image dans une page Web, nous utiliserons la balise XHTML <img>. Commencez par repérer une image de taille raisonnable sur le disque dur de votre ordinateur et copiez-la dans le dossier "poub" ou "poubelle". Utilisez ensuite la balise <img> comme suit : <img src="Nom_Image.jpg"> Attention à la casse des caractères dans le nom de l'image.

  4. Solution <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </head> <body> <img src="monimage.jpg"> </body> </html>

  5. Modifier les dimensions d'une image Pour modifier la taille d'une image, vous pouvez utiliser les attributs width (largeur) et height (hauteur) dans la balise <img>. Par exemple : <img src="monimage.jpg width=100 height=100>

  6. Exercice Entrainez-vous à modifier les dimensions de l'image utilisée dans l'exercice précédent. Info : Plutôt que de réduire l'image en utilisant des attributs XHTML, vous pouvez aussi réduire directement l'image en utilisant un logiciel graphique quelconque. PhotoFiltre par exemple. L'image sera alors plus "légère", la page se chargera plus vite et vous n'aurez pas à utiliser les attributs width et height.

  7. Utiliser une image comme lien hypermédia Pour qu'une image devienne cliquable et oriente l'internaute vers une page de votre choix, il suffit d'entourer la balise <img> d'une balise <a> : <a href="mapage.htm> <img src="monimage.jpg"> </a>

  8. Exercice Définissez une image cliquable qui pointe vers le site Google.fr

  9. Solution <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> </style> </head> <body> <a href="http://www.google.fr> <img src="monimage.jpg"> </a> </body> </html>

  10. Suppression de la bordure autour d'une image Lorsque vous définissez un lien hypermédia sur une image, une bordure d'aspect plutôt désagréable entoure l'image. Pour la faire disparaître, vous initialiserez l'attribut border de la balise <img> à 0 :

  11. Exercice Supprimez la bordure qui apparaît autour de l'image de l'exercice précédent.

  12. Solution <html> <head> <style type="text/css"> </style> </head> <body> <a href="http://www.google.fr"> <img src="MVP.jpg" border=0> </a> </body> </html>

More Related