jueves, 10 de mayo de 2012

10. Cómo introducir imágenes.

Para incluir una imagen en una página web HTML tendremos que utilizar el tag <img src="imagen">. Para que el código funcione es necesario que tengas la imagen en el directorio donde tengas el archivo de la página web. Para eso puedes guardar las imágenes en una carpeta independiente que llames "images".
El ejemplo quedaría así:


<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>  
                   <img src="banner.gif">
                   <h1>Mi primera página web.</h1>
                   <p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>
                   <h2>Dando Formato al Texto</h2>
                   <ul> 
                            <li>Salto de línea    
                                       <ul type="square">
                                                <li>tag &lt br &gt
                                                <li>tag &lt p &gt
                                       </ul>   
                            <li>Enfatizando el texto
                            <li>Tamaño de la fuente
                            <li>Ordenando el texto
                   </ul>
                   <p><font color=#4ff3ff size= 6>Lola Mena</font></p>
         </body>
</html>


O también:

...
<img src="images/banner.gif">


Para colocar la imagen en un lugar determinado de la página, utilizaremos modificadores del tag <img>. Por ejemplo, para colocarla en el centro <center><img....></center>; si la queremos alinear a derecha o izquierda pondremos <img src=banner.gif align="right">, o left en vez de right...

Si la imagen va más arriba, en medio o abajo usaremos top, middle ó bottom. Por ejemplo:

...

 <p><font color=#4ff3ff size= 6>Lola Mena</font>
 <img src="f1.gif" align="top"></p>
 </body>
 </html>

Finalmente si queremos que nos aparezca un comentario cuando pongamos el ratón encima de imagen, tendremos que colocar el modificador title del tag <img>. El texto que queremos que aparezca, lo pondremos entrecomillado.

...

 <p><font color=#4ff3ff size= 6>Lola Mena</font>
 <img src="f1.gif" title="Smile"></p>
 </body>
 </html>



No hay comentarios:

Publicar un comentario