Contenido del curso

Introducción y planeación

Primer proyecto: cómo usar Mailchimp para tu estrategia

Segundo proyecto: Diseño de emails

Tercer proyecto: maquetación de email de promoción en técnica escalable

Cuarto proyecto: maquetación de newsletter en técnica responsive

Cierre

36
Diseño y Maquetación de Emails con Mailchimp
01:06 min

Tomar examen

Inserción de Imágenes y Enlaces en Plantillas de Email HTML

Resumen

Reto: Añade el contenido que debe ir en el footer y comparte tu código en la sección de discusiones.

Comentarios

Andrés Perdomo

student•

Este seria mi ejercicio, teniendo en cuenta que solo puse dos redes y la web, además de colocar el enlace de darse de baja.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <table border="1">
        <!--Header-->
        <tr>
            <td>
                <a href="https://platzi.com/" target="_blank">
                <img src="imagen/platzi_logo.png" alt="Escuela Online">
                </a>
            </td>
        </tr>
        <!--Fin header-->
        <!--contenido-->
        <tr>
            <td>
                <!--Contenido destacado-->
            <table border="1">
                <tr>
                    <td>Hola, *Nombre*</td>
                </tr>
                <tr>
                    <td>
                        <img src="imagen/destacado.jpg" alt="Nuevo curso de diseño y maquetación de emails">
                    </td>
                </tr>
                <tr>
                    <td>Aprende cuáles son las herramientas necesarias y las buenas prácticas para ejecutar un email.</td>
                </tr>
                <tr>
                    <td> 
                        <a href="https://platzi.com/clases/diseno-email/" target="_blank">
                        <img src="imagen/CTA.PNG" alt="Quiero aprender ya">
                        </a>
                    </td>
                </tr>
            </table>
                <!--Fin contenido destacado-->
            </td>
        </tr>
        <!--Fin contenido-->
        <!--Footer-->
        <tr>
            <td>
            <table border="1">
                <tr>
                    <td>
                    <table border="1">
                        <!--Redes sociales-->
                        <tr>
                            <td>
                                <a href="https://twitter.com/platzi" target="_blank">
                                <img src="imagen/TWT.png" alt="Twitter">
                                </a>
                            </td>
                            <td>
                                <a href="https://www.facebook.com/platzi/" target="_blank">
                                <img src="imagen/FB.png" alt="Facebook">
                                </a>
                            </td>
                            <td>
                                <a href="https://platzi.com/" target="_blank">
                                <img src="imagen/ENLACE.png" alt="Web">
                                </a>
                            </td>
                        </tr>
                        <!-- Fin Redes Sociales-->
                    </table>    
                    </td>
                </tr>
                <!--Información de la marca-->
                <tr>
                    <td> Enviado con ♥ por Platzi</td>
                </tr>
                <!-- Fin Información de la marca-->
                <!--Legales-->
                <tr>
                    <td>Te enviamos este contenido porque haces parte de la comunidad Platzi.</td>
                </tr>
                <tr>
                    <td>Lamentamos que te vayas, pero puedes <a href="http://sendgrid.platzi.com/asm/unsubscribe/" target="_blank">darte de baja aquí.</a></td>
                </tr>
                <!--Fin de legales-->
            </table>
            </td>
        </tr>
        <!--Fin footer-->
    </table>
</body>
</html>```

Usuario anónimo

user•

Hola, una consulta ese corazón que inserto como texto mediante Windows + . ¿es "leído" por los clientes de correos o puede dar fallas? Gracias

Karen Andrea Vargas Falla

student•

febrero de 2024. Este contenido esta demasiado desactualizadoooo. MAilchimp ya no requiere codigo, parece una clase de la prehistoria que mal :(

Yuderlyn Natera

student•

a qué te refieres con que mailchimp no requiere código??

Steven ‘Sty’ Vargas Rojas

student•

💚 Éste sería mi Código:

• 💚 Éste sería el diseño:

Jacinto Del Garanazo

student•

Les recomiendo utilizar el plugin Live Server, para que la página se actualice sola a medida que generen cambios y puedan ir viendo en tiempo real

Juan Carlos Wilches Niño

student•

que es o para que sirve cuando a una etiqueta <a> tiene el atributo (rel="noopener noreferrer") para que funciona exactamente?

David Gonzalez

student•

No me sale el logo, Ayuda!

Yuderlyn Natera

student•

¿No se usan etiquetas de textos para los textos? o sea, la etiqueta p

Christian Ponce

student•

el curso es bueno y muy completo, pero no se en que año fue editado. estamos en Julio 2022, y hablar de codigos en mailchimp ya no es necesario hoy en dia, hay muchos tutoriales gratis que simplifican el uso adecuado de mailchimp y sin confundir a todos los nuevos usuarios de platzi y que son emprendedores. Ademas tiene videos duplicados y enlaces a youtube y creo degradan a Platzi.

Luis Francisco Rascón Carrasco

student•

Juan Carlos Wilches Niño

student•

Neira Marina Requena Rodriguez

student•

Jorge Isaac Vasquez Sanchez

student•

Hola Martha, te dejo por acá mi código, con la parte del footer:

Aun no se por qué queda un espacio entre el ícono de facebook y las demás rrss.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <table border="1">
        <!-- Header -->
        <tr>
            <td>
                <a href="https://platzi.com" target="_blank">
                    <img src="img/logo-platzi.png" alt="platzi, un sitio web para estudiar">
                </a>
            </td>
        </tr>
        <!-- Fin Header -->
        <tr>
            <td>
                <!-- Contenido -->
                <table border="1">
                    <!-- Saludo -->
                    <tr>
                        <td>
                            Hola *Nombre*,
                        </td>
                    </tr>
                    <!-- Imagen destacada -->
                    <tr>
                        <td><a href="https://platzi.com/clases/diseno-email/" target="_blank"></a></td>
                    </tr>
                    <!-- Texto principal -->
                    <tr>
                        <td>
                            Aprende cuales son las herramientas necesarias y las buenas prácticas para maquetar emails exitosos
                        </td>
                    </tr>
                    <tr>
                        <!-- CTA (Call To Action)/Botón principal -->
                        <td>
                            <a href="https://platzi.com/clases/diseno-email/" target="_blank">
                                <img src="img/cta-principal.png" alt="">
                            </a>
                        </td>
                    </tr>
                </table>
                <!-- Fin Contenido -->
            </td>
        </tr>
        <!-- Footer -->
        <tr>
            <td>
                <table>
                    <tr>
                        <!-- Redes sociales -->
                        <td>
                            <a href="http://facebook.com" target="_blank">
                                <img src="img/ic-facebook.png" alt="Ir a facebook">
                            </a>
                        </td>
                        <td>
                            <a href="https://twitter.com/" target="_blank">
                                <img src="img/ic-twitter.png" alt="Ir a twitter">
                            </a>
                        </td>
                        <td>
                            <a href="https://www.instagram.com/" target="_blank">
                                <img src="img/ic-instagram.png" alt="Ir a instagram">
                            </a>
                        </td>
                        <td>
                            <a href="https://www.instagram.com/" target="_blank">
                                <img src="img/ic-instagram.png" alt="Ir a instagram">
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Enviado con amor por Platzi
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Enviamos este contenido porque haces parte de la comunidad Platzi.<br/>
                            Lamentamos que te vayas, pero  puedes darte de baja <a href="#">aquí</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>```

Óscar Rodríguez

student•

Hola Martha, te comparto mi código :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </head> <body> <table border="1">  <tr> <td> <a href="https://www.instagram.com/artmachinedg/" target="_blank"> <img src="images/logo-art-machine.png" alt="Art Machine - Damos vida a tus ideas"> </a> </td> </tr>   <tr> <td>  <table border="1"> <tr> <td>Hola, *Nombre*</td> </tr> <tr> <td> <a href="https://www.instagram.com/artmachinedg/" target="_blank"> <img src="images/destacado.png" alt="Creamos tu marca"> </a> </td> </tr> <tr> <td>Sabemos que lo más importante de tu marca es como las personas la perciben, por eso te ayudamos a crear una marca única, empieza a hacer historia!!</td> </tr> <tr> <td> <a href="https://www.instagram.com/artmachinedg/" target="_blank"> <img src="images/cta-contacto.png" alt="Quiero mi logo"> </a> </td> </tr> </table> </td> </tr>   <tr> <td> <table border="1"> <tr> <td>redes-sociales</td> </tr> <tr> <td> <table border="1" > <tr> <td> <a href="https://www.facebook.com" target="_blank"> <img src="images/icn-facebook.png" alt="Quiero mi logo"> </a> </td> <td> <a href="https://www.twitter.com" target="_blank"> <img src="images/icn-twitter.png" alt="Quiero mi logo"> </a> </td> <td> <a href="https://www.instagram.com/artmachinedg/" target="_blank"> <img src="images/icn-instagram.png" alt="Quiero mi logo"> </a> </td> <td> <a href="https://www.youtube.com" target="_blank"> <img src="images/icn-youtube.png" alt="Quiero mi logo"> </a> </td> </tr> </table> </td> </tr> <tr> <td>legal</td> </tr> </table> </td> </tr>  </table> </body> </html>

Carol Torres Cala

student•

Hola Marta! Dejo mi código con el Footer. Gracias!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--     <title>Document</title> --><!--  se elimina title porque no sirve para email marketing -->
<!-- no etiqueta Div, se trabaja con tablas -->
</head>
<body>
    <table border="1">
        <!-- Header -->
            <!-- Inicio Logo -->
        <tr>
            <td>
                <a href="https://platzi.com/" target="_blank">
                <img src="imagenes/logo-platzi.png" alt="Platzi - Escuela online de formación en tecnología">
                </a>
            </td>
        </tr>
            <!-- Fin Logo -->
        <!-- Fin Header -->
        <!-- Contenido -->
        <tr>
            <td>
                <!-- Contenido destacado -->
                <table border="1">
                    <tr>
                        <td>Hola, *Nombre*</td>
                    </tr>
                    <tr>
                        <td>
                            <a href="https://platzi.com/cursos/diseno-email/" target="_blank">
                            <img src="imagenes/curso-email-html.jpg" alt="NUEVO curso de Diseño y Maquetación de Emails">
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>Aprende cuáles son las herramientas necesarias y las buenas prácticas para ejecutar un email.</td>                        
                    </tr>
                    <tr>
                        <td>
                            <a href="https://platzi.com/cursos/diseno-email/" target="_blank">
                            <img src="imagenes/cta-principal.png" alt="Quiero aprender ya">
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!-- Fin Contenido -->
        <!-- Footer -->
        <tr>
            <td>
                <table border="1">
                    <tr>
                        <td>
                            <!-- Inicio redes sociales -->
                            <table border="1">
                                <tr>
                                    <td>
                                        <a href="https://www.facebook.com/platzi" target="_blank">
                                        <img src="imagenes/ic-facebook.png" alt="facebook Platzi">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://twitter.com/platzi" target="_blank">
                                        <img src="imagenes/ic-twitter.png" alt="twitter Platzi">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.instagram.com/platzi/" target="_blank">
                                        <img src="imagenes/ic-instagram.png" alt="instagram Platzi">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.youtube.com/channel/UC55-mxUj5Nj3niXFReG44OQ" target="_blank">
                                        <img src="imagenes/ic-youtube.png" alt="Youtube Platzi">
                                        </a> 
                                    </td>
                                </tr>
                            </table>
                            <!-- Fin redes sociales -->
                        </td>
                    </tr>
                    <tr>
                        <td>Enviado con ♥ por Platzi</td>
                    </tr>
                    <tr>
                            <td>
                                    Te enviamos este contenido porque haces parte de la comunidad Platzi.
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Lamentamos que te vayas, pero puedes darte de baja aquí.
                                </td>
                            </tr>
                </table>
            </td>
        </tr>
        <!-- Fin Footer -->
    </table>
    
</body>
</html>

Daniel Felipe Merchan Fuquen

student•

Reto completado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
  <table border="1">
    <!-- Header -->
    <tr>
      <td>
        <a href="https://platzi.com/" target="_blank">
        <img src="images/logo-platzi.png" alt="Platzi - Escuela online de formación en tecnología">
        </a>
      </td>
    </tr>
    <!-- Fin Header -->
    <!-- Contenido -->
    <tr>
      <td>
        <!-- Contenido destacado -->
        <table border="1">
          <tr>
            <td>Hola *Nombre*</td>
          </tr>
          <tr>
            <td>
              <a href="https://platzi.com/cursos/diseno-email/" target="_blank">
              <img src="images/curso-de-email-html.jpg" alt="NUEVO Curso de Diseño Y Maquetación de Emails">
              </a>
            </td>
          </tr>
          <tr>
            <td>Aprende cuáles son las herramientas necesarias y las buenas prácticas para ejecutar un email.</td>
          </tr>
          <tr>
            <td>
              <a href="https://platzi.com/cursos/diseno-email/" target="_blank">
              <img src="images/cta-principal.png" alt="Quiero aprender ya">
              </a>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <!-- Fin Contenido -->
    <!-- Footer -->
    <tr>
      <td>
        <table border="1">
          <tr>
            <td>
              <table border="1">
                <tr>
                  <td>
                    <a href="https://www.facebook.com/platzi" target="_blank">
                    <img src="images/ic-facebook.png" alt="Facebook de Platzi">
                    </a>
                  </td>
                  <td>
                    <a href="https://twitter.com/platzi" target="_blank">
                      <img src="images/ic-twitter.png" alt="Twitter de Platzi">
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>Enviado con amor por Platzi</td>
          </tr>
          <tr>
            <td>Te enviamos este contenido porque haces parte de la comunidad Platzi. 
                Lamentamos que te vayas, pero puedes darte de <a href="#">baja aquí.</a></td>
          </tr>
        </table>
      </td>
    </tr>
    <!-- Fin Footer -->
  </table>
</body>
</html>```

Anderson Víctoria Tejada

student•

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
	<table border="1">
		<!-- Header -->
			<!-- Inicio Logo -->
		<tr>
			<td>
				<a href="http://sgtnetworks.com" target="_blank" > 
				<img src="images/logo.png" alt="Sona Green Technologies - Lider en infraestructura Cisco"></a>
			</td>
		</tr>
			<!-- Fin Logo -->

		<!-- Fin Header -->

			<!-- Contenido -->
		<tr>
			<td>
				<table border="1">
				<!-- Inicio Saludo -->
					<tr>
						<td>Hola, *Nombre*</td>
					</tr>
					  <!-- Fin Saludo -->

					  <!-- Inicio Imagen Destacado -->
					<tr>
						<td>
							<a href="https://www.cisco.com/c/m/en_us/solutions/enterprise-networks/solution-builder.html?oid=caten018587" target="a_blank">
							<img src="images/contenido.png" alt="¡Qué necesita su red?">
							</a>
					</td>

					</tr>
					<!-- Fin Imagen Destacado -->

					<!-- Inicio Texto Destacado -->
					<tr>
						<td>Responda dos preguntas y cree una solución que pueda ayudarlo a cumplirla</td>
					</tr>
					<!-- Fin Texto Destacado -->

					<!-- Inicio CTA -->
					<tr>
						<td><a href="https://www.cisco.com/c/m/en_us/solutions/enterprise-networks/solution-builder.html?oid=caten018587" target="a_blank">
							<img src="images/CTA.png" alt="Realizar test de examen de Red">
							</a>
						</td>
					</tr>
					<!-- Fin CTA -->
				</table>
			</td>
		</tr>
			<!-- Fin Contenido -->
			<!-- Footer-->
		<tr>
			<td>
				<table border="1">
					
					<!-- Inicio Redes Sociales -->
					<tr>
						<td>
							<table border="1">
							<tr>
								<td><a href="https://www.facebook.com/Sona-Green-Tech-112390463449415/?view_public_for=112390463449415" target="a_blank"><img src="images/face.png"></a></td>
								<td><a href="https://twitter.com/tw_sona" target="a_blank"><img src="images/Twitter.png"></a></td>
								<td><a href="https://www.linkedin.com/company/sona-green-tech/about/?viewAsMember=true" target="a_blank"><img src="images/Linkedin.png"></a></td>
								<td><a href="https://www.youtube.com/channel/UCR5fyMD7O4e4hLzL5CCUYHQ?disable_polymer=true" target="a_blank"><img src="images/Youtube.png"></a></td>
							</tr>
						</table>
						</td>
					</tr>
					<!-- Fin Redes Sociales -->
                       
					<!-- Inicio Info Marca -->
					<tr>
						<td><img src="images/sona.png" alt="Enviado desde Sona Green Technologies"></td>
					</tr>
					<!-- Fin Info Marca -->
					<!-- Inicio Legal -->
					<tr>
						<td>Te enviamos este contenido porque haces parte de los Clientes Premium de Sona.
</td>
					</tr>
					<tr>
						<td>Lamentamos que te vayas, pero puedes darte de baja <a href="https://sona.us20.list-manage.com/unsubscribe?u=55135afb9cefa68f72742ad69&id=c009f6d09a&e=[UNIQID]&c=981799468b"> aquí.</a></td>
					</tr>
					<!-- Fin Legal -->
				</table>
			</td>
		</tr>
		<!-- Footer-->


	</table>
	

</body>


</html>>

Nico Melgarejo Sabelle

student•

¿Por qué no usar un botón hecho en html?

Nico Melgarejo Sabelle

student•

¿Podríamos usar ul para enlistar las rrss?

Nico Melgarejo Sabelle

student•

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=devise-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
</head>

<body>
    <table border="1">
        <!-- Header -->
        <tr>
            <td>
                <a href="https://www.ticlass.com" target="_blank">
                    <img src="https://ticlasss.s3.amazonaws.com/uploaded/bankfiles/images/2020/06/11/transparente.png" alt="logo TIClass - ">
                </a>
            </td>
        </tr>
        <!-- FinHeader -->
        <!-- Contenido-->
        <tr>
            <td>
                <table border="1">
                    <!-- Destacado-->
                    <tr>
                        <td>Hola *Nombre*! </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="https://www.ticlass.com/plan/53-intensivo-ptu-full-admision-2021" target="_blank"> 
                                <img width="640px"src="https://ticlasss.s3.amazonaws.com/uploaded/bankfiles/images/2020/06/05/portada1-intensivo2020.png" alt="Programa de preparación Intensiva para la Prueba de Transición para el Ingreso a la Educación Superior">
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p>Preparar la PTU en 5 meses es posible. Te diremos qué, cuándo y con qué estudiar. Accede al mejor y más completo programa PTU online. Son 21 exclusivas clases en vivo por cada asignatura (147 en total), más de 4.000 recursos de aprendizaje disponibles de inmediato, ensayos guías y una comunidad de aprendizaje 24/7 disponible para ti. Tendrás acceso inmediato al programa y clases en vivo. Las clases del programa inician el 6 de julio.</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="https://www.ticlass.com/plan/53-intensivo-ptu-full-admision-2021" style="background: #99CC33;color:#fff;padding:10px 15px;border-radius: 6px;clear:both;display:inline-block;" target="_blank">ASEGURAR MI CUPO</a>
                        </td>
                    </tr>
                    <!-- Fin destacado -->
                </table>
            </td>
        </tr>
        <!-- FinContenido -->
        <!-- Footer -->
        <tr>
            <td>
                <table border="1">
                    <tr>
                        <td>
                            <table border="1">
                                <tr>
                                    <td>
                                        <a href="https://www.instagram.com/ticlasscom">
                                            <img src="https://ticlasss.s3.amazonaws.com/uploaded/bankfiles/images/2020/06/27/ic-instagram_c679cfa5-bbe8-420d-9f54-a9de426bd0d7.png" alt="Instagram de TIClass">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.youtube.com/c/ticlass">
                                            <img src="https://ticlasss.s3.amazonaws.com/uploaded/bankfiles/images/2020/06/27/ic-youtube_06569a42-d88a-4caa-ad50-6f83fd92e9e0.png" alt="Canal de YouTube de TIClass">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.facebook.com/ticlasscom">
                                            <img src="https://ticlasss.s3.amazonaws.com/uploaded/bankfiles/images/2020/06/27/ic-facebook_a1f92eab-4580-41d1-b8ec-8956711e62d0.png" alt="Fanpage de TIClass">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.twitter.com/ticlasscom">
                                            <img src="https://ticlasss.s3.amazonaws.com/uploaded/bankfiles/images/2020/06/27/ic-twitter_8ec9c0d6-db74-4afc-ae49-b13613a3977a.png" alt="Twitter de TIClass">
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>Hecho con &hearts; desde Chile</td>
                    </tr>
                    <tr>
                        <td>Baker Street 221b </td>
                        <td>Teléfono: 555-555-555</td>
                        <td> 
                           <a href="#">No quiero recibir más estos correos</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!-- Fin Footer-->
    </table>
</body>
</html>

Josué Hernández

student•

Tengo una duda. ya que es recomendable que las imagenes deben de estar alojadas en un servidor y utilizar rutas absolutas que apunten a ellas, ese servidor debe estar siempre encendido para que pueda acceder a ellas en cualquier momento?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <table border="1">
        <!--Header-->
        <tr>
            <td>
                <a href="https://platzi.com/" target="_blank">
                <img src="imagen/platzi_logo.png" alt="Escuela Online">
                </a>
            </td>
        </tr>
        <!--Fin header-->
        <!--contenido-->
        <tr>
            <td>
                <!--Contenido destacado-->
            <table border="1">
                <tr>
                    <td>Hola, *Nombre*</td>
                </tr>
                <tr>
                    <td>
                        <img src="imagen/destacado.jpg" alt="Nuevo curso de diseño y maquetación de emails">
                    </td>
                </tr>
                <tr>
                    <td>Aprende cuáles son las herramientas necesarias y las buenas prácticas para ejecutar un email.</td>
                </tr>
                <tr>
                    <td> 
                        <a href="https://platzi.com/clases/diseno-email/" target="_blank">
                        <img src="imagen/CTA.PNG" alt="Quiero aprender ya">
                        </a>
                    </td>
                </tr>
            </table>
                <!--Fin contenido destacado-->
            </td>
        </tr>
        <!--Fin contenido-->
        <!--Footer-->
        <tr>
            <td>
            <table border="1">
                <tr>
                    <td>
                    <table border="1">
                        <!--Redes sociales-->
                        <tr>
                            <td>
                                <a href="https://twitter.com/platzi" target="_blank">
                                <img src="imagen/TWT.png" alt="Twitter">
                                </a>
                            </td>
                            <td>
                                <a href="https://www.facebook.com/platzi/" target="_blank">
                                <img src="imagen/FB.png" alt="Facebook">
                                </a>
                            </td>
                            <td>
                                <a href="https://platzi.com/" target="_blank">
                                <img src="imagen/ENLACE.png" alt="Web">
                                </a>
                            </td>
                        </tr>
                        <!-- Fin Redes Sociales-->
                    </table>    
                    </td>
                </tr>
                <!--Información de la marca-->
                <tr>
                    <td> Enviado con ♥ por Platzi</td>
                </tr>
                <!-- Fin Información de la marca-->
                <!--Legales-->
                <tr>
                    <td>Te enviamos este contenido porque haces parte de la comunidad Platzi.</td>
                </tr>
                <tr>
                    <td>Lamentamos que te vayas, pero puedes <a href="http://sendgrid.platzi.com/asm/unsubscribe/" target="_blank">darte de baja aquí.</a></td>
                </tr>
                <!--Fin de legales-->
            </table>
            </td>
        </tr>
        <!--Fin footer-->
    </table>
</body>
</html>```

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <table border="1">
        <!-- Header -->
        <tr>
            <td>
                <a href="https://platzi.com" target="_blank">
                    <img src="img/logo-platzi.png" alt="platzi, un sitio web para estudiar">
                </a>
            </td>
        </tr>
        <!-- Fin Header -->
        <tr>
            <td>
                <!-- Contenido -->
                <table border="1">
                    <!-- Saludo -->
                    <tr>
                        <td>
                            Hola *Nombre*,
                        </td>
                    </tr>
                    <!-- Imagen destacada -->
                    <tr>
                        <td><a href="https://platzi.com/clases/diseno-email/" target="_blank"></a></td>
                    </tr>
                    <!-- Texto principal -->
                    <tr>
                        <td>
                            Aprende cuales son las herramientas necesarias y las buenas prácticas para maquetar emails exitosos
                        </td>
                    </tr>
                    <tr>
                        <!-- CTA (Call To Action)/Botón principal -->
                        <td>
                            <a href="https://platzi.com/clases/diseno-email/" target="_blank">
                                <img src="img/cta-principal.png" alt="">
                            </a>
                        </td>
                    </tr>
                </table>
                <!-- Fin Contenido -->
            </td>
        </tr>
        <!-- Footer -->
        <tr>
            <td>
                <table>
                    <tr>
                        <!-- Redes sociales -->
                        <td>
                            <a href="http://facebook.com" target="_blank">
                                <img src="img/ic-facebook.png" alt="Ir a facebook">
                            </a>
                        </td>
                        <td>
                            <a href="https://twitter.com/" target="_blank">
                                <img src="img/ic-twitter.png" alt="Ir a twitter">
                            </a>
                        </td>
                        <td>
                            <a href="https://www.instagram.com/" target="_blank">
                                <img src="img/ic-instagram.png" alt="Ir a instagram">
                            </a>
                        </td>
                        <td>
                            <a href="https://www.instagram.com/" target="_blank">
                                <img src="img/ic-instagram.png" alt="Ir a instagram">
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Enviado con amor por Platzi
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Enviamos este contenido porque haces parte de la comunidad Platzi.<br/>
                            Lamentamos que te vayas, pero  puedes darte de baja <a href="#">aquí</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>```

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--     <title>Document</title> --><!--  se elimina title porque no sirve para email marketing -->
<!-- no etiqueta Div, se trabaja con tablas -->
</head>
<body>
    <table border="1">
        <!-- Header -->
            <!-- Inicio Logo -->
        <tr>
            <td>
                <a href="https://platzi.com/" target="_blank">
                <img src="imagenes/logo-platzi.png" alt="Platzi - Escuela online de formación en tecnología">
                </a>
            </td>
        </tr>
            <!-- Fin Logo -->
        <!-- Fin Header -->
        <!-- Contenido -->
        <tr>
            <td>
                <!-- Contenido destacado -->
                <table border="1">
                    <tr>
                        <td>Hola, *Nombre*</td>
                    </tr>
                    <tr>
                        <td>
                            <a href="https://platzi.com/cursos/diseno-email/" target="_blank">
                            <img src="imagenes/curso-email-html.jpg" alt="NUEVO curso de Diseño y Maquetación de Emails">
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>Aprende cuáles son las herramientas necesarias y las buenas prácticas para ejecutar un email.</td>                        
                    </tr>
                    <tr>
                        <td>
                            <a href="https://platzi.com/cursos/diseno-email/" target="_blank">
                            <img src="imagenes/cta-principal.png" alt="Quiero aprender ya">
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!-- Fin Contenido -->
        <!-- Footer -->
        <tr>
            <td>
                <table border="1">
                    <tr>
                        <td>
                            <!-- Inicio redes sociales -->
                            <table border="1">
                                <tr>
                                    <td>
                                        <a href="https://www.facebook.com/platzi" target="_blank">
                                        <img src="imagenes/ic-facebook.png" alt="facebook Platzi">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://twitter.com/platzi" target="_blank">
                                        <img src="imagenes/ic-twitter.png" alt="twitter Platzi">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.instagram.com/platzi/" target="_blank">
                                        <img src="imagenes/ic-instagram.png" alt="instagram Platzi">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.youtube.com/channel/UC55-mxUj5Nj3niXFReG44OQ" target="_blank">
                                        <img src="imagenes/ic-youtube.png" alt="Youtube Platzi">
                                        </a> 
                                    </td>
                                </tr>
                            </table>
                            <!-- Fin redes sociales -->
                        </td>
                    </tr>
                    <tr>
                        <td>Enviado con ♥ por Platzi</td>
                    </tr>
                    <tr>
                            <td>
                                    Te enviamos este contenido porque haces parte de la comunidad Platzi.
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Lamentamos que te vayas, pero puedes darte de baja aquí.
                                </td>
                            </tr>
                </table>
            </td>
        </tr>
        <!-- Fin Footer -->
    </table>
    
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
  <table border="1">
    <!-- Header -->
    <tr>
      <td>
        <a href="https://platzi.com/" target="_blank">
        <img src="images/logo-platzi.png" alt="Platzi - Escuela online de formación en tecnología">
        </a>
      </td>
    </tr>
    <!-- Fin Header -->
    <!-- Contenido -->
    <tr>
      <td>
        <!-- Contenido destacado -->
        <table border="1">
          <tr>
            <td>Hola *Nombre*</td>
          </tr>
          <tr>
            <td>
              <a href="https://platzi.com/cursos/diseno-email/" target="_blank">
              <img src="images/curso-de-email-html.jpg" alt="NUEVO Curso de Diseño Y Maquetación de Emails">
              </a>
            </td>
          </tr>
          <tr>
            <td>Aprende cuáles son las herramientas necesarias y las buenas prácticas para ejecutar un email.</td>
          </tr>
          <tr>
            <td>
              <a href="https://platzi.com/cursos/diseno-email/" target="_blank">
              <img src="images/cta-principal.png" alt="Quiero aprender ya">
              </a>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <!-- Fin Contenido -->
    <!-- Footer -->
    <tr>
      <td>
        <table border="1">
          <tr>
            <td>
              <table border="1">
                <tr>
                  <td>
                    <a href="https://www.facebook.com/platzi" target="_blank">
                    <img src="images/ic-facebook.png" alt="Facebook de Platzi">
                    </a>
                  </td>
                  <td>
                    <a href="https://twitter.com/platzi" target="_blank">
                      <img src="images/ic-twitter.png" alt="Twitter de Platzi">
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>Enviado con amor por Platzi</td>
          </tr>
          <tr>
            <td>Te enviamos este contenido porque haces parte de la comunidad Platzi. 
                Lamentamos que te vayas, pero puedes darte de <a href="#">baja aquí.</a></td>
          </tr>
        </table>
      </td>
    </tr>
    <!-- Fin Footer -->
  </table>
</body>
</html>```

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
	<table border="1">
		<!-- Header -->
			<!-- Inicio Logo -->
		<tr>
			<td>
				<a href="http://sgtnetworks.com" target="_blank" > 
				<img src="images/logo.png" alt="Sona Green Technologies - Lider en infraestructura Cisco"></a>
			</td>
		</tr>
			<!-- Fin Logo -->

		<!-- Fin Header -->

			<!-- Contenido -->
		<tr>
			<td>
				<table border="1">
				<!-- Inicio Saludo -->
					<tr>
						<td>Hola, *Nombre*</td>
					</tr>
					  <!-- Fin Saludo -->

					  <!-- Inicio Imagen Destacado -->
					<tr>
						<td>
							<a href="https://www.cisco.com/c/m/en_us/solutions/enterprise-networks/solution-builder.html?oid=caten018587" target="a_blank">
							<img src="images/contenido.png" alt="¡Qué necesita su red?">
							</a>
					</td>

					</tr>
					<!-- Fin Imagen Destacado -->

					<!-- Inicio Texto Destacado -->
					<tr>
						<td>Responda dos preguntas y cree una solución que pueda ayudarlo a cumplirla</td>
					</tr>
					<!-- Fin Texto Destacado -->

					<!-- Inicio CTA -->
					<tr>
						<td><a href="https://www.cisco.com/c/m/en_us/solutions/enterprise-networks/solution-builder.html?oid=caten018587" target="a_blank">
							<img src="images/CTA.png" alt="Realizar test de examen de Red">
							</a>
						</td>
					</tr>
					<!-- Fin CTA -->
				</table>
			</td>
		</tr>
			<!-- Fin Contenido -->
			<!-- Footer-->
		<tr>
			<td>
				<table border="1">
					
					<!-- Inicio Redes Sociales -->
					<tr>
						<td>
							<table border="1">
							<tr>
								<td><a href="https://www.facebook.com/Sona-Green-Tech-112390463449415/?view_public_for=112390463449415" target="a_blank"><img src="images/face.png"></a></td>
								<td><a href="https://twitter.com/tw_sona" target="a_blank"><img src="images/Twitter.png"></a></td>
								<td><a href="https://www.linkedin.com/company/sona-green-tech/about/?viewAsMember=true" target="a_blank"><img src="images/Linkedin.png"></a></td>
								<td><a href="https://www.youtube.com/channel/UCR5fyMD7O4e4hLzL5CCUYHQ?disable_polymer=true" target="a_blank"><img src="images/Youtube.png"></a></td>
							</tr>
						</table>
						</td>
					</tr>
					<!-- Fin Redes Sociales -->
                       
					<!-- Inicio Info Marca -->
					<tr>
						<td><img src="images/sona.png" alt="Enviado desde Sona Green Technologies"></td>
					</tr>
					<!-- Fin Info Marca -->
					<!-- Inicio Legal -->
					<tr>
						<td>Te enviamos este contenido porque haces parte de los Clientes Premium de Sona.
</td>
					</tr>
					<tr>
						<td>Lamentamos que te vayas, pero puedes darte de baja <a href="https://sona.us20.list-manage.com/unsubscribe?u=55135afb9cefa68f72742ad69&id=c009f6d09a&e=[UNIQID]&c=981799468b"> aquí.</a></td>
					</tr>
					<!-- Fin Legal -->
				</table>
			</td>
		</tr>
		<!-- Footer-->


	</table>
	

</body>


</html>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=devise-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
</head>

<body>
    <table border="1">
        <!-- Header -->
        <tr>
            <td>
                <a href="https://www.ticlass.com" target="_blank">
                    <img src="https://ticlasss.s3.amazonaws.com/uploaded/bankfiles/images/2020/06/11/transparente.png" alt="logo TIClass - ">
                </a>
            </td>
        </tr>
        <!-- FinHeader -->
        <!-- Contenido-->
        <tr>
            <td>
                <table border="1">
                    <!-- Destacado-->
                    <tr>
                        <td>Hola *Nombre*! </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="https://www.ticlass.com/plan/53-intensivo-ptu-full-admision-2021" target="_blank"> 
                                <img width="640px"src="https://ticlasss.s3.amazonaws.com/uploaded/bankfiles/images/2020/06/05/portada1-intensivo2020.png" alt="Programa de preparación Intensiva para la Prueba de Transición para el Ingreso a la Educación Superior">
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p>Preparar la PTU en 5 meses es posible. Te diremos qué, cuándo y con qué estudiar. Accede al mejor y más completo programa PTU online. Son 21 exclusivas clases en vivo por cada asignatura (147 en total), más de 4.000 recursos de aprendizaje disponibles de inmediato, ensayos guías y una comunidad de aprendizaje 24/7 disponible para ti. Tendrás acceso inmediato al programa y clases en vivo. Las clases del programa inician el 6 de julio.</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="https://www.ticlass.com/plan/53-intensivo-ptu-full-admision-2021" style="background: #99CC33;color:#fff;padding:10px 15px;border-radius: 6px;clear:both;display:inline-block;" target="_blank">ASEGURAR MI CUPO</a>
                        </td>
                    </tr>
                    <!-- Fin destacado -->
                </table>
            </td>
        </tr>
        <!-- FinContenido -->
        <!-- Footer -->
        <tr>
            <td>
                <table border="1">
                    <tr>
                        <td>
                            <table border="1">
                                <tr>
                                    <td>
                                        <a href="https://www.instagram.com/ticlasscom">
                                            <img src="https://ticlasss.s3.amazonaws.com/uploaded/bankfiles/images/2020/06/27/ic-instagram_c679cfa5-bbe8-420d-9f54-a9de426bd0d7.png" alt="Instagram de TIClass">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.youtube.com/c/ticlass">
                                            <img src="https://ticlasss.s3.amazonaws.com/uploaded/bankfiles/images/2020/06/27/ic-youtube_06569a42-d88a-4caa-ad50-6f83fd92e9e0.png" alt="Canal de YouTube de TIClass">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.facebook.com/ticlasscom">
                                            <img src="https://ticlasss.s3.amazonaws.com/uploaded/bankfiles/images/2020/06/27/ic-facebook_a1f92eab-4580-41d1-b8ec-8956711e62d0.png" alt="Fanpage de TIClass">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.twitter.com/ticlasscom">
                                            <img src="https://ticlasss.s3.amazonaws.com/uploaded/bankfiles/images/2020/06/27/ic-twitter_8ec9c0d6-db74-4afc-ae49-b13613a3977a.png" alt="Twitter de TIClass">
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>Hecho con &hearts; desde Chile</td>
                    </tr>
                    <tr>
                        <td>Baker Street 221b </td>
                        <td>Teléfono: 555-555-555</td>
                        <td> 
                           <a href="#">No quiero recibir más estos correos</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!-- Fin Footer-->
    </table>
</body>
</html>

Introducción y planeación

Diseño y Maquetación de Emails para Marketing Digital

Ventajas del Email Marketing y Estrategias de Optimización

Tipos de Emails y Estrategias de Marketing Digital

Técnicas de Desarrollo de Emails: Código, Builders y Frameworks

Estrategias de Email Marketing: Optimización y Segmentación

Primer proyecto: cómo usar Mailchimp para tu estrategia

Creación de tu primera campaña en Mailchimp

Diseño de Email de Bienvenida en Mailship

Creación de listas de contactos en Mailchimp

Personalización de Campañas en Mailchimp: Segmentación y Diseño

Envío de Emails de Prueba y Finales en Mailchimp

Análisis de Reportes de Campañas en Mailchimp

Creación de Formularios Modales con Mailship para Suscripciones

Incorporación de Formularios de Suscripción en Landing Pages

Automatización de Correos de Bienvenida en Mailship

Segundo proyecto: Diseño de emails

Diseño de Emails Escalables y Responsivos

Buenas prácticas en diseño de emails para marketing

Diseño y Maquetación de Emails Promocionales en Photoshop

Diseño de Newsletters en Photoshop: Guía de Tres Columnas

Diseño de Emails Responsivos en Photoshop y Preparación para Código

Tercer proyecto: maquetación de email de promoción en técnica escalable

Maquetación de Emails Promocionales Escalables en Photoshop

Buenas prácticas en diseño y maquetación de emails

Creación de Plantillas de Email HTML Compatibles con Todos los Clientes