Como Insertar Imagenes En HTML

¿Cómo insertar imágenes en html?

Muy buenas mis amigos de cómo crear mi web, hoy navegando por internet en foros de programación web en espacial foros dedicados a HTML he visto que un gran público quiere saber cómo insertar imágenes en html, aunque esto resulta muy fácil para personas que ya tienen cierto tiempo trabajando con sitios web muchas veces resulta muy confuso insertar imagen html para una persona que recientemente se inicia en la programación de páginas web en html.

En esta entrada vamos a ver varios puntos para que aprendas a manejar la inserción de imágenes en html de una vez y por todas,  así que prepara tu documento HTML y tus imágenes para que podamos empezar.

Insertando una imagen en HTML

Lo primero que tienes que saber para poder agregar una imagen a html es que para esta existe una etiqueta especial que pasandole los parámetros necesarios podemos ver la imagen en nuestra pagina web o documento HTML. La etiqueta es <img> la cual la vas a utilizar siempre que quieras insertar un objeto de imagen en tu sitio web.

//Etiqueta para insertar imagen html
<img src="ruta de la imagen" alt="atributo alternativo">

La estructura de una imagen seria esa que hemos colocado anteriormente ahora vamos a poner una linea de código con una inserción de una imagen directamente desde google, para esto solo vamos a google y le damos a copiar la URL de una imagen y la colocamos dentro del src de la linea de código que coloque anterior.

//Etiqueta para insertar imagen html
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/200px-HTML5_logo_and_wordmark.svg.png" alt="atributo alternativo">

En mi caso he copiado la dirección del enlace a una imagen sobre html que esta en el sitio web de wikimedia.org, con esta forma sin que nosotros tengamos almacenada la imagen en nuestro servidor podemos hacer que se visualice en nuestro sitio web. Insertar imagen en HTML5 es lo mismo nada de esto cambia, si te fijas esta es una forma muy facil donde podemos insertar una imagen en html hasta usando el bloc de notas.

Como insertar una imagen en html desde una carpeta

Para insertar una imagen desde una carpeta que tengamos alojada en nuestro servidor simplemente tenemos que ponerle en src la ruta a nuestra carpeta terminando con el nombre de nuestra imagen y su debida extensión ya sea .gif, .jpeg, .png, .jpg o cualquier otra extensión que quieras insertar.

//Etiqueta para insertar imagen html
<img src="imagenes/imagen1.PNG" alt="Esto es una imagen insertada en html">

Con la forma anterior ya tendrás tu imagen insertada desde una carpeta.

Alineación de imagenes en html

Algo muy útil cuando aprendemos a insertar imágenes es aprender a darle la alineación que queramos  ya sea a la izquierda, al centro, o alinear la imagen a la derecha, esto puede ser un poco mas complejo porque vamos a utilizar CSS ya que el nuevo standar HTML5 no recomienda la inserción de código css en las etiquetas HTML.

Alineando Imágenes Con CSS

// alinear a la izquierda
img{
float:left;
}

// alinear a la derecha
img{
float:right;
}

Si lo que quieres es modificar sus tamaños entonces debes de aplicarle los atributos width para el ancho de la imagen y height para el alto de dicha imagen como se muestra a continuación.

// Como cambiar el tamaño de una imagen en html
img{
width:250px;
height:250px;
}

Listo con eso ya podemos manejar nuestras imágenes de la forma que queramos, bueno mi gente este fue todo sobre como manipular una imagen en html, si te interesa puedes ver el siguiente post donde hablaremos sobre como insertar una imagen de fondo ya sea para la pagina completa, para un DIV o para un botón en esa entrada abordaremos todos esos puntos para que aprendas manejar la imágenes en HTML como todo un experto.

Como insertar una imagen de fondo en html

Deja un comentario

Tu dirección de correo electrónico no será publicada.