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.

Manual de HTML

HTML: lenguaje básico para crear páginas web

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

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

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

5. Imágenes (II)

5.2 Estilo con HTML.

Posición de la imagen por defecto

Las imágenes son elementos en linea, por lo que una imagen insertada dentro de un texto se comportará como un elemento más del texto. Esto puede quedar bien con imágenes muy pequeñas, que no superen la altura de una línea de texto, pues alrededor de la imagen se mostrará una sola línea 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 pequeña no distorsiona la página.</p>

Vista en el navegador:

Esta imagen está integrada en el texto pero como es muy pequeña no distorsiona la página.

Ejemplo 2: Codigo HTML

<p>Esta imagen <img src="objetos/internet.jpg" alt="Internet"> está integrada en el texto y como es muy grande deja espacio en blanco alrededor suyo.</p>

Vista en el navegador:

Esta imagen está integrada en el texto y como es muy grande deja espacio en blanco alrededor suyo.

Podemos insertar la imagen entre dos elementos, por ejemplo entre dos párrafos, en ese caso la imagen Tendrá la misma alineación que esté definida para su elemento contenedor, pero todo el resto de la altura que ocupe la imagen se quedará en blanco. Una posible solución para imágenes muy grandes que ocupen casi todo el ancho del contenedor, es encerrarlas dentro de una etiqueta de párrafo con el atributo align para centrarla:

<p align="center"><img src="..." alt="..."></p>

Alineación de imágenes

Aunque lo más normal para colocar la imagen en la página es usar el código CSS, usando sólo HTML podemos también conseguir colocar la imagen en la página de una forma estéticamente normal.

Lo habitual es integrar la imagen en el texto de forma que la imagen quede a un lado de la página 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 código:

<img src="objetos/internet.jpg" alt="internet" align="left"/>

De manera análoga, la imagen de la derecha tiene este código:

<img src="objetos/internet.jpg" alt="internet" align="right"/>

La opción 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 sóla línea de texto centrada en vertical respecto de la imagen. para esta opción debemos utilizar un método más complejo mediante código CSS.

Bordes y márgenes

Aunque lo normal es que los bordes y los márgenes se apliquen mediante el código CSS, también se pueden incluir en el código HTML para las imágenes.

El atributo border="..." define un borde del tamaño indicado alrededor de la imagen. Su valor es un número que expresa los píxeles de grosor que tendrá el borde.

Los atributos vspace="..." y hspace="..." indican el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los otros elementos que la rodean. vspace indica los margenes laterales, mientras que hspace indica el margen superior e inferior.

La imagen de la izquierda tiene el siguiente código:

<img src="objetos/internet.jpg" alt="internet" width="200 "align="left" border="10" vspace="20" hspace="10"/>

La mayoría de los navegadores modernos ignoran los atributos vspace="..." y hspace="..." por lo que para definir los márgenes debemos emplear código CSS. Veremos esto en el manual de CSS. Respecto al atributo border="..." enservamos que la mayoría de los navegadores incorporan un borde de color negro alrededor de la imagen, o cual no siempre suele quedar muy estético. Es por eso que se recomienda usar código CSS para este tipo de elemento.

Atributo lowsrc

Este atributo sirve para indicar un archivo con una imagen de baja resolución. Cuando el navegador detecta que la imagen tiene este atributo primero descarga y muestra la imagen de baja resolución (que ocupa muy poco y que se transfiere muy rápido). Posteriormente descarga y muestra la imagen señalada con el atributo src, (que se supone que ocupará más y será más lenta de transferir).El valor de este atributo es la URL de la imagen de baja resolución.

Nota: Aunque aquí hemos visto cómo posicionar la imagen y darle un cierto estilo mediante el lenguaje HTML, lo normal es hacerlo mediante el lenguaje CSS. En el manual de CSS hay un tema dedicado a las imágenes donde se trata más ampliamene este asunto.

---

En La siguiente página veremos otras aplicaciones de las imágenes. Como integrar enlaces en imágenes y los mapas de imágen.

Mapas de imágen.

---

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