Está en la página 1de 4

COLEGIO COMFANORTE

Educacin con Excelencia

ESTILOS Y CLASES DE ESTILOS IMGENES


POSICIN DE LA IMAGEN POR DEFECTO
Las imgenes son elementos en linea, por lo que una imagen
insertada dentro de un texto se comportar como un elemento ms del
texto. Esto puede quedar bien con imgenes muy pequeas, que no
superen la altura de una lnea de texto, pues alrededor de la imagen se
mostrar una sola lnea de texto que se colocar en la parte inferior de
la imagen. Veamos algunos ejemplos:
Ejemplo 1: Codigo HTML
<p>Esta imagen <img src="objetos/internet2.jpg" alt="mundo">
est integrada en el texto pero como es muy pequea no
distorsiona la pgina.</p>
Vista en el navegador:
Esta imagen
est integrada en el texto pero como es muy
pequea no distorsiona la pgina.

Alineacin de imgenes
Lo habitual es integrar la imagen en el texto de forma que la imagen
quede a un lado de la pgina y el texto cubriendo todo el otro lado. Esto
lo conseguimos con el atributo align="left" (imagen a la izquierda),
o align="right" (imagen a la derecha). Este atributo debemos insertarlo
dentro de la etiqueta de imagen:
La imagen de la izquierda tiene el siguiente cdigo:

COLEGIO COMFANORTE
Educacin con Excelencia

<img src="objetos/internet.jpg" alt="internet"


align="left"/>
De manera anloga, la imagen de la derecha tiene
este cdigo:
<img src="objetos/internet.jpg" alt="internet"
align="right"/>
La opcin de colocar la imagen centrada con el texto a ambos lados
no se obtiene con el atributo align="center", ya que ste muestra la
imagen a la izquierda y a su derecha una sla lnea de texto centrada en
vertical respecto de la imagen. para esta opcin debemos utilizar un
mtodo ms complejo mediante cdigo CSS.

TALLER
1. Crea las siguientes pginas en bloc de notas agregando imgenes
y estilos con el tema del da de la mujer.

GUARDAR COMO: principal.html


<html>
<head><title>PRINCIPAL</title></head>
<body>
<h2>PGINA PRINCIPAL</h2>
<img src="foto1.jpg" alt="comentario">
<p>
<a href="pagina1.html"> Pagina 1</a> <br>
<a href="pagina2.html"> Pagina 2</a> <br>

COLEGIO COMFANORTE
Educacin con Excelencia

<a href="pagina3.html"> Pagina 3</a>


</body>
</html>

GUARDAR COMO: pagina1.html


<html>
<head><title>PAGINA 1</title></head>
<body>
<h2>PGINA 1</h2>
<img src="foto2.jpg" alt="comentario">
<p>
Haga click <a href="principal.html"> aqu </a>
para volver.
</body>
</html>

GUARDAR COMO: pagina2.html


<html>
<head><title>PAGINA 2</title></head>
<body>
<h2>PGINA 2</h2>
<img src="foto3.jpg" alt="comentario">
<p>
Haga click <a href="principal.html"> aqu </a>
para volver.
</body>
</html>
GUARDAR COMO: pagina3.html
<html>
<head><title>PAGINA 3</title></head>
<body>
<h2>PGINA 3</h2>
<img src="foto3.jpg" alt="comentario">
<p>
Haga click <a href="principal.html"> aqu </a>
para volver.
</body>

COLEGIO COMFANORTE
Educacin con Excelencia

</html>