Imágenes HTML

Imágenes HTML

by kenyi omodaka

​Si solo insertamos texto en nuestras páginas webs, estas quedarán muy sencillas y poco lucidas. Es por ello que en HTML tenemos la capacidad de insertar imágenes.

​

Las imágenes podrán ser elementos representativos de página web o elementos decorativos. Si bien, en el caso de ser elementos decorativos deberíamos de utilizar CSS para insertarlos en nuestra página web.

​

El uso de imágenes dentro de una página web tiene que hacerse con cautela, ya que cada imagen que pongamos en nuestra web incrementará el tamaño (peso) de la página. Por lo cual se verá afectado el tiempo de descarga de la página.

Insertar una imagen: ​

​El elemento img

Para insertar una imagen en HTML tenemos el elemento img, cuya sintaxis básica es:

<img src="nombreimagen.jpg" alt="" />

​

Como podemos comprobar, el elemento img es un elemento sencillo, con lo cual no tiene elemento de cierre y termina con la barra invertida.

​

El atributo principal del elemento img es src nos indica la ruta de la imagen que queremos cargar. Así, si la imagen se encuentra en la misma ruta que nuestra página web pondremos:

​

<img src="foto.jpg" alt="" />

En el caso de que la imagen esté en otro directorio,​

​ por ejemplo en “/multimedia/imagenes” pondremos lo siguiente:

​

<img src="/multimedia/imagenes/foto.jpg" alt="" />

​

Incluso la imagen puede residir en otro servidor.​

​ En ese caso la URL que contenga la imagen deberá de indicar el protocolo y el servidor que alberga la imagen. Por ejemplo podremos tener el siguiente código:

​

<img src="http://lineadecodigo.com/imagenes/logo.jpg" alt="" />

​

COMO SOLUCIONO EL PROBLEMA DEL TAMAÑO DE LA IMAGEN????????????​

Dimensiones de la imagen: width y height​

​

Si no indicamos más sobre el elemento img, la imagen que le hayamos pasado en su campo src se cargará con su tamaño original.

Si bien disponemos de los atributos width para el ancho de la imagen y height para el alto de la imagen. De esta forma, si queremos que nuestra imagen se vea en 100x100 pixels, podemos insertar el siguiente código:

​

<img src="foto.jpg" alt=" width=”100” height=”100" />

​El tamaño de la imagen puede ser especificado en pixels o en porcentajes. En caso de omitir la unidad se utilizará el pixel

​

​

<img src="foto.jpg" alt="" width="100" height="100" />

​

<img src="foto.jpg" alt="" width="100px" height="100px" />

​

<img src="foto.jpg" alt="" width="50%" height="50%" /

​Pero quiero mi imagen alineada en otro sentido

​

​solo se tiene que utilizar la etiqueta <p></p> que es la encargada de darnos un espacio entre parrafos, tambien podriamos ocupar la etiqueta <br></br> que tiene la misma funcion.

​

​para alinear nuesta imagen al igual que nuestro texto utilizamos la etiqueta:

​

​align=left align=right align=center

Texto alternativo de la imagen: el atributo alt y longdesc​

​

Sobre una imagen podemos indicar un texto alternativo o descriptivo de la misma. Para ello tenemos el atributo alt.

​

<img src="foto.jpg" alt="texto" />

​

Pero, ¿por qué quiero poner un texto, cuando realmente es una imagen gráfica?

Piensa que esto es útil en varios casos. Por ejemplo, si por algún problema técnico no se puede cargar la imagen, el navegador mostrará en su espacio el texto alternativo, lo cual dará al usuario una idea de lo que iba en ese sitio.

​Otra cosa útil es para cuando nuestra página sea utilizada por personas discapacitadas con problemas de visibilidad.

​

En este caso estas personas disponen de herramientas que le van leyendo la página y cuando llegan a una imagen leen el contenido que encuentran en el atributo alt.

​

Es por ello que el texto alternativo que insertemos en la imagen debe de ser bastante descriptivo de la misma. En algunos casos se llega hasta indicar el tamaño de la imagen.

​

<img src="foto.jpg" alt="Fotografía" />

MARQUESINA EN MOVIMIENTO​

IMAGENES EN MOVIMIENTO​

ETIQUETA A UTILIZAR ​

PARA QUE NUESTRA IMAGEN SALGA EN MOVIMIENTO DEBEREMOS BAJAR O CONSEGIR IMAGENES EN FORMATO GIF Y UTILIZAR LA SIGUIENTE ETIQUETA

​

​

​MARQUEE>

<img src="1.GIF" alt="gruta niño jesus" />Ç

</MARQUEE>

​AHORA SI QUEREMOS REDUCIR O AUMENTAR LA VELOCIDAD DEVEREMOS UTILIZAR

​

<MARQUEE scrollamount="50">

​Y A LA DIRECCION QUE QUEREMOS QUE NUESTRA IMAGEN APARESCA

​UTILIZAREMOS LA ETIQUETA:

​

​<MARQUEE scrollamount="50" direction="right">

AUDIO

PARA PODER UTILIZAR UN AUDIO QUE NOSOTROS QUEDRAMOS QUE SE ESCUCHE EN NUESTRA PAGINA WEB: PARA LO CUAL UTILIZAREMOS LA ETIQUETA:

​

​<audio src="Lo importante - La Búsqueda - Zona Ganjah.mp3"></audio>

​PARA QUE RESPROSDUSCAMOS MANUALMENTE DEBEMOS UTILIZAR LA ETIQUETA:

​

<audio src="Lo importante - La Búsqueda - Zona Ganjah.mp3" controls=""></audio>