Cómo insertar una imagen en HTML

Insertar una imagen en HTML

Entender c√≥mo insertar una imagen en HTML, hay que tener en cuenta un concepto clave: las im√°genes que ves en las p√°ginas Web de los sitios que visitas, blogs y foros no se incorporan a estos √ļltimos sino que se llaman desde ubicaciones externas. Esto significa que cada foto tiene una direcci√≥n √ļnica, lo que permite rastrearla y verla.

La dirección de una imagen se compone de la siguiente manera: al principio está la dirección del espacio web en el que está alojado el archivo (ej. https://www.configurehow.com/) y luego está el nombre de la imagen completo con extensión (p. ej. image.jpg). La dirección directa de una imagen en la web, por tanto, debe tener una composición del tipo https://www.[dominio del sitio]/[nombre y extensión de la imagen]., en el caso de nuestro ejemplo https://www.configurehow.com/immagine.jpg.



En este punto, es posible que se est√© preguntando c√≥mo recordar la direcci√≥n de una imagen en una p√°gina web para que la foto sea visible para el p√ļblico. ¬°Nada m√°s sencillo! Solo usa la etiqueta img seguido del atributo src = seguido pordirecci√≥n de la imagen para ser insertado en la p√°gina adjunta comillas. Continuando con el ejemplo anterior, para insertar una imagen en una p√°gina web, debe utilizar el siguiente formato.

Si lo desea, también puede agregar la etiqueta alt a la imagen, para configurar el Texto alternativo (una especie de descripción del archivo subido) para ser mostrado en caso de que este no esté disponible (por ejemplo por errores en la conexión al servidor o borrado de la foto de su posición original), lo que también favorece la indexación de la imagen por parte de los buscadores. (como ya te he explicado en otro tutorial). La etiqueta alt se inserta inmediatamente después del elemento img, como en el siguiente ejemplo.



Como habr√°s notado, en los ejemplos que te acabo de dar, no cerr√© la etiqueta img con la etiqueta : la raz√≥n es que no es necesario hacer esto, ya que img es una etiqueta "vac√≠a". Sin embargo, puede resultar pr√°ctico insertar uno espacio y uno barra oblicua / antes del s√≠mbolo mayor>, para que la imagen tambi√©n sea compatible con el XHTML, el lenguaje de marcado que asocia algunas propiedades de XML con caracter√≠sticas de HTML.

Ponga una imagen HTML a la derecha, a la izquierda y al centro

Ahora que est√° familiarizado con el uso de la etiqueta img, seguramente le interesar√° saber c√≥mo moverla. derecha, izquierda y centro. En las siguientes l√≠neas te mostrar√© exactamente eso: c√≥mo alinear una imagen al centro, izquierda, derecha, arriba o abajo de la p√°gina que la contiene, y tambi√©n c√≥mo cambiar su tama√Īo.

Para alinear las im√°genes, todo lo que tienes que hacer es usar el formato que vimos en las l√≠neas anteriores y agregarle la variable alinear =, seguido del tipo de arreglo que desea que adopte la foto: centro, para alinear la imagen en el centro; izquierda, para alinearlo a la izquierda; Derecho, para alinearlo a la derecha; fondo, para organizar la foto en la parte inferior derecha de la primera l√≠nea de texto; medio, para disponer la foto en la parte central a la derecha de la primera l√≠nea de texto; parte superior, para organizarlo en la parte superior derecha de la primera l√≠nea de texto.


Como se mencion√≥ anteriormente, a trav√©s del c√≥digo HTML tambi√©n es posible redimensionar im√°genes (solo visualmente, sin cambiar el tama√Īo del archivo original) y especificar el espaciado que deben tener con respecto al resto de elementos que componen la p√°gina Web en la que se encuentran. se insertan.


Para indicar el tama√Īo que debe tener una imagen se deben utilizar variables anchura ed altura especificando los valores en p√≠xeles, mientras que para el espaciado hay que utilizar la voz hspace para indicar el espaciado horizontal e vspace para indicar el vertical. A continuaci√≥n les doy el ejemplo de una foto de 300 x 200 p√≠xeles con un espaciado vertical y horizontal de 20 p√≠xeles.

¬ŅViste lo sencillo que era alinear y cambiar el tama√Īo de las im√°genes en HTML? Como te dije, es todo menos complicado, solo necesitas saber las etiquetas a usar y usar las variables que prefieras para que la foto cargada asuma la posici√≥n deseada.


Insertar una imagen en HTML como fondo

desear inserta una imagen en HTML y √ļsala como fondo de la pagina? Esto tambi√©n es posible, pero para continuar no tendr√°s que recurrir a la etiqueta img, sino a la etiqueta cuerpo seguido del atributo fondo y camino de la imagen encerrado entre comillas. Te garantizo que no hay nada complicado en realizar esta operaci√≥n: el siguiente ejemplo te lo puede demostrar.

Dado que la imagen insertada como fondo en la página Web se repetirá tanto en horizontal como en vertical, te recomiendo que adoptes esta técnica solo si tienes imágenes que, aunque se repitan, te permitan obtener un resultado estético agradable, para entender una especie de de efecto mosaico.

Insertar una imagen vinculada en HTML


Concluyamos esta gu√≠a descubriendo juntos c√≥mo asociar un enlace a una imagen en HTML, de modo que al hacer clic en ella se lo redireccionar√° a una p√°gina web espec√≠fica. Para agregar un enlace de Internet a una imagen, todo lo que tiene que hacer es anteponer la etiqueta a href = seguido pordirecci√≥n del sitio para vincular al c√≥digo de la imagen. Aqu√≠ hay un ejemplo donde la imagen que hemos usado hasta ahora en este tutorial enlaza con la direcci√≥n www.sitodesample.it:

¬°Yo dir√≠a que eso es todo! Ahora conoces todas las reglas b√°sicas para insertar una imagen HTML en blogs y sitios web. Se necesita muy poco para aprender, ¬Ņte diste cuenta? Y a partir de aqu√≠ puedes profundizar en el tema descubriendo muchas otras funciones que pueden explotarse utilizando el lenguaje HTML. ¬°Que te diviertas!

Cómo insertar una imagen en HTML


Audio vídeo Cómo insertar una imagen en HTML
A√Īade un comentario de C√≥mo insertar una imagen en HTML
¡Comentario enviado con éxito! Lo revisaremos en las próximas horas.