Introducción al HTML y CSS

¿Quieres aprender un poco de HTML y CSS porque lo piden para un montón de trabajos distintos? Te lo explicamos en esta clase.

¿Quieres aprender un poco de HTML y CSS porque lo piden para un montón de trabajos distintos? Diseño web, SEO, Community Manager, UX, SEM, WordPress… ¡No te preocupes! Porque en esta clase vas a tener las bases de una forma super sencilla y bien explicada ¡Al lío!

¿Qué es el HTML?

HTML son las siglas de HyperText Markup Language y hacen referencia al estándar que se usa para la elaboración de páginas Web en sus diferentes versiones. HTML define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página Web, como texto, imágenes, videos, entre otros. El HTML en Internet suele verse acompañado de otros lenguajes, como CSS que sirve para darle estilo o JavaScript, que sirve para darle otras funcionalidades.

El HTML se construye con etiquetas. Cada etiqueta abre con el nombre de un elemento entre los símbolos «<» y «>» y cierra con el mismo nombre entre los símbolos «<» y «/>». Por ejemplo, la etiqueta de párrafo empieza por <p> y termina por </p>. Entre ambas etiquetas se escribe en contenido del párrafo.

Editores de texto ¿Cuál seleccionar?

Puedes crear un proyecto en HTML desde 2 herramientas totalmente gratuítas: Notepad++ o Sublime Text. Personalmente prefiero esta última porque tiene colorines que ayudan muchísimo a personas que (como yo) tienen pocos conocimientos de programación.

Editores de Texto

Cómo crear un proyecto

Abriremos nuestro editor preferido y crearemos un nuevo archivo.

Editores de Texto: crear proyecto nuevo

Como vamos a realizar un ejercicio en HTML, guardaremos ese archivo como .html.

Editores de Texto: crear proyecto nuevo

Y ya podremos empezar a escribir nuestro documento.

Editores de Texto: crear proyecto nuevo

Si nos cuesta entender cómo se visualiza nuestro documento podemos abrirlo con un navegador (como Chrome o Firefox) para visualizar el código que hemos escrito ¡Recuerda que has de guardarlo antes!

Editores de Texto: crear proyecto nuevo

Etiquetas básicas de HTML

Hay muchas etiquetas de HTML. Si queréis consultarlas y practicarlas todas podéis visitar w3schools.com Aquí os dejamos una lista de las que veremos en esta clase.

DOCTYPE

Todos los documentos HTML deben comenzar con una declaración <!DOCTYPE>. Dicha declaración no es una etiqueta HTML sino que se trata de una «información» para que el navegador sepa de qué tipo de documento se trata.

Empezaremos pues a crear nuestro documento HTML utilizando la etiqueta:

<!DOCTYPE html>

Después abriremos y cerraremos la etiqueta html de esta forma:

<html>

</html>

Etiquetas básicas HTML

Head y body

El elemento <head> es un contenedor para elementos como <title> (que definirá el título de la página web), <style> (donde podremos añadir el estilo CSS que definirá los estilos del documento HTML), entre otros. Se trata de un contenedor de metadatos (datos sobre datos) y se coloca entre la etiqueta <html> y la etiqueta <body>. La etiqueta <body> define el cuerpo del documento, donde se añade el contenido de un documento HTML, como encabezados, párrafos, imágenes, enlaces, listas, etc.

Si continuamos con el ejercicio, añadiremos el código entre las etiquetas de HTML:

<head>

<meta charset=»UTF-8″>

<title>El título de mi página</title>

<link rel=»stylesheet» href=»estilo.css»>

</head>

<body>

</body>

Etiquetas básicas HTML

Divs y párrafos

El elemento <div> se utiliza como un contenedor para otros elementos HTML. Es por defecto un elemento de bloque, lo que significa que toma todo el ancho disponible y añade saltos de línea antes y después. Para asignarle un estilo podemos añadir class=. Explicaremos dicho estilo un poco más adelante, en la parte de CSS. Por otro lado, para asignar párrafos añadiremos la etiqueta <p>. Podemos hacerlo dentro o fuera del div. También se pueden meter divs dentro de divs.

<div class=»amarillo»>

<p>Este es un elemento de bloque con un párrafo</p>

</div>

Etiquetas básicas HTML

Títulos

Los encabezados HTML son títulos o subtítulos que se definen con las etiquetas <h1> a <h6>. <h1> define el encabezado más importante, mientras que <h6> define el encabezado menos importante.

Esto es especialmente importante en SEO y UX, ya que sirven para indicar la jerarquía de contenido dentro de cada página web. Si coloco algo en el H1 los motores de búsqueda y los usuarios entenderán que es muy importante. Los encabezados <h1> deben usarse para los encabezados principales, seguidos de los encabezados <h2>, luego los menos importantes <h3>, y así sucesivamente.

Siguiendo con el ejemplo podemos añadir:

<h1>Título más importante</h1>

<h2>Este subtítulo tiene que ver con el título 1</h2>

<p>Esto es un párrafo</p>

<h3>Este subtítulo tiene que ver con el título 1</h3>

<p>Esto es un párrafo</p>

Etiquetas básicas HTML

Y quedaría algo así:

Etiquetas básicas HTML

Enlaces

Si algo define Internet, son los enlaces. Los enlaces se encuentran en casi todas las páginas web y permiten a los usuarios hacer clic para pasar de una página a otra. Los enlaces HTML son también conocidos como hipervínculos. Cuando mueves el mouse sobre un enlace, la flecha del mouse se convertirá en una manita y si haces click, el enlace te llevará a otro sitio.

Un enlace se escribe de esta manera:

<a href=»https://seosve.com/»>Encuentra todo lo que necesitas en seosve.com</a>

Y queda así:

Etiquetas básicas HTML

El atributo de destino especifica dónde y cómo abrir el documento vinculado. Por ejemplo, puedes añadir alguno de estos valores (entre muchos otros):

  • _self: predeterminado. Abre el documento en la misma ventana/pestaña en la que se hizo clic.
  • _blank: abre el documento en una nueva ventana o pestaña

Al añadir target=»_blank» la URL se abrirá en una pestaña nueva

<a href=»https://seosve.com/» target=»_blank»>Encuentra todo lo que necesitas en seosve.com</a>

Formatos (negrita, cursiva)

HTML contiene varios elementos para definir texto con un significado especial como negritas o cursivas.

Por ejemplo, dentro de una etiqueta de párrafo puedes añadir:

<b>Este texto está en negrita</b>

<i>Este texto está en cursiva</i>

Etiquetas básicas HTML

Y te quedará algo así:

Introducción al HTML y CSS

Imágenes

Para añadir una imagen, deberemos cargarla en la carpeta correspondiente y añadir la etiqueta img. Hay otras etiquetas que se pueden asignar a cada imagen, como la de texto alternativo (alt) que mostrará dicho texto si el documento no puede encontrar la imagen. Se pueden añadir muchísimas otras etiquetas y formatos, que puede encontrar en w3schools.com

En el ejemplo que estamos montando quedaría algo así:

<img src=»curso-de-diseno.jpg» alt=»Curso de diseño web»>

Etiquetas básicas HTML

Listas ordenadas y no ordenadas

Las listas HTML pueden ser ordenadas y no ordenadas. Se construyen añadiendo <ol> (ordenadas) o <ul> (no ordenadas) y <li> por cada uno de los elementos de la lista.

Siguiendo con el ejemplo puedes añadir esto a tu documento:

<ul>

<li>Elemento 1 de lista no ordenada</li>

<li>Elemento 2 de lista no ordenada</li>

<li>Elemento 3 de lista no ordenada</li>

</ul>

<ol>

<li>Elemento 1 de lista ordenada</li>

<li>Elemento 2 de lista ordenada</li>

<li>Elemento 3 de lista ordenada</li>

</ol>

Etiquetas básicas HTML

Y quedaría así:

Etiquetas básicas HTML

¿Qué es el CSS?

CSS viene de las siglas en inglés Cascading Style Sheets, lo que podríamos traducir como “hojas de estilo en cascada”. CSS es el lenguaje que da estilo al HTML, con el que puedes definir y ajustar mejor el diseño.

¿Cómo se aplica el CSS?

Si te has fijado en la explicación anterior, hemos definido lo siguiente en el documento HTML: <link rel=»stylesheet» href=»estilo.css»> Es decir, le hemos dicho al documento HTML que utilice el documento estilo.css para aplicar los estilos.

Qué es el CSS

Para ello, hemos creado un documento estilo.css en la misma carpeta que el documento HTML:

Qué es el CSS

Ejemplo CSS

Si lo recuerdas, en mi documento HTML he asignado una etiqueta class a mi div que se llamaba amarillo:

Ejemplo de CSS

Puedo aprovechar dicha etiqueta para asignarle estilos desde mi documento estilos.css. Por ejemplo, con el siguiente código aplico un fondo a mi div de color amarillo:

.amarillo {

background-color: #ffff00;

}

Ejemplo de CSS

Así es como se ve:

Ejemplo de CSS

Vamos a ponerle margin y padding para ponerle márgenes. Si los añadimos al CSS de esta manera:

.amarillo {

background-color: #ffff00;

margin: 50px;

padding: 50px;

}

El div nos quedaría así:

Ejemplo de CSS

Aquí es donde todo se complica ya que hay infinidad de estilos que aplicar: colores, fondos, bordes, márgenes, paddings, fuentes, textos, inicios, tablas, anchos, altos y un larguísimo etcétera. Si necesitas más información y ejemplos prácticos puedes visitar este tutorial de CSS.

HTML y CSS en WordPress [Exclusivo academia]

HTML y CSS en SEO on page [Exclusivo academia]

Trabaja en el sector del Marketing Digital desde 2007 y cuenta con estudios reglados de marketing digital, educación, diseño gráfico-web y branding. Actualmente se dedica a gestionar proyectos, dar clases y estudiar un Doctorado en Tecnologías de la Información.

Espacio para dudas y comentarios

Nuestra Newsletter mola