Wednesday, 25 February 2015

JOUR 2 HTML IMAGES

        </head>

             <body>
           
                 <h2>Cours de Programtion</h2>
                 <h5>JOUR 2: HTML Image Tag</h5>
           
                <!-- aujourdhui on passe au jour 2 de notre program -->
                <!-- les images sur le web -->
                <!-- pour afficher une image sur une page web on utilise le img tag defini par html-->
                <!--voici la syntaxe de base -->

                <img src="./welcome.jpg" />

                <!--vous remarquerez que le img tag n'as pas de closing tag comme d'autres tag -->
                <!--ce tag ou element contient un attribut , le src signifian source-->
                <!--ce dernier qui a comme valeur: la source relative de l'image (location de l'image)-->
                <!--ce dernier qui a comme valeur: la source relative de l'image (location de l'image)-->
                <!--dans le cas au dessu la location est -->
                <br>
                <!-- essayons d'ajouter quelques qttributs a notre image-->
                <img src="./welcome.jpg"  width="300" height="200"/>

                <!-- je vien de donner a l'image une largeur  widht ,et une hauteur height-->
                <br>
                 <img src="./welcome.jpg"  width="300" height="200" align="left"/>
                 <img src="./welcome.jpg"  width="300" height="200" align="right"/>

                <!-- je vien d'aligner l'image relativement dans le coin gauche ou adroite de l'autre   -->
             
                 <img src="./welcome.jpg"  width="300" height="200"  align="middle">
              <hr>
                  <img src="./welcome.jpg"  width="300" height="200"  align="absmiddle"> le texte est au milieu<br>
              <hr>
                  <img src="./welcome.jpg"  width="300" height="200"  align=""> le texte est en bas<br>
              <hr>  
                  <img src="./welcome.jpg"  width="300" height="200"  align="top"> le texte est en haut
              <hr>
              <img src="./welcome.jpg"  width="300" height="200"  alt="welcome image" title="welcome image">
              <!-- cette derniere image a deux attribut impotants:   -->
              <!-- alt:alternative texte c'est au cas ou l'image ne peut etre vu dans le gavigateur   -->
              <!-- souvent pour des ecrants qui n'affichent pas les images -->
              <!-- ou encore si l'utilisateur choisit de ne pas voir les image -->
              <!-- essayez de changer le nom de l'image et voyez l'effet   -->

              <!-- l'autre attribut c'est le titre -->
              <!--title qui affiche une breve description lorsque la souris  est au dessus de l'image -->

            </body>


</html>

1 comment:

  1. copiez le code dans dreamweaver, enregistrez comme images.html .
    creez un dossier sur votre bureau... sauvegardez y la page. ensuite decendez au premier poste vous verez l'image de bienvenue. du bouton droit cliquez et sauvez comme image dans le meme dossier. avec le nom welcome.jpg. :)

    ReplyDelete