Las imágenes en HTML Basico


 

 

Para añadir imágenes a un documento HTML, se utiliza la etiqueta img. Para el uso de imágenes se utilizan principalmente los siguientes formatos:

  • JPG: (Imágenes de gran compresión y calidad sin transparencia).
  • PNG: (Imágenes de gran calidad y transparencia).
  • GIF: (Imágenes en movimiento).

 

responsive​

 

Atributos de la Etiqueta Imágen



1. Atributos src



La etiqueta img utiliza el atributo src mediante el cual se indica la dirección en que se encuentra almacenada nuestra imágen. La dirección esta basada en el nivel donde se encuentra nuestro archivo HTML.

Por ejemplo, si la imágen esta almacenada en el mismo nivel solo basta con agregar la imágen de la siguiente manera:

<img src="imagen.jpg">

 

Si se encuentra dentro de una carpeta por ejemplo una carpeta con nombre "imagenes", la dirección es la siguiente:

<img src="imagenes/imagen.jpg">

 

Si nuestro documento HTML está dentro de una carpeta y imágen está fuera de ella vinculamos la dirección de la siguiente manera:

<img src="../imagen.jpg">

 

Como vemos está es la primera ocación que estamos tomando encuenta las carpetas y es algo que debemos tomar en cuenta todo el tiempo debido a que sino se vinculan adecuadamente no se mostrará la imágen.

 

2. Atributo alt

 

Se utiliza para detallar el nombre de nuestra imágen, el cual aparecera al ubicar el curso encima de nuestra imágen.

<img src="imagenes/imagen.jpg" alt="Nombre Imagen">


3. Tamaño de nuestra imágen


 

Para el tamaño de nuestra imágen utilizamos los atributos width y height  seguido por el tamaño en pixeles de la imágen

<img src="imagenes/imagen.jpg" width="100px" heigh="100px">

 



Comentarios


 

Menu