Entendido.

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

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

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:

• .dibujo Este es el selector que hace referencia a la clase "dibujo". observa que lleva un punto delante. Todos los selectores que hacen referncia a una clase (atributo class="nombre_de_la_clase" en el archivo .html), se escriben siempre con un punto delante para indicar que son selectores de clase. (.nombre_de_la_clase en el archivo .css)
• float: right El atributo float se aplica a objetos de un cierto tamaño; sus valores pueden ser left (izquierda) y right (derecha). Su efecto es hacer que el objeto "flote" sobre la página, dejando el resto del espacio que no ocupa libre para el texto u otros elementos.

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

Página creada por ANYELGUTI.

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

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

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