En el artículo de hoy crearemos una plantilla HTML para luego usarla como firma de nuestros correos electrónicos de Microsoft Outlook 2013.
Para crear la plantilla HTML que sirva para nuestro propósito, sólo deberemos tener en cuenta unos cuantos detalles antes de empezar:
- No incluiremos enlaces a CSS en nuestra plantilla.
- No es nada recomendable usar capas.
- No incluiremos tampoco código Javascript.
Si no tenéis experiencia previa en programación HTML, a continuación encontrareis un pequeño código muy básico pero suficiente para crear una firma para nuestros correos electrónicos del diseño de una tabla en formato HTML.
La idea es que podáis usar este fragmento de código, para practicar y probar que hacen cada una de las distintas etiquetas HTML que lo forman.
Solo necesitaremos nociones muy básicas de lenguaje HTML para realizar éste trabajo, pero si tenéis inquietud en aprender a programar en HTML, os aconsejo visitéis el enlace siguiente:
Código HTML de ejemplo.
<body>
<table align="center" border="3" cellpadding="0" cellspacing="0" width="385" style="font-family: Arial, Helvetica, sans-serif; font-size:30pt; color:#0380fd; padding:0; border:solid 3px #0903fa">
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td align="center" valign="top" width="190" height="190" style="background-color:#9cdaf4; padding:0px">
1
</td>
<td align="left" valign="bottom" width="190" height="190" style="background-color:#9cdaf4; padding:0px">
2
</td>
</tr>
<tr>
<td align="right" valign="middle" width="190" height="190" style="background-color:#9cdaf4; padding:0px">
1
</td>
<td align="center" valign="baseline" width="190" height="190" style="background-color:#9cdaf4; padding:0px">
2
</td>
</tr>
</table>
</body>
Visión final del código de ejemplo:
| Encabezado 1 | Encabezado 2 |
|---|---|
| 1 | 2 |
| 1 | 2 |
Una tabla HTML está formada por un una única etiqueta <table> y una o más etiquetas de tipo <tr> , <td> y <th>.
Con la etiqueta <table> se definirá una nueva tabla HTML, abriremos la definición de la tabla usando la etiqueta <table> y la cerraremos con la etiqueta </table>.
Haciendo uso de la la etiqueta <tr>, vamos a definir una nueva fila de nuestra tabla HTML, con el elemento <td> se definen las celdas que en conjunto formarán la tabla y con la etiqueta <th> podremos definir el encabezado en las columnas de la tabla.
Cuando tengamos la estructura básica de nuestra tabla podemos agregar complejidad a nuestra tabla HTML, incluyendo etiquetas como las que mostraremos a continuación:
table align - Alinearemos toda la tabla en la página web.
table style - Nos permitirá definir estilos en nuestra tabla, de fuentes, grueso o color de los bordes, separación entre las celdas, colores, etc...
En la lista siguiente encontrareis algunas de las posibilidades que podemos usar conjuntamente con la etiqueta style.
En primer lugar podremos cambiar los tipos de letra que usaremos para mostrar el contenido de nuestra tabla, el tamaño de las fuentes o el color.
td width - Definiremos la anchura de una celda.
td height - Definiremos la altura de una celda.
td align - Alinearemos horizontalmente el contenido de una celda.
td valign - Alinearemos verticalmente el contenido de una celda.
td style - Podremos definir estilos de las celdas, de fuentes, grueso o color de los bordes, separación entre las celdas, colores, etc...
Podemos incrustar imágenes usando la etiqueta <img src="" />, podéis ver una construcción más elaborada a continuación. Hemos de tener en cuenta que las imágenes tienen que estar en un repositorio público para que el receptor de nuestros correos pueda leer correctamente nuestra firma.
<img src="https://www.pantallazos.es/imagenes/linkedin.png" width="81" height="82" border="0" alt="LinkedIn" />
Una vez creada nuestra plantilla de firma, procederemos a incrustarla en los mensajes de correo electrónico.
Con la etiqueta <table> se definirá una nueva tabla HTML, abriremos la definición de la tabla usando la etiqueta <table> y la cerraremos con la etiqueta </table>.
Haciendo uso de la la etiqueta <tr>, vamos a definir una nueva fila de nuestra tabla HTML, con el elemento <td> se definen las celdas que en conjunto formarán la tabla y con la etiqueta <th> podremos definir el encabezado en las columnas de la tabla.
Cuando tengamos la estructura básica de nuestra tabla podemos agregar complejidad a nuestra tabla HTML, incluyendo etiquetas como las que mostraremos a continuación:
table align - Alinearemos toda la tabla en la página web.
table style - Nos permitirá definir estilos en nuestra tabla, de fuentes, grueso o color de los bordes, separación entre las celdas, colores, etc...
En la lista siguiente encontrareis algunas de las posibilidades que podemos usar conjuntamente con la etiqueta style.
En primer lugar podremos cambiar los tipos de letra que usaremos para mostrar el contenido de nuestra tabla, el tamaño de las fuentes o el color.
- font-family: Arial, Helvetica, sans-serif
- font-size:31pt
- color:#9cdaf4
También podemos jugar con los bordes de la tabla, su grosor y color.
- border:solid 1px #fa0303
td width - Definiremos la anchura de una celda.
td height - Definiremos la altura de una celda.
td align - Alinearemos horizontalmente el contenido de una celda.
td valign - Alinearemos verticalmente el contenido de una celda.
td style - Podremos definir estilos de las celdas, de fuentes, grueso o color de los bordes, separación entre las celdas, colores, etc...
- background-color:#fdee00
- padding:0px
Podemos incrustar imágenes usando la etiqueta <img src="" />, podéis ver una construcción más elaborada a continuación. Hemos de tener en cuenta que las imágenes tienen que estar en un repositorio público para que el receptor de nuestros correos pueda leer correctamente nuestra firma.
<img src="https://www.pantallazos.es/imagenes/linkedin.png" width="81" height="82" border="0" alt="LinkedIn" />
Una vez creada nuestra plantilla de firma, procederemos a incrustarla en los mensajes de correo electrónico.
Con las versiones más antiguas de Outlook, usar un código HTML como firma para nuestros correos electrónicos era una tarea muy sencilla.
Solo teníamos acceder al menú de opciones, situado en la parte superior de la ventana de Outlook (Herramientas/Opciones), y seguidamente , en la ventana de opciones de Outlook seleccionar la sección Formato de correo.
Dentro de la ventana de opciones de Formato de correo, nos dirigiremos a la sección de Firmas y pulsamos el botón Firmas.
En la ventana de Crear firma, pulsábamos el botón Nuevo... y en la ventana emergente que nos aparecía podíamos seleccionar Utilizar este archivo como plantilla:
Seleccionábamos nuestra plantilla HTML y listo.
Solo teníamos acceder al menú de opciones, situado en la parte superior de la ventana de Outlook (Herramientas/Opciones), y seguidamente , en la ventana de opciones de Outlook seleccionar la sección Formato de correo.
Dentro de la ventana de opciones de Formato de correo, nos dirigiremos a la sección de Firmas y pulsamos el botón Firmas.
En la ventana de Crear firma, pulsábamos el botón Nuevo... y en la ventana emergente que nos aparecía podíamos seleccionar Utilizar este archivo como plantilla:
Seleccionábamos nuestra plantilla HTML y listo.