Cargar imágenes en HTML

Hoy les traigo un pequeño tutorial donde explico de manera breve como cargar imágenes en HTML.

Pero antes de comenzar me gustaría compartirles el tutorial anterior acerca de estilos de letra en HTML.

Para cargar una imagen dentro de una pagina web, utilizamos la etiqueta  con el parámetro SRC, esta etiqueta no necesita una etiqueta de cierre, y solo debemos indicar la ubicación de nuestra imagen, ya sea en nuestro equipo, o directamente desde internet. como asignar una ruta para una imagen lo explico en este tutorial: color e imagen de fondo en HTML, solo que no con la misma finalidad, pero la idea es la misma.

En las paginas web los formatos de imágenes mas utilizados son: png, jpg y gif.

Ya que indicamos la ruta para acceder a nuestra imagen, solo indicamos el nombre y formato de nuestro archivo:

   

A continuación les comparto un código de ejemplo:





Imagenes en HTML.







Y el resultado que obtendríamos seria el siguiente:

Las imágenes que carguemos se pueden re-dimensionar, para esto existen las propiedades width y heigth. que indican el ancho y alto que tendrá nuestra imagen en pixeles. A continuación les muestro un ejemplo con estas propiedades.





Imagenes en HTML.






Y el resultado que obtendríamos seria el siguiente:

 Se puede indica que el texto que esta alrededor de nuestra imagen se alinee en una cierta posición con respecto a nuestra imagen o indicar en que parte de la pantalla se alineara nuestra imagen, esto se puede lograr gracias a la propiedad align, donde se tienen los valores: top, middle, button, right o left.

-top: el texto se alinea en la parte superior de la imagen
-middle: el texto se alinea al centro de la imagen
-button: el texto se alinea en la parte inferior de la imagen
-right: la imagen se alinea a la derecha de la pagina web
left: la imagen se alinea a la izquierda de la pagina web

A continuación les comparto un pequeño ejemplo con esta propiedad:





Imagenes en HTML.





Texto alineado en la parte superior de la imagen
Texto alineado al centro de la imagen
Texto alineado en la parte inferior de la imagen
Imagen alineada a la derecha de la pagina web





Imagen alineada a la izquierda de la pagina web

Y el resultado obtenido con el código anterior, seria el siguiente:

Y por ultimo, como un dato extra, la imagen que estoy utilizando para los ejemplos, es la siguiente: “Bosque de sueños” de Mario Rafael Lince Benavides.

Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.

Fuente:
http://platea.pntic.mec.es/~abercian/guiahtml/imagenes.htm consultada el 14 de Julio del 2015.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s