HTML - Imágenes

Las imágenes son muy importantes para embellecer, así como para representar muchos conceptos complejos de manera sencilla en su página web. Este tutorial lo llevará a través de sencillos pasos para usar imágenes en sus páginas web.

Insertar imagen

Puede insertar cualquier imagen en su página web usando <img>etiqueta. A continuación se muestra la sintaxis simple para usar esta etiqueta.

<img src = "Image URL" ... attributes-list/>

La etiqueta <img> es una etiqueta vacía, lo que significa que solo puede contener una lista de atributos y no tiene etiqueta de cierre.

Ejemplo

Para probar el siguiente ejemplo, mantengamos nuestro archivo HTML test.htm y el archivo de imagen test.png en el mismo directorio:

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

Esto producirá el siguiente resultado:

Puede usar un archivo de imagen PNG, JPEG o GIF según su comodidad, pero asegúrese de especificar el nombre de archivo de imagen correcto en srcatributo. El nombre de la imagen siempre distingue entre mayúsculas y minúsculas.

los alt atributo es un atributo obligatorio que especifica un texto alternativo para una imagen, si la imagen no se puede mostrar.

Establecer ubicación de imagen

Por lo general, guardamos todas las imágenes en un directorio separado. Así que mantengamos el archivo HTML test.htm en nuestro directorio de inicio y creemos un subdirectorioimages dentro del directorio de inicio donde guardaremos nuestra imagen test.png.

Ejemplo

Suponiendo que la ubicación de nuestra imagen es "image / test.png", prueba el siguiente ejemplo:

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

Esto producirá el siguiente resultado:

Establecer ancho / alto de imagen

Puede establecer el ancho y el alto de la imagen según sus requisitos utilizando width y heightatributos. Puede especificar el ancho y el alto de la imagen en términos de píxeles o porcentaje de su tamaño real.

Ejemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Width and Height</title>
   </head>
	
   <body>
      <p>Setting image width and height</p>
      <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
   </body>
	
</html>

Esto producirá el siguiente resultado:

Establecer borde de imagen

De forma predeterminada, la imagen tendrá un borde a su alrededor, puede especificar el grosor del borde en términos de píxeles utilizando el atributo de borde. Un grosor de 0 significa que no hay bordes alrededor de la imagen.

Ejemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Border</title>
   </head>
	
   <body>
      <p>Setting image Border</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
   </body>
	
</html>

Esto producirá el siguiente resultado:

Establecer alineación de imagen

De forma predeterminada, la imagen se alineará en el lado izquierdo de la página, pero puede usar align atributo para establecerlo en el centro o la derecha.

Ejemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Alignment</title>
   </head>
	
   <body>
      <p>Setting image Alignment</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
   </body>
	
</html>

Esto producirá el siguiente resultado:

Gráficos web gratuitos

Para obtener gráficos web gratuitos, incluidos los patrones, puede consultar los gráficos web gratuitos

↰ Previous page Next page ↱