Guía básica sobre

HTML y CSS para marketers

1
Índice
Introducción 3

Qué son los lenguajes de codificación 4

Qué es el HTML 5

Qué es el CSS 6

HTML vs. CSS 7

Códigos HTML que debes conocer 9

Cómo actualizar el CSS 12

HTML y CSS: Qué evitar 14

Recursos adicionales: cursos, lecciones y libros recomendados 15

2
Introducción

¿Alguna vez has hecho clic con el botón derecho en una página web y has seleccionado
«ver código fuente» o has echado un vistazo al código fuente de un correo electrónico?
O ¿usabas MySpace y aprendiste a actualizar el código para añadir imágenes o música
de fondo a tu perfil? Pues de eso se trata el HTML. El CSS es un lenguaje de codificación
complementario que aplica una hoja de estilos a una determinada página de código HTML
para adaptar el aspecto de dicha página a tu marca.

El HTML y el CSS están entre los lenguajes

que más utilizan los desarrolladores,
diseñadores y profesionales del marketing.
¿Sabías que para mejorar el SEO basta con incluir palabras
Pueden sonar a algo muy técnico que requiere
clave en las etiquetas de encabezado HTML de las
competencias específicas, pero en realidad
publicaciones de un blog?
hay muchas formas de usar estas herramientas
Conocer algunos códigos HTML básicos y aprender a
a un nivel básico en el marketing del día a
integrar el HTML con el CSS permite mejorar las estrategias
día. Podrías incluso haber usado ya el HTML
de marketing y resolver problemas que, de otra manera,
sin siquiera saberlo al crear un enlace,
podrían costar mucho tiempo y dinero de no contar con un
actualizar el encabezado de una página
desarrollador en la empresa.
o editar una página de tu sitio web o una
publicación de un blog. Para un profesional
En esta guía, veremos las aplicaciones más comunes
del marketing, estos lenguajes de codificación
del HTML y el CSS para los profesionales del marketing.
representan un ahorro en términos de tiempo
Examinaremos los conceptos básicos de cada lenguaje,
y mejores resultados en la personalización, la
las diferencias entre ellos y proporcionaremos recursos,
optimización y el SEO.
ejercicios y herramientas adicionales.

3
Qué son los lenguajes de codificación
Los lenguajes de codificación, como el HTML y el CSS, también conocidos como «lenguajes de programación», consisten en
instrucciones escritas que le dicen al software qué hacer, cómo mostrar algo o cómo procesar un determinado algoritmo.
Otros lenguajes comunes son Java, Python y SQL. El HTML y el CSS se denominan lenguajes de programación declarativos
(en inglés), ya que declaran lo que hay en una página web y qué aspecto debe tener dicho contenido.

Los códigos como el HTML o el CSS representan la forma

en la que el desarrollador se comunica con el software e
imparte instrucciones a la página para que se desplace de
una determinada forma, muestre los colores de la marca,
ponga una imagen en el centro o responda de alguna
manera a las acciones del usuario; por ejemplo, al hacer
clic en un enlace, se abrirá otra sección de la página (en
inglés).

El HTML se creó originalmente para diferenciar los

elementos estructurales de las páginas web, como
los párrafos, el texto del cuerpo y los encabezados
en un formato de archivo con extensión .html.
Pero como no presentaba funciones de diseño,
se desarrolló el CSS como archivo independiente
(archivo con extensión .css) para que se ocupara
de la forma y la apariencia de las páginas.

De esta forma, las dos herramientas trabajan de

la mano para generar páginas web con un diseño
impecable y elementos de personalización y SEO.

4
Qué es el HTML
HTML (HyperText Markup Language, por sus siglas en inglés) hace referencia al lenguaje de marcas de hipertexto que emplea
etiquetas para alterar la estructura o la forma en la que aparecen el texto o los elementos de una página web. Las etiquetas HTML
permiten organizar el contenido, facilitan la lectura de las páginas y comunican a los motores de búsqueda cuáles son las pala-
bras clave principales mediante etiquetas de encabezado. Este es un ejemplo de un fragmento de código HTML para hipertexto:

El resultado de este código será: haz clic aquí

El código irá comprendido entre los paréntesis angulares
<a href=”https://www.hubspot.es”>haz clic aquí</a> de apertura (<) y de cierre (</a>). Sin el paréntesis de
cierre, el código no podrá dar el resultado esperado.

El HTML suele usarse sobre todo en páginas web, en correos

electrónicos o en el sistema interno de las publicaciones de
los blogs. Muchos sistemas de gestión de contenidos (CMS)
ofrecen dos opciones distintas para editar el contenido. Una
de ellas es el editor WYSIWYG (siglas de What You See Is
What You Get; en español, lo que ves es lo que obtienes),
que permite modificar el color, el tamaño y el estilo de la
letra, seleccionándolos entre las opciones disponibles en un
menú desplegable. La otra, es un editor de HTML, al que se
conoce como «editor fuente». También se puede emplear un
editor HTML (en inglés) independiente.

Más adelante veremos los códigos HTML más comunes y

aprenderemos a formatearlos.

5
Qué es el CSS Imagen: W3 Schools

CSS (siglas de Cascading Style Sheets)

significa hojas de estilos en cascada. Se trata
de una herramienta que le dice al software
cómo debe presentarse el HTML en la página
web en términos de maquetación, esquema
<p style=”background-color:tomato”>Lorem ipsum </p>
de colores y formato. En concreto, representa
una serie de reglas que se aplican al HTML en
la página para determinar aspectos como los
colores de fondo, el tipo de letra, el espacio En el ejemplo, «p» es el selector que se encarga de determinar dónde
entre las líneas y la alineación, entre otros. aplicar el estilo. «P» significa párrafo, por lo que el color «Tomato» se
aplicará al párrafo.
El CSS se puede aplicar a la página usando
bien sea una hoja de estilos interna o una Este es otro ejemplo de cómo funcionan el HTML y el CSS juntos.
externa. En el caso de la hoja de estilos
interna, en un documento HTML, se le dirá
al software qué color de fondo, qué tipo <h1 style=”color:red”>Introducción a los lenguajes HTML y CSS</h1>
de letra y qué otros elementos de diseño
aplicar, ya sea a una sección específica o a la
página entera. Las hojas de estilos externas
se pueden enlazar a la página, si bien siguen
siendo páginas de códigos de diseño
Introducción a los lenguajes HTML y CSS
independientes.
Esta etiqueta de encabezado h1 (que indica que se trata del título
Veamos el siguiente ejemplo en el que se principal de la página) incluye una etiqueta de estilo CSS que
aplica una CSS interna a un texto (en un determina que el color sea rojo.
práctico editor de prueba en el que podrás
ejercitarte un poco).

6
HTML vs. CSS Este es un ejemplo de una publicación de un blog en HTML sin CSS.

El HTML representa básicamente el

esqueleto de una página web, puesto
que le proporciona un armazón
técnico sobre el cual estructurarse. El
CSS, en cambio, se encarga del estilo;
es lo que le muestra a quien visita la
página el diseño, los colores, los tipos
de letra y todos esos aspectos que
consolidan la identidad de la marca.
El HTML sin el CSS puede funcionar,
pero no es estéticamente agradable.

El HTML ofrece una manera para

formatear y actualizar la estructura
de una página web, añadiendo Fuente: HubSpot

enlaces e imágenes, creando listas y

tablas y modificando el texto. El CSS
actualiza los elementos de diseño,
cambiando el color del fondo y de la
letra, poniendo imágenes de fondo,
modificando bordes y márgenes y
determinando las formas en las que
responderá la página a las acciones
del usuario (por ejemplo, ocultando
elementos), etc. Esta es la misma publicación, pero esta vez tras
la aplicación de las hojas de estilos en cascada.
¿Lo ves? Es mucho más eficaz.

7
 HTML vs. CSS: las diferencias principales

HTML CSS

1 Código para la estructura de la página web 1 Código para el estilo de las páginas web

2 Códigos para elementos y aspectos sobre 2 Códigos para páginas enteras o individuales
todo individuales
3 No puede existir por sí mismo
3 Puede existir sin el CSS
4 Requiere mayores conocimientos técnicos
4 Es fácil de aprender
5 Ofrece más alternativas de estilo que el HTML
5 Todos los navegadores lo pueden procesar;
6 Presenta mejor estilo y formato que el HTML
no tiene requisitos técnicos particulares
7 Numerosos recursos y elementos de ayuda gratuitos
6 Numerosos recursos y elementos de ayuda
disponibles
gratuitos disponibles
8 Su comportamiento no es uniforme en todos los navegadores
7 Funciones de seguridad insuficientes
9 Funciones de seguridad insuficientes
8 Capacidades dinámicas limitadas
10 Puede aplicarse a otros lenguajes XML

8
Códigos HTML Etiquetas HTML
comunes para los marketers
que debes conocer
Etiqueta HTML: <html> aquí se pone la página web </html>
Independientemente de dónde se escriba el código HTML Esta etiqueta indica que la página en cuestión es una página
o del editor que se utilice, existen etiquetas HTML comunes HTML. Se abre al principio del documento y se cierra al final.
que presentan siempre la misma forma.
Etiqueta de encabezado: <h1> aquí se pone el título </h1>
Esta sería la estructura básica de un documento HTML. <h2> aquí se pone el subtítulo </h2>

Las etiquetas de encabezado son muy importantes en

<!DOCTYPE html>
las publicaciones de los blogs, puesto que determinan
<html> su estructura y ayudan al lector a identificar las distintas
<body> secciones. También sirven para optimizar el posicionamiento
<h1>Este es el encabezado principal</h1> de las páginas en los motores de búsqueda (en inglés), ya
<p>Este es el primer párrafo</p> que los algoritmos que estos emplean dan gran importancia
</body> a las palabras clave presentes en los encabezados.
</html>
Las CSS sirven para dar formato a los encabezados,
determinando el estilo (tipo y tamaño de letra, uso de
Todas las etiquetas HTML empiezan con paréntesis negrita/cursiva, separación entre los elementos del texto) en
angulares de apertura, como <html>, y terminan con cada etiqueta (h1, h2, h3, etc.).
paréntesis angulares de cierre </html>. En el ejemplo
anterior, la primera etiqueta le indica al navegador que Etiqueta de enlace: <a href=”url”>Texto del enlace</a>
el documento en cuestión es un documento HTML. La Los enlaces aparecen con frecuencia en correos electrónicos,
etiqueta <body> indica el cuerpo del texto, <h1> es el publicaciones de blogs y otros archivos HTML.
encabezado 1 (es decir, el título principal de la página) y
<p> denota un párrafo.

9
Etiquetas HTML
comunes para los marketers

Etiqueta de lista: Etiqueta de párrafo: <p> aquí se pone el párrafo </p>

Esta etiqueta delimita una parte del texto dentro de un párrafo.
Lista con viñetas
Etiqueta de imagen:
<ul>
<li> primer punto de la lista</li>
<li> segundo punto de la lista</li> <img src=”image file link” width=”300” height=”200”
<li> tercer punto de lista</li> alt=”keyword description”>
</ul>
Esta etiqueta permite poner en el documento una imagen tomada
Lista numerada de un archivo, modificar su tamaño y añadir texto alternativo (texto
alt) para mejorar el SEO. Más adelante, con las CSS se podrán
<ol> añadir también distintos rellenos u otros atributos.
<ol> primer punto de la lista</ol>
<ol> segundo punto de la lista</ol> Etiquetas de formato de texto:
<ol> tercer punto de la lista</ol> Negrita <strong> aquí se pone el texto </strong>
</ol> Subrayado <u> aquí se pone el texto </u>
Cursiva <em> aquí se pone el texto </em>
Las listas ayudan a organizar la
información. Las CSS permiten Para formatear el tipo, el tamaño y el grosor de la letra, el espacio
cambiar los tipos de viñeta, los entre líneas u otros aspectos relacionados con el estilo del texto, se
números o la alineación de la lista. requieren las etiquetas de estilo CSS; de lo contrario, el estilo del
documento entero se aplicará al texto.

10
Etiquetas para compartir en redes sociales: Etiqueta de cuerpo: <body> aquí se pone la
página web </body>
LinkedIn: Esta etiqueta, como vimos ya en el ejemplo de la
http://www.linkedin.com/shareArticle?mini=true&url=URL página HTML completa de arriba, es el contenedor
de elementos como listas, párrafos, enlaces e
Facebook: imágenes en la página web.
http://www.facebook.com/sharer/sharer.php?u=URL
Etiqueta de salto de línea: </br>
Si pones la URL deseada en la sección «URL» del código, al Es un código de maquetación sumamente útil.
hacer clic en el enlace se establece automáticamente la cone- Produce un salto de línea en el texto y puede
xión con LinkedIn o Facebook y se abre una publicación en la usarse en los encabezados, párrafos o en cualquier
que aparece ya el contenido del enlace, por lo que los visitan- lugar de la página en la que el texto tenga que
tes de tu sitio web no tienen que molestarse en copiar y pegar pasar a la línea siguiente.
ellos mismos el enlace para compartir tu contenido en una
nueva publicación. De esta forma se animarán más fácilmente
a compartir tu contenido, lo que te puede ayudar a llegar a un <h1> El encabezado es muy largo y debe
público más amplio. Estas etiquetas se pueden usar en publi- </br> dividirse en dos líneas </h1>
caciones de blogs y correos electrónicos, acompañadas por
los símbolos de LinkedIn o de Facebook.
Etiqueta span: <span> elemento </span>
Etiqueta de título: <title> aquí se pone el título </title>
Esta etiqueta sirve para cuidar la maquetación
Esta etiqueta determina el título de la página que aparece en
de la página. Cualquier elemento puesto en una
la parte de arriba del navegador.
etiqueta span quedará protegido contra toda
alteración de la maquetación que se haga cerca
del mismo, bien sea este una imagen o un símbolo.

Para probar los códigos HTML y ejercitarte, usa la

herramienta «playground» de W3Schools y haz
clic en «Run» (ejecutar).

11
Cómo actualizar el CSS CSS en línea

Como decíamos, el CSS en línea tendrá la siguiente

A la hora de actualizar el CSS, para facilitar el trabajo apariencia:
del profesional del marketing, muchos desarrolladores
recomiendan usar una hoja de estilos para todo el
documento o para el sitio web entero. Por ejemplo, con <h1 style=”color:red”>Introducción a los
una hoja de estilos se puede determinar que todas las lenguajes HTML y CSS</h1>
etiquetas de encabezado 1 (h1) tengan el tipo de letra
sans serif de tamaño 32, de color azul y en negrita. Así,
al escribir el HTML, bastará con asociar la hoja de estilos Aquí, la parte que corresponde al CSS es el color,
al documento y usar una etiqueta h1, para ver aparecer definido por la etiqueta «style». Para actualizar el CSS
automáticamente el estilo establecido. en línea, podrás usar los códigos de estilo y actualizar
los elementos de diseño como el relleno, los tipos de
Otro método para actualizar el CSS es el del estilo en línea. letra, los colores de fondo y los márgenes, entre otros.
El procedimiento consiste en añadir una etiqueta de
«estilo» a la etiqueta h1 y definir en ella elementos En esta lista de códigos CSS encontrarás las distintas
como el tipo de letra, el grosor y el color. Se trata de un etiquetas de estilo en línea.
método que requiere más tiempo y supone mayor riesgo
de error e inconsistencias en el sitio web, pero que en
ocasiones puede ser útil en determinadas páginas o en
determinados elementos.

Sugerencia: El estilo en línea se impone sobre las

hojas de estilo, por lo que hay que tener cuidado al
realizar cambios, puesto que se corre el riesgo de
sustituir el estilo de la hoja maestra.

12
Hoja de estilos externa

Para actualizar el CSS con una hoja de estilos externa, Así se verá una hoja de estilo externa .css.
primero hay que crear un archivo .css independiente con
los estilos que se quieren aplicar a los distintos elementos o
grupos, y luego enlazarlo al archivo .html. body {
background-color: lightblue;
Aquí te explicamos cómo enlazar una hoja de estilos externa
}
a un archivo HTML.

h1 {
<head> color: navy;
<link rel=”stylesheet” type=”text/css”
margin-left: 20px;
href=”thisisyourcssfile.css”>
}
</head>

Este código, escrito en el encabezado del documento HTML, Al enlazar esta hoja de estilos al documento HTML, el
le dice al archivo HTML que asocie el archivo CSS a la página fondo aparecerá de color azul claro y todas las etiquetas
en cuestión. h1 de color azul oscuro con una distancia de 20 píxeles
del margen izquierdo.
Sugerencia: El encabezado del documento HTML no es igual
a las etiquetas h1, h2 y h3. Las etiquetas de encabezado Si hay varios códigos CSS, el programa considerará el
dentro del documento denotan el encabezado de las siguiente orden de prioridad:
secciones, mientras que las etiquetas <head></head>
definen el título principal de la página. Es aquí donde se 1 Estilo en línea
incluirán elementos como las etiquetas de seguimiento
de Google Analytics o de otros programas para obtener 2 Hojas de estilo externas enlazadas en el encabezado
información de la página web.
3 Estilo predeterminado del navegador

13
HTML y CSS: qué evitar
Cuando se habla de HTML y de CSS, hay algunas cosas que los desarrolladores desaconsejan categóricamente.
En vista de que las hojas de estilos CSS se pueden aplicar a varias páginas del sitio web, es importante prestar
atención para no hacer cambios radicales que supongan modificaciones en el sitio entero.

Estos son algunos consejos sobre lo que hay que evitar al editar HTML y CSS.

HTML CSS

1 Olvidar un paréntesis de cierre. Cada 1 Pese a que en ocasiones resulta útil trabajar con el
paréntesis de apertura, como por ejemplo estilo en línea y aplicar un estilo a un encabezado
el que abre el párrafo <p>, debe tener su o a un párrafo específico, suele ser más fácil
respectivo paréntesis de cierre, </p>. elaborar una hoja de estilos para la página
web entera con un estilo general para todas
2 Olvidar incluir las etiquetas de texto alternativo las etiquetas h1, h2, h3, los fondos, márgenes,
en las imágenes. Estas ayudan a potenciar el rellenos y demás elementos de diseño.
SEO y describen a los motores de búsqueda
qué hay en la imagen. 2 Al crear hojas de estilo CSS, es importante
clasificar las distintas secciones y asegurarse de
3 Usar saltos de línea para crear listas. Lo que todo esté bien documentado.
correcto es usar la etiqueta de listas que hemos
descrito antes. 3 Hay que evitar actualizar la hoja de estilos si no
se sabe con precisión cuántas páginas se verán
4 Olvidar el DOCTYPE. En ese caso, los afectadas. Lo más recomendable es averiguar con
navegadores no conseguirán reconocer el tipo los desarrolladores si dicha actualización puede
de documento ni leer correctamente el código. dar lugar a problemas de legibilidad del sitio web.
14
RECURSOS ADICIONALES

Cursos, lecciones y libros recomendados

Ahora que conoces las bases de los lenguajes HTML Stack Overflow es una comunidad online para
y CSS, te podría interesar aprender un poco más. No desarrolladores con preguntas y respuestas sumamente
es tan difícil como creías, ¿verdad? Estos son nuestros útiles. Si tienes dudas o encuentras dificultades, podrás
cursos, lecciones, tutoriales y comunidades favoritos para pedir ayuda o consejos a estos sabelotodos.
aprender a programar (todos en inglés).

Codeacademy ofrece cursos de programación para

todos los niveles. Ofrece tanto cursos gratuitos como
cursos de pago con suscripción que incluyen asistencia
adicional y consejos de sus expertos. <conclusion>

Estas herramientas ayudarán a tu equipo de

W3Schools.com tiene simuladores de codificación y
marketing a ganar independencia, aunque no hay
plataformas de ejercitación para probar el código con que olvidar que un gran poder conlleva una gran
plantillas de estructuras tanto para HTML como para CSS. responsabilidad. Muchos equipos de marketing
y desarrollo unen esfuerzos para crear una lista
freeCodeCamp es un recurso gratuito que pone a maestra con códigos HTML/CSS disponibles para los
disposición más de 5000 tutoriales de programación. profesionales del marketing y con indicaciones de
lo que se debe evitar. Intenta actualizar la estructura
HTML de un correo electrónico y diseñar un boletín
HTML Hacks for Marketers (Trucos de HTML para
informativo colosal, pon en tu próxima publicación
profesionales del marketing) es una guía de HubSpot con enlaces para compartir en redes sociales o potencia
códigos HTML y tutoriales. la biblioteca entera de tu blog para SEO añadiendo
palabras clave pertinentes en las etiquetas de
Learn to Code HTML and CSS (Aprende a codificar HTML encabezado, actualizando las imágenes con texto alt
y CSS) de Shay Howe es un libro con excelentes críticas e implementando un SEO de primera en la página. Y
en Amazon que ilustra todo lo que hay que saber para recuerda: todo lo que se abre, se tiene que se cerrar.
¡No olvides cerrar todos los paréntesis!
programar en HTML y CSS.
</conclusion>
15
16