DEV Community

Cover image for Empezado en el maquetado de Emails con HTML y ¿Tablas? PT 1
Lizeth Garcia
Lizeth Garcia

Posted on

Empezado en el maquetado de Emails con HTML y ¿Tablas? PT 1

Estos días por el trabajo he empezado a introducirme en el email Marketing y a codificar todo para el. Empecé como todos con plantillas y documentando me pero había estado en un error gradual:

Yo tenía un año sin trabajar con código y estaba oxidada y no entendía nada de lo que "estaba editando" Así que me propuse como meta volver a trabajar con ello y pues, aprovecho que estoy aquí para narrar mis experiencias en el retorno al código.

Ahora empecemos en el maravilloso mundo del Email Coding.

Ahora la pregunta más importante de toda.

¿Cómo empiezo?

Todo lo que he "leído" me dice que debo escribir css de manera "inline".

¿Cómo en los viejos tiempos?
¡Así es!

¿Que es el CSS inline? (Desde mis propias palabras)
Prácticamente escribes el css en tu HTML

<p style="margin: 0;">

Les puede explotar el cerebro a muchos cuando están casados con las clases y los ID.

Todo bien hasta aquí. No es como si no hubiera escrito inline css en mis días mozos en la universidad/preparatoria.

Así que en ese punto estoy "familiarizada".

Ahora hablemos de la cosa que tengo que hablar en esta publicación y por la cual me digne a escribir esto en base a este super poderoso Tutorial y el cual voy a estar analizando porque no tengo amigos con quien hablar de esto y necesito hablarlo con alguien :

Las tablas

Las tablas van a ser tus mejores amigas.

La etiqueta tabla se compone de lo siguiente:
<table> </table>

La estructura en HTML dentro del body se vería así:

<body>
<table>
<tr>
<td>

AQUI VA TU CONTENIDO DE TU EMAIL

</td>
</tr>
</table>
</body>
Enter fullscreen mode Exit fullscreen mode

¿Cómo juego con table?

Ya conociendo la estructura básica de las tablas nos pasamos directamente al código.

Primero, esto va a ser escrito en HTML 4.0 transicional o en XHTML debido a que la 'renderizarse' de tantas maneras en diferentes clientes de correo.

Después del body (poderoso) empezamos con nuestra tabla principal.

Esta tabla va a ser un contenedor de todas las tablas que usaremos en el resto de nuestra estructura.

Aquí llega el punto que más me hace explotar la cabeza.

Escribir la primera tabla que va a contener "Objetos"

<body>
<table>
<tr>
<td>

  <!-- PRIMERA TABLA -->
  <table>
  <tr>
  <td>
     <p> hola mundo </p>
  </td>
  </tr>
  </table>

</td>
</tr>
</table>
</body>
Enter fullscreen mode Exit fullscreen mode

Prácticamente con el código anterior ya tenemos el esqueleto básico de nuestro HTML (Sin CSS). Pero seguiremos en la siguiente parte que yo tengo que procesar como explicarme y explicarles lo que yo entendí.

Nos leemos luego en mas aventuras con el código.

  • Liz

Top comments (1)

Collapse
 
thewiredcode profile image
🌙Dai • Edited

Wooow no tengo idea de email marketing pero se ve interesante. Una locura usar css inline a estas alturas pero tiene sentido al ser para correo electrónico.
Espero tu siguiente entrada y que nos cuentes mas sobre esto.
Animo que estoy segura que vas a lograrlo y de la manera mas bonita 😉