Cómo insertar una imagen en HTML

Cómo insertar una imagen en HTML

Después de haber probado varias soluciones estándar que no requerían ningún conocimiento del tema, decidiste probar a crear un sitio web «ensuciándote las manos» con el código HTML. Tienes mucho interés en ello, pero hay algunos procedimientos que todavía no has podido entender bien.

Por ejemplo, te gustaría que te aclararan algo más sobre cómo insertar una imagen en HTMLSobre cuáles son los parámetros correctos que hay que utilizar para formatear el código y qué información se puede insertar en él. Pues bien, ¡has venido al lugar adecuado en el momento oportuno! En los siguientes párrafos, te mostraré en detalle cómo establecer una foto como fondo en un sitio web o blog utilizando HTML y CSS. Luego te explicaré cómo insertarlas dentro de cualquier otro elemento contenedor, cómo alinearlas, cómo cambiar su tamaño, cómo insertar enlaces en ellas, e incluso cómo establecerlas como fondo en una tabla.

Entonces, ¿qué dices? ¿Estás preparado para ponerte a trabajar? ¿Sí? ¡Genial! Ponte cómodo, tómate tu tiempo, concéntrate en la lectura de las próximas líneas y, sobre todo, pon en práctica los «consejos» que voy a darte sobre las etiquetas HTML que debes utilizar para insertar imágenes en tus páginas web. Verás que no hay nada complicado en hacer esto, y cuando hayas terminado de leer esta guía, sabrás exactamente cómo proceder. Espero que disfrutes de su lectura y, sobre todo, ¡que te diviertas!

Índice

Información preliminar

Antes de pasar a las explicaciones concretas, cómo insertar una imagen en HTML, tienes que tener una idea clara de cómo «encontrar» el archivo que te interesa. En primer lugar, para incrustar una imagen (y cualquier otro elemento que no conste de código) en una página web, necesitas tener el archivo subido a un servidor y accesible desde el exterior.

Para acceder al archivo desde dentro de una página web, tienes que especificar dirección de la imagen en la parte del código HTML (o CSS) que la definirá. Por lo tanto, puedes declarar la URL de incrustación de dos maneras diferentes, dependiendo de dónde se encuentre físicamente la imagen.

  • URL absolutaSi el archivo que te interesa se encuentra en un servidor distinto al del sitio que estás creando, o en una carpeta diferente, puedes referirte a él declarando una URL absoluta que coincida con el enlace real de la imagen (por ejemplo https://www.aranzulla.it/foto/immagine.jpg).
  • URL relacionadaSi el archivo que quieres incrustar se encuentra en la misma carpeta o subcarpeta del sitio que te interesa, puedes incrustarlo utilizando su dirección relativa, es decir, declarando sólo la carpeta en la que se encuentra en relación con el archivo HTML en el que se define la página web (por ejemplo /foto/immagine.jpg). Este enfoque es ideal para evitar problemas debidos a un posible cambio de dominio.

Si no has decidido la posición de la imagen en relación con las páginas de tu sitio, o si la imagen tiene que ser definida dentro de etiqueta <style> o Hoja de estilo CSSSin embargo, te recomiendo que lo incluyas haciendo referencia a su dirección absoluta, aunque esté en el mismo servidor operativo, para evitar problemas de «ruta».

Cómo insertar una imagen en HTML como fondo

Dicho esto, echemos un vistazo. Cómo insertar una imagen en HTML como fondo de página. Hasta hace poco, bastaba con declarar el atributo background atributo dentro de <body>es decir, la que inicia la definición del cuerpo de la página. Así, la declaración de la imagen de fondo de una página tendría el siguiente aspecto <body bakcground src="https://www.aranzulla.it/URL_immagine">.

Sin embargo, desde HTML5, el atributo background de la etiqueta body ha quedado obsoleto y, por tanto, ya no se utiliza. Para ello, tienes que definir un fondo de página con la opción CSSdeclarando una propiedad background-image.

Puedes conseguirlo de tres formas diferentes: incrustando la declaración de estilo en la etiqueta de apertura del cuerpo de la página (<body>) a través de stylecon la etiqueta <style> dentro de la cabecera de la página (entre <head> e </head>) o definiéndolo en una hoja de estilo CSS independiente, que se importará a la página HTML.

Supongamos que queremos insertar una imagen en la página HTML actual, sin que se repita ni se mueva, y que ocupe el tamaño de toda la página. Si queremos definirlo dentro de la etiqueta body, escribiremos el siguiente código.

<body style="background-image: url('https://indirizzo_immagine.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%;">

[corpo della pagina]

</body>

Si, por el contrario, queremos declarar un fondo de página dentro de la etiqueta <style> (que, recuerda, debe estar anidada dentro de <head>), escribiremos lo siguiente en su lugar.

<style>

body {

background-image: url('indirizzo_assoluto_immagine.jpg');

background-repeat: no-repeat;

background-attachment: fixed;

background-size: 100% 100%;

}

</style>

También puedes declarar una imagen de fondo en una lista CSS externa exactamente de la misma manera, simplemente eliminando el parámetro <style> e </style>. Para mayor claridad, permíteme enumerar el funcionamiento exacto de las propiedades definidas en el código.

  • background-image: url('')se utiliza para especificar la dirección donde se encuentra el archivo de inclusión.
  • background-repeatse utiliza para especificar si la imagen debe repetirse o no (cuando la imagen es más pequeña que la página/elemento).
  • background-attachment: obliga a la imagen a permanecer fija en su posición aunque se desplace la página/elemento.
  • background-size: te permite definir el tamaño de una imagen en relación con la página/elemento al que pertenece.

Cómo insertar una imagen en una página HTML

Para insertar una imagen dentro de una página HTML (o de un elemento que pertenezca a ella) y definir su comportamiento, la etiqueta <img>junto con todos sus atributos compatibles. La etiqueta en cuestión debe insertarse en el cuerpo de la página (es decir, entre las etiquetas <body> e </body>) y pueden ser independientes o estar incrustados en otros elementos de la página (por ejemplo <p> e </p>o <div> e </div> O, de nuevo, <table> e </table>etc.). Ahora vamos a hablar de los atributos que se pueden añadir: atributo src El atributo es obligatorio y se utiliza para especificar la dirección del archivo que se va a incrustar en la página; así, para declarar una imagen, escribiremos lo siguiente

<img src="https://www.aranzulla.it/URL_immagine.jpg" />

Si quieres, también puedes añadir el atributo alt a la imagen para personalizarla texto alternativo (una especie de descripción del archivo subido), que se mostrará en caso de que no esté disponible (por ejemplo, debido a errores de conexión del servidor o a la eliminación de la foto de su ubicación original). Esto también favorece la indexación de la propia imagen por parte de los motores de búsqueda (como expliqué en otra guía).

<img src="https://www.aranzulla.it/URL_immagine.jpg" alt="La mia foto personale" />

Otros dos atributos especialmente interesantes son width и heightque te permiten definir la anchura y la altura, en píxeles, de la imagen. Así, suponiendo que queremos incrustar una imagen y redimensionarla a 640 x 480 píxeles, escribimos lo siguiente.

<img src="https://www.aranzulla.it/URL_immagine.jpg" alt="La mia foto personale" width="640" height="480" />

Como habrás observado en los ejemplos que he dado, la etiqueta <img> no es una etiqueta contenedora y, por tanto, no debe cerrarse (de ahí que </img> señalando su fin); sin embargo, sería conveniente insertar un espacio y un carácter de barra (es decir /) antes de un corchete de ángulo cerrado para que la imagen sea también compatible con XHTMLUn lenguaje de marcado que combina ciertas propiedades de XML con las de HTML.

Cómo poner una imagen en HTML a la izquierda y a la derecha

Hasta hace poco, el método más sencillo para determinar la alineación de una imagen (o de cualquier otro elemento del cuerpo de una página web) era insertar un atributo dentro de la etiqueta contenedora aligndentro de la etiqueta contenedora; sin embargo, esta última ya no está soportada por HTML5, pero esto puede solucionarse siguiendo algunos caminos alternativos.

La primera, y más fácil, es encerrar la imagen dentro de la etiqueta contenedor (por ejemplo <p>…</p> o <div>…</div>) y utiliza el atributo CSS text-alignpara definir la alineación de la imagen anidada dentro, acompañada de la propiedad right (para la alineación derecha) o left (para la alineación a la izquierda).

<div style="text-align: right;">

<img src="https://www.aranzulla.it/URL_immagine.jpg" alt="La mia foto personale" />

</div>

Cómo poner una imagen centrada en HTML

Lo mismo puede hacerse con las imágenes centradas: como el atributo align etiqueta y <center>…</center> (il tag contenitore che consentiva di centrare tutti gli elementi al suo interno) sono ormai obsoleti e non più supportato a partire da HTML5, bisogna racchiudere l'immagine in un elemento contenitore (ad es. <div>…</div>) y definir la alineación en esta última.

Exactamente como se ha visto anteriormente, esta tarea puede ser realizada por el atributo CSS text-align va acompañada, sin embargo, de la propiedad center. Así, para poner una imagen centrada en HTML, escribiremos lo siguiente.

<div style="text-align: center;">

<img src="https://www.aranzulla.it/URL_immagine.jpg" alt="La mia foto personale" />

</div>

Cómo insertar una imagen con un enlace en HTML

Si necesitas enlazar una imagen para que al hacer clic en ella te lleve a una página web concreta, tienes que encerrar la imagen en una etiqueta contenedora. <a>…</a>una etiqueta acompañada de un atributo href. Así, si quisiéramos insertar una imagen con un enlace a mi sitio web, escribiríamos lo siguiente

<a href="https://www.aranzulla.it">

<img src="https://www.aranzulla.it/URL_immagine.jpg" alt="Aranzulla" />

</a>

Por último, si quieres que el enlace al que apunta la imagen se abra en una nueva pestaña (en lugar de la que utiliza tu página web), añade también el atributo targetacompañado del valor _blankdentro de la etiqueta <a>. Así, el código anterior tendría el siguiente aspecto

<a href="https://www.aranzulla.it" target="_blank">

<img src="https://www.aranzulla.it/URL_immagine.jpg" alt="Aranzulla" />

</a>

Cómo insertar una imagen en una tabla HTML

Para insertar una imagen en una tabla HTML, puedes combinar todos los consejos que he dado hasta ahora, según el resultado que quieras conseguir. Si, por ejemplo, quieres definir una imagen de fondo para una tabla, debes declarar un estilo CSS como se muestra en uno de los pasos anteriores de este tutorial; sin embargo, mi consejo es declarar la propiedad background-image dentro de clase específica y aplica la clase a la tabla que te interese, de lo contrario todas las tablas de la página tendrán el mismo fondo. A continuación se muestra un ejemplo del código.

<html>

<head><title>La mia prima pagina Web</title>

<style>

table.tabellaPers {

background-image: url('indirizzo_assoluto_immagine.jpg');

background-repeat: repeat;

}

</style>

</head>

<body>

<table class="tabellaPers">

<tr><td>Cella1</td><td>Cella2</td></tr>

<tr><td>Cella3</td><td>Cella4</td></tr>

</table>

</body>

Si luego quieres insertar una imagen dentro de la tabla, tienes que encerrarla en la etiqueta anterior <img> (a su vez encerrada en <a>, para insertar una imagen con un enlace) dentro de la etiqueta <td>que define el contenido de la fila de la tabla. A continuación se muestra un fragmento de código de ejemplo.

<table>

<tr><td><img src="https://sitodiprova.org/immagine.jpg" /></td><td>Cella2</td></tr>

<tr><td>Cella3</td><td>Cella4</td></tr>

</table>

Para completar el cuadro, me gustaría señalar que también hay un tutorial especial aquí en mi sitio web sobre la creación de una página HTML, en el que he explicado los fundamentos de la programación en HTML (y de los scripts en CSS). ¡Asegúrate de echarle al menos un vistazo!


Un Como Hacer.Com
Nosbi Actualidad Curiosa