TP 4 : IMAGES ET ARRIERE-PLANS Les images dans le texte La balise img du langage Html permet d'insérer des images dans une page Html. Exemple : <img src ="fichier_image"> où fichier_image est le nom et l extension de l image si elle est située dans le même dossier que le fichier Html. Dans le cas contraire, il faut spécifier le chemin d accès à fichier_image. Les principaux attributs de la balise img sont les suivants : Attribut Valeur Effet visuel align alt border height hspace width vspace top texttop absmiddle middle absbottom bottom baseligne Texte alternatif au cas où l'image ne s'affiche pas Aligne l image au plus haut de la ligne Aligne l image au plus haut du texte de la ligne Centre l image sur le milieu du plus grand élément Centre l image sur la ligne de base Aligne le bas de l image sur le bas du plus grand élément Aligne le bas de l image sur le plus bas du texte Aligne le bas de l image sur la ligne de base Ajoute une info bulle explicative à l image Par défaut l'attribut border vaut 1 ce qui crée un petit cadre autour de l'image. Pour ne pas avoir ce désagrément pensez à le définir comme étant égal à 0 Fixe la hauteur de l image Spécifie l espace d'ajustement horizontal (soit les côtés gauche et droit) entre l'image et le texte adjacent Fixe la largeur de l image Spécifie l espace d'ajustement vertical (soit au-dessus et en dessous) entre l'image et le texte adjacent 1
Attribut Balises Valeur Effet visuel bgcolor body body "#$$$$$$" la valeur hexadécimale de la couleur ou "nom" le nom de la couleur Définit la couleur d arrière-plan de la page Définit l image d arrière-plan de la page background table tr "fichier_image" Définit l image d arrière-plan d un tableau Définit l image d arrière-plan d une ligne td Définit l image d arrière-plan d une cellule Exercice 4.1 : Les images seules Reproduisez la présentation suivante : 2
Exercice 4.2 : Du texte et de l image Reproduisez la présentation suivante : Exercice 4.3 : Du texte et de l image Reproduisez la présentation suivante. Utilisez un tableau pour relier comme ci-après les deux logos par deux lignes horizontales de couleur rouge et de taille 5. 3
Exercice 4.4 : Couleur d arrière plan Reproduisez la présentation suivante sur un arrière plan de couleur : 1. Utilisez un tableau pour aligner du texte à gauche de l image. 2. Insérer une ligne de séparation de couleur bleue à bordure rouge 3. Ajoutez un bord de 10 sur les côtés supérieur et inférieur d une image mais pas sur les côtés gauche et droit 4. Ajoutez un bord de 20 sur les côtés les côté gauche et droit d une image mais pas sur les côtés supérieur et inférieur d une image 4
Exercice 4.5 : Une image d arrière plan Insérez une image d arrière-plan dans une page, comme ci-après : Exercice 4.6 : Tableaux avec textes et images d arrière-plans Reproduisez la présentation suivante : 1. Ajoutez une image d arrière plan à un tableau 2. Ajoutez une image d arrière plan aux lignes d un tableau sans bordures 3. Ajoutez une image d arrière plan dans certaines cellules d un tableau 5
4. Ajoutez du texte sur une image : l image retenue devient une image d arrière plan d un tableau et le texte est simplement écrit à l intérieure de la cellule du tableau. Exercice 4.7 : Une image fractionnée A partir d une image comme la suivante, reproduisez les différents effets comme décrit ciaprès. 6
Reproduisez la présentation suivante : 1. Ajoutez une image d arrière plan aux cellules d un tableau (appelé par la suite table1) : l image retenue est une image d arrière plan d une cellule à la dimension exacte de l image, 2. Créez un effet de découpage vertical de l image en modifiant les paramètres de table1, 3. Créez un effet de découpage horizontal de l image en modifiant les paramètres de table1, 4. Créez un effet d agrandissement de l image en modifiant les paramètres du tableau en modifiant les paramètres de table1, 7
5. Créez l effet d un tableau à quatre cellules avec une image d arrière plan à la dimension exacte de la cellule sans modification des paramètres du tableau précédent 6. Fractionnez avec un logiciel de retouche d image (gimp, paint, etc) l image en quatre morceaux (image1, image2, image3 et image4) comme suit : image1 image2 image3 image4 A l aide de ces quatre petites images, reconstituez l image de départ. 8