Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++


logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 13

Visitas el mes pasado: 29

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




3. Insertar imágenes (III)

3.3.Posición de la imagen (II)

Colocar la imagen a la derecha

En el paso anterior movimos la imagen que habiamos insertado unas líneas hacia arriba. Ahora queremos colocar la imagen a la derecha, y que el texto se coloque a su izquierda. Para ello crearemos una "clase" en el archivo index.html. Haremos despues referencia a esa "clase" en el archivo estilo.css donde daremos las instrucciones para lo que queremos cambiar

Abrimos el archivo index.html con el bloc de notas, y modificamos de nuevo la línea de la etiqueta de imagen, de forma que quede así:

<img class="dibujo" src="objetos/dibujo.gif" alt="conexión a Internet" width="285px" height="238px" />

Como puedes observar, el texto en azul es el que hemos introducido nuevo; el resto ya lo teníamos antes. Hemos creado con esto la clase "dibujo". a la cual haremos referencia en el archivo estilo.css. Con esto conseguimos que en el archivo CSS se den las instrucciones sólo a las imágenes que lleven el atributo class="dibujo". Por lo tanto si queremos insertar otra imagen podemos crearle otra clase y tratarla de otra manera, o darle el mismo tratamiento incluyendola en esta clase.

Ahora abrimos el archivo estilo.css con el bloc de notas y después de la última línea escribimos lo siguiente, en una línea aparte:

.dibujo { float: right; }

En esta instrucción vemos varias cosas nuevas: vamos a analizarlas:

Una vez escrita la instrucción en el bloc de notas, guardamos y cerramos todos los archivos. Abrimos una vez más el archivo index.html con el navegador para comprobar los resultados.

El resultado debe ser el siguiente:

Ver mi Web


Como siempre, si no consigues este resultado, revisa las dos últimas instrucciones, seguro que encuentras algún fallo.

Margen alrededor de la imagen.

Ahora tenemos el texto a la izquierda, y la imagen a la derecha, pero quedaría mejor si dejaramos un margen a la imagen, de forma que no quedara pegada al texto, y esté mas separada del margen derecho de la página. Usaremos para ello la instruccion margin ; la cual es muy parecida a la instrucción padding que ya hemos visto.

Abre el archivo estilo.css con el bloc de notas, y en la línea escrita anteriormente añadimos:

.dibujo { float: right; margin-left: 2em; margin-right: 3em; margin-bottom: 1em; }

El texto en verde es el que hemos insertado nuevo, el resto es el que ya teníamos.

Con estas instrucciones dejamos unos márgenes a la derecha (right), a la izquierda (left) y por debajo (bottom); del tamaño indicado (recuerda, 1em viene a ser el tamaño normal que ocupa una letra)

El archivo estilo.css en el bloc de notas es el siguiente:


	 
h1 { text-align: center; font-size: 2.5em; font-family: verdana; color: purple }
h2 { text-align: center; font-size: 1.9em; font-family: "times new roman"; color: olive ; }
p { text-align: justify ; font-size: 1.1em ; font-family: arial ; color: navy ;
    padding-left: 3em; padding-right: 3em ; padding-top: 0.5em; text-indent: 2.5em }
.dibujo { float: right; margin-left: 2em; margin-right: 3em; margin-bottom: 1em; }

Guardamos y cerramos el archivo estilo.css en el bloc de notas, y como siempre comprobamos el resultado abriendo el archivo index.html con el navegador.

Nuestra Web deberá quedar así: Ver mi Web


Como siempre, revisa los pasos anteriores si no has tenido el mismo resultado.

Nuestra página parece que ya va tomando forma. en el próximo paso veremos cómo cambiar el color del fondo de la página:


Siguiente paso: Cambiar el fondo







Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com