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.

Manual de HTML

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


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: 389

Visitas el mes pasado: 223

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de HTML
Desarrollo Web, por Rubén Álvarez
Cómo crear tu Web: curso de HTML
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a XHTML
Libros web, por Javier Eguíluz Pérez
Curso de HTML: AulaFácil
www.aulafacil.com
Curso de html: Programación Web
www.programacionweb.net
WebEstilo: manual de html
www.webestilo.com
W3 schools; HTML Tutorial
www.w3schools.com
Tutorial html
Juan José López García
Universidad de Murcia
Introducción al lenguaje html
wikilearning

Donativos

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




5. Imágenes (II)

5.2 Estilo con HTML.

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 mundo 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 Internet 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:

internet

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

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

internet

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.

internet

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

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

Los atributos vspace="..." y hspace="..." sólo funcionan con Internet Explorer, mientras que los otros navegadores ignoran estos atributos. por lo tanto para definir los márgenes debemos emplear código CSS.


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.







manual de HTML

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