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