Cómo crear anuncios en HTML

Autor: | Última modificación: 17 de junio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Sabemos que la publicidad en internet es una de las más exitosas de hoy en día y aprender a crearla es una competencia muy importante si quieres empezar en el sector. En este post, te enseñamos cómo crear anuncios en HTML.

Cómo crear anuncios en HTML

Hay varias opciones para crear anuncios en HTML. Si se tiene conocimientos sobre programación, se suele usar la opción de hacerlo from scratch. Otra opción es usar herramientas, como Google web designer, o softwares, como Adobe Animate. 

From scratch

Esta opción de cómo crear anuncios en HTML te permite crear los anuncios desde cero. Es a base de código usando JavaScript y HTML

Para crearla puedes usar HTML básico y agregarle imágenes con un programa gráfico después. 

Para hacer un banner muy sencillo puedes hacer una tabla y ajustarla a las dimensiones que quieras:

<table width=»280″ border=»2″ cellpadding=»3″ bordercolor=»#BD87BB»>

Al texto puedes ponerle lo que quieras en términos de estilo, por ejemplo puedes centrar el texto, cambiar el tipo de letra con google fonts etc. 

Para que tu banner lleve a las personas a tu página web debes poner el código con un vínculo. 

<a href=»https://keepcoding.io«>

<table width=»280″ border=»2″ cellpadding=»3″ bordercolor=»#BD87BB»>

<tr><td>

<div align=»center»>Nombre del banner</div>

</td></tr>

</table>

</a>

Y con eso tendrías un banner muy sencillo con solo HTML. Si quieres agregarle gráficos, podrías hacer una imagen en un software de diseño y agregarla como fondo a la tabla que ya tenías.

 <a href=»https://keepcoding.io«>

<table width=»275″ height=»250″ border=»0″ cellpadding=»0″ bordercolor=»#ffffff» background=»imagen.jpg»>

</table>

🔴 ¿Quieres entrar de lleno al Marketing Digital? 🔴

Descubre el Bootcamp en Marketing Digital y Análisis de Datos de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp en Marketing Digital y Análisis de Datos por una semana

</a>

Google web Designer

Google web designer también utiliza JavaScript y HTML; sin embargo, la herramienta tiene una interfaz visual. 

Para crear un banner en google debes entrar a la aplicación y elegir el tipo de publicidad que estás intentando hacer. 

Al ser un servicio de Google, estos ads se conectan directamente con los otros servicios. Debes ponerle un nombre, dónde guardarla, a qué va dirigida tu publicidad (Google Ads, Google AdMob…), las dimensiones, cómo quieres que interactúe con tus usuarios, qué tipo de publicidad vas a tener… Después, puedes pasar a diseñar.

Esta herramienta te permite poner imágenes, vídeos y tipos de letras que desees.

Adobe Animate

Una de las formas de cómo crear anuncios en HTML más sencillas es usar Adobe animate, muy parecido a Google web designer. Te permite usar canvas, HTML y JavaScript con una interfaz parecida a la de Illustrator. Una de las ventajas de esta aplicación es que te permite importar tu logo e ilustraciones desde Photoshop y modificarlas sin problema. 

Para crearlo, primero debes tener lista la animación que quieres que tenga tu banner. Después, debes usar el panel de acciones para agregarle las características que quieras que tenga el banner en el momento en el que los usuarios interactúen con él y, finalmente, puedes exportarlo como html5. 

Aprende con nosotros

Si te interesan los temas de marketing y análisis de datos y no sabes por dónde empezar, no dudes en apuntarte a nuestro Bootcamp de Marketing Digital y Análisis de datos, donde encontrarás todos los temas que te convertirán en un experto. ¡Entra ya!

[email protected]

¿Sabías que hay más de 2.700 vacantes para especialistas en Marketing sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!