Como añadir imágenes HTML a mi pagina web o blog

En este post voy a hablar de cómo colocar un banner o imagen en tu blog y tratare de explicarte las diferentes maneras de hacerlo, pues todo dependerá del tipo de imagen que deseas poner, es importante que tengas conocimiento de función HTML en nivel básico.

Si aún no conoces las medidas de los banners, te invito a leer este artículo llamado: “Medidas de los banners para páginas web y blogs”, en donde hablo sobre este tema.

Existen muchas maneras para poner una imagen en Blogger, las cuales van desde solo poner una imagen hasta colocar un banner con enlace a un sitio web, ponerle un texto, una descripción o que esta tenga SEO para poder ser localizada por los buscadores como Google.

En el caso de las plantillas de Blogger en la pestaña de “Diseño” puedes cargar la imagen de manera fácil que es colocar la imagen en donde solo subes el archivo, colocas en enlace donde quieres que redireccione cuando presionen la imagen, y si quieres puedes poner algo descriptivo por debajo de la misma.

La desventaja es que esta opción te obliga a poner un título para poder guardar, tal vez para los Widgets laterales puede venir bien, pero existen partes dentro de las plantillas que no pueden llevar texto como lo es el título. (Bueno si pueden pero son por código) yo me refiero a que si usas la opción del Widget de imagen y la subes.

Un ejemplo es el banner 728x90px que va en la parte superior y que es para publicidad, al estar a un lado del logotipo, este no debe llevar texto ni arriba ni abajo, pues ocasionaría que la plantilla sufra un reacomodo si es que es responsive o en el peor de los casos se va a descuadrar si no lo es. 

Para solucionar este problema, si es que compraste una plantilla ya diseñada por terceros, existe la otra opción que es la de colocarla desde el formato HTML / Javascript

Y es aquí donde se viene la explicación mayor de este artículo. Para facilitarte el trabajo puedes copiar los códigos y pegarlos para que sea más rápido.

Para poner una imagen utilizamos el siguiente código HTML respetando las comillas ".." ya que el texto va dentro, si falta una no funcionara, es por eso que debes tener conocimiento básico de HTML ya que cualquier error afectara todo el código 

<img src="imagenHTML.jpg">

Donde dice "imagenHTML.jpg"  aquí es donde vas a sustituir por el nombre o dirección que tenga tu imagen y que este en tu directorio web. Si no la tienes cargada en tu servidor web, un tip muy bueno es que te crees una entrada y le asignes una fecha muy vieja y le coloques el título “Banners del blog”, en esa entrada carga todos los banners que estarán en tu sitio, cuando los subas los pones  en “Tamaño Original” y los publicas como si fuese un post, cuando quieras el código solo abres el post y buscas la imagen para abrirla en una nueva pestaña y copies el código de la misma.

Nota: Es muy importante que la imagen que vas a colocar ya tenga el tamaño que debe de tener, pues aparecerá tal cual. 

El código quedaría más o menos así.

Como lo mencione, existen varios tipos de códigos para imágenes, los cuales son que estas tengan borde, ancho y alto, también que le coloques una dirección.

Como ya se los dije, es importante que ya tengas las medidas de tu imagen, aunque existe la posibilidad de poder ajustar las medidas de las mismas,  esto es muy útil en ciertos casos.

El código es:

<img src="imagen.jpg" width="128" height="90">

En donde height es (alto) y width es (ancho)

Insertar imágenes con enlaces

Este  código es mayormente utilizado por todos ya que es para banners publicitarios que al presionarlos te envía al sitio del anunciante. Para colocar una imagen así, el código es el siguiente:

<a href="link del sitio"><img src="tuimagen.png"></a>


href establece la ruta de la página a la que dirigirá la imagen cuando el usuario la presione, ya sea a una pagina web, una red social, etc.

Otro ejemplo de este código seria:

<a href="https://www.jonathansosamx,com/">
   <img src="tuimagen.png" />
</a>


Atributo alt

El atributo ALT es el que se usa para describir la imagen, en donde se le coloca un texto alternativo que se muestra en lugar de la imagen cuando esta no exista o el navegador no logre cargarla. En estos casos, este texto alternativo es la única manera en la que los visitantes pueden conocer el contenido de la imagen.

Este atributo aparte de describir la imagen es perfecto para hacer SEO, ya que es la información que los motores de búsqueda como Google pueden encontrar y posicionar la imagen en los primeros lugares. Es por eso que no se tiene que descuidar este atributo.

Nota: Un tip es que desde el momento que exportes tu banner o imagen, le asignes el nombre correcto, por ejemplo;  una publicidad de un carro,cuando lo guardes no lo nombres “Banner listo”, nómbralo “Carro BMW color negro 2019” 

Código completo para añadir una imagen a una web o blog.

La mejor manera para colocar una imagen es de la siguiente manera:

<a href="paginaweb.html">
    <img src="archivo.png"
    width="300" height="150"
    alt="texto alternativo de la imagen" />

</a>

Si puedes observar, el código alberga todo lo que ya vimos anteriormente, pero si apenas estas aprendiendo puedes utilizar cualquiera de los códigos de arriba, pero si me preguntas cual es el mejor, te recomiendo que le entres a este último ya que es el que le beneficia a tu blog

Debo decirte que esta es una de los códigos más básicos ya que existen otros que llevan màs detalles pero se tiene que hacer uso de CSS.  

Otros ejemplos de imágenes son:

• Mapas de imágenes,
• Imágenes de fondo con CSS.

Espero y este articulo haya sido de ayuda y la recomendación es que intentes memorizarlos para que no tengas que andar buscándolos a cada rato.


Ya para finalizar te invito a que me dejes un comentario y si crees que falto algo por explicar lo pongas en la caja de los comentarios. ¡Comenta porqué este blog se alimenta de las letras”

Tags: Blogging

Share: