Blog
Imágenes
- Publicado por: Rafael Fernandez
- Categoría: Nivel principiante html y css
Seguramente alguna vez has entrado a una página en la cual ves imágenes llamativas que le otorgan cierto carácter y estilo en la página en la que te hallas. Entonces me alegro en informarte que en este capítulo aprenderás a insertar imágenes en tu página web, para así darle todo ese carácter que merece tu página web. Continúa leyendo este capítulo del curso para que aprendas a como utilizar y manipular imágenes con código HTML y/o CSS.
¿Qué son las imágenes?
Las imágenes son un recurso utilizado para brindarle una mayor vistosidad a tu página, o incluso tu puedes darle cualquier uso. Solo debes pensar qué es lo que quieres hacer en tu página web y cómo deseas usar las imágenes en ella.
Una imagen puede llegar a mejorar el diseño y la apariencia de tu página web. Las imágenes en lenguaje HTML son elementos en línea que se pueden colocar dentro de un párrafo,o pueden utilizarse como un elemento independiente de tu página web. Para añadir una imagen a tu página, utiliza la etiqueta <img>, esta etiqueta trabaja en conjunto con el atributo src para especificar la ubicación de la imagen.
Etiqueta <img>
Esta etiqueta es utilizada para insertar una imagen en una página web. Al igual que la mayoría de las etiquetas en HTML utiliza atributos o parámetros para manipular su contenido, o la forma en que se muestran en la interfaz de la página web.
Atributo src
El atributo src utilizado en la etiqueta <img> de HTML para definir la ruta de la cual se va a extraer la imagen; ya sea desde un archivo en tu PC, o que provenga de una página web totalmente diferente.
Esta es la forma de insertar una imagen usando código HTML con la etiqueta <img>
<img src="/static/img/code.jpg">
Incluso también puedes utilizar JavaScript para activar un evento cuando tu imagen termine de cargarse en la página web.
<img src="/static/img/code.jpg" onload="alert('image loaded')">
Aquí te enseño un ejemplo de una imagen que esta siendo utilizada como enlace; para que así veas otro de los usos que puede tener este importante recurso dentro de tu página web.
<a href="https://www.google.com/"><img src="google.png" alt="Enlace a Google"></a>
Puedes realizar el cambio de tamaño o de dimensiones, de la imagen que estés utilizando usando los atributos de ancho (atributo width) y alto (atributo height) de una imagen en la etiqueta <img>. Si no te gusta esta opción puedes usar alternativamente código en CSS:
Ejemplo usando los atributos de ancho y alto (width y height):
<img src="/static/img/code.jpg" width="100" height="100">
Este es otro ejemplo donde son manipuladas las dimensiones de la imagen; pero se esta usando código CSS en la página HTML.
<img src="/static/img/code.jpg" style="width: 100px">
Atributo alt
Tener un atributo “alt” establecido para la imagen es útil para cuando una imagen no se puede cargar o cuando se desea agregar una descripción de información sobre herramientas que se mostrará al pasar el cursor sobre la imagen. Te recomiendo que utilices el alt para definir un texto alternativo para una imagen, si es que esta, por alguna razón no pueda ser mostrada.
Aquí te muestro un ejemplo de una etiqueta <img> que hace uso del parámetro o atributo alt.
<img src="/static/img/code.jpg" style="width: 100px" alt="Una imagen de algún código">
Tipos de imágenes
Existen muchos tipos de formato de imágenes, sin embargo, entre ellos hay tres tipos de formatos principales de imágenes que te recomiendo usar en tu página web.
- Formatos sin pérdida (como TIFF, JPEG, GIF, PNG): Este tipo de imágenes, con este formato son útiles para cuando se necesiten gráficos de píxeles perfectos. Un ejemplo de esto podrían ser los logotipos. El formato más común de imágenes con formato sin pérdida es PNG. PNG también es compatible con la transparencia alfa, lo que significa que puede utilizar cualquier fondo que desees y superponer la imagen sobre ese fondo.
- Formatos con pérdida (como WEBP, JPEG 2000, JPEG XR, JPG/JPEG): Este otro tipo de imágenes son útiles para mostrar imágenes muy nítidas; ya que usar un formato sin pérdida como PNG sería un orden de mayor magnitud si se usa en tales imágenes. El formato más común utilizado en esta categoría es JPG.
- Formatos animados (como BMP o GIF): Este tipo de imágenes son realmente útiles para mostrar imágenes animadas cortas. El formato más común es GIF, aunque es un formato muy antiguo pero ampliamente compatible, aunqu cuente con muchos inconvenientes inherentes, como un límite de 256 colores en cada fotograma y una mala compresión.
Usar el atributo float de CSS en imágenes
Las imágenes pueden ser configuradas para que “floten” cerca del texto. Esto se hace con el propósito de que la imagen se mezcle mejor con el texto. Fíjate de que el uso del atributo clear de CSS le indica al navegador que debe romper el efecto flotante después del primer párrafo.
<!DOCTYPE html> <html> <head> <title>Ejemplo de imagen con float</title> </head> <body> <img src="/static/img/lab.png" style="float: left;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Second paragraph </body> </html>
Usar una imagen como fondo de tu página web
Para que puedas agregar una imagen de fondo en un elemento, o en tu página HTML, utiliza la propiedad de CSS background-image:
Aquí te muestro un ejemplo:
Para agregar una imagen de fondo en una página web, especifica la propiedad de la imagen de fondo en el elemento <body> del código HTML de tu página web:
<body style="background-image:url('imagendeejemplo.jpg')"> En esta página web el fondo será la imagen que especifiques en la ruta delatributo de la rtiqueta <body> </body>
Con el aprendizaje que has adquirido puedes hacer que tu página sea más llamativa. En nuestro curso gratuito aprenderás mucho más. Te esperamos: