Guía introductoria a HTML y CSS
En esta publicación haremos un rápido resumen de los conceptos fundamentales sobre los códigos HTML y CSS, particularmente en lo que concierne al email marketing . Aun cuando se utiliza un editor o un programa WYSIWYG, un mejor conocimiento técnico permite tener más control sobre todas las comunicaciones, evitando así los errores durante la fase creativa.
Si bien el aspecto técnico se deja generalmente a los “expertos en la materia”, contar al menos con conocimientos básicos sobre estos temas —que en ciertos casos son tan atractivos como una inecuación de tercer grado— es algo que debe formar parte del bagaje cultural de los profesionales de email marketing.
Respiremos profundo, pongámonos el cinturón de seguridad y arranquemos.
El HyperText Markup Language, como su nombre lo indica, es un lenguaje de marcado. Un marcador o etiqueta es un marcador de posición que define el tipo de formato del contenido (tabla, título, texto, etc.) o indica la presencia de un objeto (imagen, audio, video) en la página. Para definir una etiqueta se usa una sintaxis como ésta: <nombre de la etiqueta>.
La hoja de estilo en cascada es también un lenguaje de formato. Su desarrollo no solo ha permitido separar el contenido de una página de su estructura, sino que también permite escribir un código más prolijo y definir muchas más propiedades de las que serían posibles con el HTML solamente.
Tanto el HTML como la CSS son estándares establecidos por la W3C, la organización mundial que se ocupa de supervisar el desarrollo web.
La unión de los lenguajes HMTL y CSS generó una herramienta muy potente para crear páginas web y correos electrónicos. De hecho, por una lado el HTML define la estructura en la que se debe disponer el contenido y por el otro, la CSS modela su visualización en el navegador o en el cliente de correo electrónico.
Figura 2. Código HTML con CSS y su resultado en el navegador
Desde el desarrollo de integraciones hasta el apoyo estratégico, desde la creación de conceptos creativos hasta la optimización de resultados.
1) HTML
Para entrar en detalles específicos, debemos aclarar primero que el HTML es relativo solo a la interfaz del usuario y no se puede considerar un lenguaje de programación. De hecho, el HTML carece de los elementos propios de programación como la definición de variables o de funciones.
Como se trata de un estándar, el documento debe respetar una estructura claramente definida para resultar válido.
Figura 3. El modelo del documento HTML
En la Figura 3 se ilustra el esquema de la arquitectura de una página HTML.
- Definición del tipo de documento o DTD;
- La etiqueta <html>;
- La etiqueta <head>;
- La etiqueta <body>.
El DTD define el paradigma de las reglas y de las etiquetas utilizadas. Desde 1991 hasta la fecha, se han desarrollado varias versiones de HTML, cada una de ellas con su propio DTD. Se debe declarar explícitamente el ámbito en el que se trabaja. En la Figura 2 se muestra un ejemplo de código donde se resaltan los elementos estructurales.
Después del DTD se abre la etiqueta <html> que indica al navegador que todo el contenido dentro de la misma está escrito en lenguaje HTML.
A continuación se abren sucesivamente dos etiquetas muy importantes: <head> y <body> que cumplen dos funciones diferentes y no se deben mezclar.
La etiqueta <body> contiene el cuerpo del mensaje (tablas, texto, imágenes, hipervínculos, etc.) y en la etiqueta <head> se define la información de servicio que es fundamental para la visualización correcta de la página.
En particular:
- <title> es el título de la página [obligatorio].
- La definición de la hoja de estilos —o CSS— mediante la etiqueta <style>.
- Las referencias a todos los recursos externos como fuentes, CSS o javascript.
- La metainformación como palabras clave y descripción.
- Todo código javascript propio del documento.
Afortunadamente, nos podemos concentrar solamente en los dos primeros puntos para la creación de mensajes electrónicos.
La etiqueta <title> no se debe confundir con el asunto del mensaje. La etiqueta <title> indica el título del documento y de acuerdo con el estándar, es de carácter obligatorio. Conviene insertarlo y modificar el valor predeterminado (por ej. Título del documento) ya que podría causar problemas en la entrega del mensaje.
Dijimos que la etiqueta <body> contiene el cuerpo del mensaje. Ahora sigamos adelante y veamos algunos ejemplos de etiquetas para recordar el concepto de los marcadores.
Supongamos que deseamos definir un párrafo en el texto. Debemos usar la etiqueta <p> y en el código de la página debemos indicar dónde comienza el párrafo escribiendo <p>. Luego podemos insertar el texto y al final debemos indicar el cierre del párrafo con la etiqueta </p>.
La idea básica es muy simple: abrimos una etiqueta, insertamos el contenido, cerramos la etiqueta.
En el ejemplo previo tendríamos: <p>[Texto que forma el párrafo]</p>.
He aquí algunos ejemplos de etiquetas que necesitan etiqueta de cierre:
- <table>, <tr>,<td> para crear las tablas;
- <strong> para las negritas;
- <em> para definir un texto en letras cursivas;
- <a> para hipervínculos.
También hay etiquetas que fueron concebidas de manera diferente y no requieren etiquetas de cierre.
Por ejemplo, para insertar una imagen utilizamos la etiqueta <img>. Dado que ésta incluye todos los parámetros de la imagen (alto, ancho, ruta de acceso a la imagen, etc.), la etiqueta de cierre resulta innecesaria.
Otro ejemplo es la etiqueta de salto de línea, <br> que se usa para insertar una línea vacía (por ej. pasar al renglón siguiente).
Para aumentar las posibilidades de formateo del contenido de una página web, podemos definir las etiquetas de los atributos que definen sus propiedades. Por lo tanto, mediante los atributos podemos modelar no solo la estructura del contenido, sino también el formato del documento.
Por ejemplo, podemos establecer el alto y el ancho de las imágenes; podemos definir el color de fondo o la alineación del texto de las filas o de las celdas de una hilera en una tablea; o podemos definir la fuente, el tamaño y el color utilizados en un texto.
Figura 4. Un ejemplo de código con la visualización relativa en el navegador (Firefox).
2) La CSS
Existen tres métodos principales de aplicar una CSS a un documento:
- Externo
- Interno
- En línea.
En la creación de mensajes electrónicos utilizamos los dos últimos métodos: interno y en línea.
La utilización de una CSS interna significa que la hoja de estilos se define dentro de la sección <head> mediante la etiqueta <style> del documento HTML, mientras que en la definición en línea se aplica directamente el estilo en la etiqueta.
En el ejemplo de la Figura 4 podemos ver la aplicación de ambos métodos. Comencemos con la CSS interna.
De la fila 6 a la fila 28, en la etiqueta <style> se definen las reglas que manejan la visualización del <body>, de la <table> y de la clase CTA. De forma más detallada:
- Para definir las propiedades de la etiqueta <body> basta con citar el nombre de la etiqueta (en este caso, solo body). El navegador mostrará cada elemento contenido en la etiqueta con las propiedades que se han definido. Esto significa que todo el texto tendrá un tamaño de 16px y será de color #0e0e0e salvo que exista una especificación diferente,
- Podemos incluso definir una clase como la CTA en este caso, y sus propiedades se aplicarán a los elementos en los que fue definida.
En la práctica ocurre lo siguiente:
- El texto de todo el documento será de color gris oscuro (color:#0e0e0e), de 16px de tamaño y el juego de fuentes será ‘Gill Sans’, Arial, ‘sans-serif’.
- Para todos los elementos que poseen la class=“CTA” el color se cambiará a verde (color:#299210), se bloquea el posible subrayado (text-decoration:none) y además se aplicarán negritas.
Observemos como la clase CTA reemplaza las reglas (el color) que se definieron en la etiqueta body.
Para los estilos en línea, el comportamiento es similar. En la fila 37 encontramos style=“color: #E71317; font-size: 20px;” que reemplaza la regla de la etiqueta body y redefine no solo el color (que pasa de gris oscuro a rojo) sino que también redefine el tamaño del texto (de 16px a 20px).
Observamos que con un estilo en línea definimos a nivel puntual y aplicamos un formato solo para ese elemento en particular diferente al resto del documento.
Ambos ejemplos muestran otro mecanismo de las CSS: la herencia. De acuerdo con este paradigma, todas las propiedades aplicadas a un elemento madre son heredadas por los elementos hijos, es decir sus descendientes. En este caso, el elemento con la clase CTA hereda todas las propiedades de la etiqueta body y luego reemplaza solo las que se han especificado.
3) HTML y CSS como herramienta única
Ya hemos dicho que la unión de HTML y CSS ha creado una herramienta muy potente. No es solo potente para el formato de la visualización, sino también porque se separa el contenido de la página a las reglas de visualización, generando un código mucho más liviano y de lectura fácil.
Por otra parte, en lo que concierne a los mensajes electrónicos, esta combinación ha permitido realizar comunicaciones que no solo generan impacto sino que también producen respuestas. Comunicaciones que se adaptan a diversos dispositivos: computadoras de escritorio, tabletas y dispositivos móviles.
Share this article
