¿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.
Cómo crear un proyecto
Abriremos nuestro editor preferido y crearemos un nuevo archivo.
Como vamos a realizar un ejercicio en HTML, guardaremos ese archivo como .html.
Y ya podremos empezar a escribir nuestro documento.
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!
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
- Head y body
- Divs y Párrafos
- Títulos
- Enlaces
- Formatos (negrita, cursiva)
- Imágenes
- Listas ordenadas y no ordenadas
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>
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>
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>
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>
Y quedaría algo así:
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í:
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>
Y te quedará algo así:
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»>
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>
Y quedaría así:
¿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.
Para ello, hemos creado un documento estilo.css en la misma carpeta que el documento HTML:
Ejemplo CSS
Si lo recuerdas, en mi documento HTML he asignado una etiqueta class a mi div que se llamaba amarillo:
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;
}
Así es como se ve:
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í:
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.
