Insertar imagen en HTML

¿Porqué insertar imagen en HTML?

Las imágenes dentro de una página web, le da una mejor estética a nuestro sitio, ayuda a entender mejor lo que tratamos de decir y sobre todo una imagen dice mucho de lo que trata una entrada del blog.

Para insertar una imagen en código HTML, tienes que hacer uso de la etiqueta <img>

Atributos de la etiqueta <img>

  • widht —- atributo para modificar el ancho de la imagen
  • height —- atributo para modificar el alto de la imagen
  • src —- indica la ruta o url donde se encuentra la imagen
  • alt —- indica el texto alternativo de la imagen en caso no se muestre

Formatos de imagen (los 3 formatos más usados)

  • jpg — pierde nitidez cuando se comprime
  • png— no pierde nitidez cuando se comprime
  • gif— formato para imágenes animadas

Poner imagen de fondo html

Si lo que queremos es que nuestro blog tenga como fondo una imagen elegida por nosotros, hacemos uso de la etiqueta <body>:

<body background=”url de la imagen“>

Código:

<html>
    <head>
        <title>Ejemplo de fondo</title>
    </head>
    <body background="Fotos/fondo2.jpg">
<h2>
hola
</h2>
</body>
</html>

Resultado:

Insertar imagen en HTML

Insertar imagen a una entrada

Si lo queremos es que la imagen forme parte de una entrada, simplemente hacemos uso de la etiqueta: <img> la cual puede ser imagen alojada en internet o descargada en nuestra PC.

<img src=”ruta de la imagen”>

Código

<html>
    <head>
        <title>Ejemplo de fondo</title>
    </head>
    <body>

<h2>
Foto de un chico
</h2>
<img src ="Fotos/chico.jpg">
</body>
</html>

Resultado

Insertar imagen en HTML

Como viste en la imagen anterior, la foto del chico es muy grande, para reducir el tamaño usamos los atributos de la etiqueta imagen: width y height.

Para centrar la imagen usamos la etiqueta <center> …</center>

<center><img src=”url” width=”#%” height=”#%”></center>

Código

<html>
<html>
    <head>
        <title>Insertar imagen en entrada</title>
    </head>
    <body>
<center>
<h2>
Foto de un chico
</h2>

<img src ="Fotos/chico.jpg" width="25%" height="30%">
</center>
</body>
</html>

Resultado

Insertar imagen en HTML

Como puedes darte cuenta, insertar imagen en un sitio web HTML, no es difícil, sólo ten en cuenta los atributos principales que te describí al inicio. Suerte!!  😉 

Etiquetas: , ,