martes, 14 de julio de 2015

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

    <IMG SRC="NombreDeNuestraImagen.Formato">

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

    <head>
        <title>
            Imagenes en HTML.
        </title>
    </head>

    <body>
        <IMG SRC="Color e imagen de fondo en HTML3.png">
    </body>
</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.
<html>

    <head>
        <title>
            Imagenes en HTML.
        </title>
    </head>

    <body>
        <IMG SRC="Color e imagen de fondo en HTML3.png" width=100, heigth=100>
    </body>
</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:
<html>

    <head>
        <title>
            Imagenes en HTML.
        </title>
    </head>

    <body>
        <pre>
Texto alineado en la parte superior de la imagen<img src="Color e imagen de fondo en HTML3.png" width=100, heigth=100 align=top>
Texto alineado al centro de la imagen<img src="Color e imagen de fondo en HTML3.png" width=100, heigth=100 align=middle>
Texto alineado en la parte inferior de la imagen<img src="Color e imagen de fondo en HTML3.png" width=100, heigth=100 align=button>
Imagen alineada a la derecha de la pagina web<img src="Color e imagen de fondo en HTML3.png" width=100, heigth=100 align=right>





Imagen alineada a la izquierda de la pagina web<img src="Color e imagen de fondo en HTML3.png" width=100, heigth=100 align=left>
        </pre>
    </body>
</html>
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.

No hay comentarios:

Publicar un comentario