Parte 1: HTML

HyperText Markup Language

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje estándar utilizado para crear y estructurar el contenido de las páginas web. No es un lenguaje de programación, sino un lenguaje de marcado que define la estructura del contenido mediante etiquetas (tags).

HTML sirve para:

  • Definir la estructura de una página web (encabezados, párrafos, listas, tablas, etc.)
  • Insertar imágenes, videos y otros medios en la página
  • Crear formularios para la interacción con el usuario
  • Enlazar páginas entre sí mediante hipervínculos

Un documento HTML básico tiene la siguiente estructura:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Mi Página</title>
    </head>
    <body>
        <h1>Hola Mundo</h1>
        <p>Este es mi primer párrafo.</p>
    </body>
</html>

Tabla de Etiquetas HTML

Tag Descripción Ejemplo Video
<html> Elemento raíz que envuelve todo el documento HTML. <html lang="es"> ... </html> ▶ Ver video
<head> Contiene metadatos del documento: título, estilos y scripts. <head><title>Mi sitio</title></head> No disponible
<body> Contiene todo el contenido visible de la página web. <body><p>Hola</p></body> ▶ Ver video
<title> Define el título del documento que aparece en la pestaña del navegador. <title>Mi Página Web</title> No disponible
<meta> Proporciona metadatos: charset, viewport, descripción de la página. <meta charset="UTF-8"> No disponible
<link> Vincula recursos externos, principalmente hojas de estilo CSS. <link rel="stylesheet" href="styles.css"> No disponible
<script> Incluye o referencia código JavaScript en el documento. <script src="app.js"></script> ▶ Ver video
<style> Permite escribir CSS directamente dentro del documento HTML (CSS interno). <style> body { color: red; } </style> No disponible
<h1> — <h6> Encabezados del nivel 1 (más importante) al nivel 6 (menos importante). <h1>Título principal</h1> ▶ Ver video
<p> Define un párrafo de texto. <p>Este es un párrafo.</p> ▶ Ver video
<a> Crea un hipervínculo hacia otra página, sección o recurso externo. <a href="https://ejemplo.com">Enlace</a> ▶ Ver video
<img> Inserta una imagen en la página. Es una etiqueta vacía (sin cierre). <img src="foto.jpg" alt="Descripción de la imagen"> ▶ Ver video
<ul> Lista desordenada (con viñetas). Contiene elementos <li>. <ul><li>Elemento</li></ul> No disponible
<ol> Lista ordenada (con números o letras). Contiene elementos <li>. <ol><li>Primero</li></ol> No disponible
<li> Define un elemento de lista dentro de <ul> u <ol>. <li>Mi elemento de lista</li> No disponible
<table> Crea una tabla para mostrar datos en filas y columnas. <table><tr><td>dato</td></tr></table> ▶ Ver video
<tr> Define una fila (row) dentro de una tabla. <tr><td>celda</td></tr> No disponible
<th> Celda de encabezado de tabla. Se muestra en negrita y centrada por defecto. <th>Encabezado</th> No disponible
<td> Celda de datos estándar dentro de una fila de tabla. <td>Dato de la tabla</td> No disponible
<form> Define un formulario interactivo para recopilar datos del usuario. <form action="/enviar" method="post"> ... </form> ▶ Ver video
<input> Campo de entrada. Su tipo varía: text, email, password, number, date, etc. <input type="text" placeholder="Tu nombre"> ▶ Ver video
<button> Crea un botón interactivo que puede enviar formularios o disparar JS. <button type="submit">Enviar</button> No disponible
<textarea> Área de texto multilínea para que el usuario escriba texto largo. <textarea rows="4" cols="40"></textarea> No disponible
<select> Lista desplegable (combo box) para seleccionar una opción. <select><option>Opción 1</option></select> No disponible
<label> Etiqueta descriptiva asociada a un elemento de formulario. Mejora accesibilidad. <label for="email">Correo:</label> No disponible
<div> Contenedor de bloque genérico. Usado para agrupar y aplicar estilos. <div class="contenedor"> ... </div> ▶ Ver video
<span> Contenedor en línea genérico para dar estilo a partes de un texto. <p>Texto <span class="rojo">importante</span></p> No disponible
<header> Cabecera semántica de la página o de una sección de contenido. <header><nav> ... </nav></header> No disponible
<nav> Define un bloque de navegación que contiene enlaces principales. <nav><a href="#inicio">Inicio</a></nav> No disponible
<main> Contenido principal del documento. Solo debe aparecer una vez por página. <main><article> ... </article></main> No disponible
<footer> Pie de página de la sección o del documento completo. <footer><p>&copy; 2025</p></footer> No disponible
<section> Sección temática del contenido, normalmente con un encabezado. <section><h2>Tema</h2> ... </section> No disponible
<article> Contenido independiente y reutilizable (noticias, posts, tarjetas, etc.). <article><h2>Noticia</h2><p> ... </p></article> No disponible
<aside> Contenido relacionado pero secundario: barras laterales, notas, anuncios. <aside><p>Nota al margen</p></aside> No disponible
<strong> Texto de gran importancia semántica. Se muestra en negrita. <strong>¡Atención!</strong> No disponible
<em> Texto con énfasis semántico. Se muestra en cursiva. <em>Muy importante</em> No disponible
<br> Inserta un salto de línea dentro del flujo de texto. Etiqueta vacía. Línea 1<br>Línea 2 No disponible
<hr> Inserta una línea horizontal divisoria. Indica un cambio temático. <p>Antes</p><hr><p>Después</p> No disponible
<iframe> Incrusta un documento HTML o página web dentro de la página actual. <iframe src="mapa.html" width="400" height="300"></iframe> ▶ Ver video
<video> Incrusta un video en la página. Acepta atributos controls, autoplay, loop. <video src="clip.mp4" controls></video> ▶ Ver video

Parte 2: CSS

Cascading Style Sheets

1. ¿Qué es CSS?

CSS (Cascading Style Sheets o Hojas de Estilo en Cascada) es el lenguaje que se utiliza para describir la presentación visual de un documento HTML. Controla colores, tipografías, espaciados, disposición y animaciones de los elementos en pantalla.

El término cascada indica que cuando varios estilos afectan al mismo elemento, el navegador sigue una jerarquía — especificidad, orden de aparición e importancia — para determinar cuál prevalece. Esto permite combinar estilos de distintas fuentes sin conflictos inesperados.

2. Sintaxis y Estructura de una Regla CSS

Una regla CSS se compone de un selector y un bloque de declaración. Cada declaración tiene una propiedad y un valor, separados por dos puntos y terminados con punto y coma. 

/* Estructura básica de una regla CSS */
selector {
    propiedad: valor;
    otra-propiedad: otro-valor;
}

/* Ejemplo real */
h1 {
    color: navy;
    font-size: 2rem;
    text-align: center;
}
Selector h1
{
color : navy ;
font-size : 2rem ;
}

3. Tipos de Selectores CSS

3.1 Selectores Simples

Seleccionan elementos por su tipo, clase, id o de manera universal.

Tipo Sintaxis Descripción Ejemplo
Elemento elemento Selecciona todos los elementos de ese tipo HTML. p { color: gray; }
Clase .nombre-clase Selecciona todos los elementos que tengan esa clase. .destacado { font-weight: bold; }
ID #nombre-id Selecciona el elemento único con ese identificador. #titulo { font-size: 2rem; }
Universal * Selecciona todos los elementos del documento. * { box-sizing: border-box; }

3.2 Selectores Combinadores

Combinan dos selectores según la relación de los elementos en el DOM.

Tipo Sintaxis Descripción Ejemplo
Descendiente A B Selecciona B cuando está en cualquier nivel dentro de A. div p { color: blue; }
Hijo directo A > B Selecciona B solo si es hijo directo (inmediato) de A. ul > li { list-style: none; }
Hermano adyacente A + B Selecciona B cuando está inmediatamente después de A. h2 + p { margin-top: 0; }
Hermano general A ~ B Selecciona todos los B que estén después de A y sean hermanos. h2 ~ p { color: gray; }

3.3 Selectores de Pseudoclase

Seleccionan elementos en un estado especial o en una posición específica dentro del DOM.

Pseudoclase Descripción Ejemplo
:hover Se activa cuando el cursor del mouse está sobre el elemento. a:hover { color: red; }
:nth-child(n) Selecciona el enésimo hijo de su elemento padre. tr:nth-child(2n) { background: #f0f0f0; }
:not(selector) Selecciona elementos que NO coincidan con el selector indicado. p:not(.especial) { color: gray; }
:first-child Selecciona el primer hijo de su elemento padre. li:first-child { font-weight: bold; }
:focus Se activa cuando el elemento tiene el foco (ej. un input activo). input:focus { border-color: blue; }

3.4 Selectores de Pseudoelemento

Permiten dar estilo a partes específicas de un elemento sin agregar HTML extra.

Pseudoelemento Descripción Ejemplo
::before Inserta contenido virtual antes del elemento (requiere content). h2::before { content: "→ "; color: teal; }
::after Inserta contenido virtual después del elemento. a::after { content: " ↗"; font-size: 0.8em; }
::first-line Da estilo únicamente a la primera línea de un párrafo. p::first-line { font-weight: bold; }
::first-letter Da estilo a la primera letra de un bloque de texto. p::first-letter { font-size: 2em; float: left; }
::placeholder Da estilo al texto de marcador de posición de los inputs. input::placeholder { color: #aaa; font-style: italic; }

3.5 Selectores de Atributo

Seleccionan elementos según el valor de sus atributos HTML.

Selector Descripción Ejemplo
[atributo] Selecciona elementos que tengan ese atributo (sin importar el valor). [disabled] { opacity: 0.5; }
[atributo="valor"] Selecciona elementos donde el atributo sea exactamente ese valor. [type="email"] { border: 2px solid blue; }
[atributo^="valor"] Selecciona elementos donde el atributo empiece con ese valor. [href^="https"] { color: green; }
[atributo$="valor"] Selecciona elementos donde el atributo termine con ese valor. [src$=".png"] { border: 1px dashed; }
[atributo*="valor"] Selecciona elementos donde el atributo contenga ese valor en cualquier posición. [class*="btn"] { cursor: pointer; }

4. Formas de Insertar CSS

CSS Externo (link)

Se vincula un archivo .css externo con la etiqueta <link> dentro del <head>. Es el método recomendado porque separa el HTML del CSS y permite reutilizar el mismo estilo en múltiples páginas. 

<!-- Dentro del <head> -->
<link rel="stylesheet" href="styles.css">

CSS Interno / Embebido (style)

Los estilos se escriben directamente dentro de la etiqueta <style> en el <head>. Útil para páginas únicas o pruebas rápidas. 

<head>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: navy;
        }
    </style>
</head>

CSS en Línea (inline)

Los estilos se aplican directamente en el atributo style de cada etiqueta. Tiene la mayor especificidad pero es difícil de mantener y no es reutilizable. 

<p style="color: red; font-size: 18px; margin-top: 0;">
    Texto con estilo inline aplicado directamente.
</p>

5. Propiedades CSS Más Utilizadas

Texto y Fuente

Propiedad Descripción Ejemplo de uso Video
font-family Define la tipografía del texto. font-family: Arial, sans-serif; No disponible
font-size Establece el tamaño de la fuente. font-size: 16px; No disponible
font-weight Grosor de la fuente: normal, bold o un valor de 100 a 900. font-weight: bold; No disponible
font-style Estilo de la fuente: normal, italic u oblique. font-style: italic; No disponible
line-height Altura de línea; controla el espacio entre líneas de texto. line-height: 1.6; No disponible
text-align Alineación horizontal del texto: left, right, center, justify. text-align: center; No disponible
text-decoration Decoración del texto: none, underline, line-through, overline. text-decoration: underline; No disponible
letter-spacing Espaciado entre letras (kerning). letter-spacing: 2px; No disponible
color Color del texto. Acepta nombres, hex, rgb, hsl. color: #333333; No disponible
text-transform Transforma el texto: uppercase, lowercase, capitalize. text-transform: uppercase; No disponible

Fondo y Color

Propiedad Descripción Ejemplo de uso Video
background-color Color de fondo del elemento. background-color: #f0f0f0; No disponible
background-image Imagen de fondo. Acepta url() o gradientes. background-image: url('fondo.jpg'); No disponible
background-size Tamaño de la imagen de fondo: cover, contain o valores. background-size: cover; No disponible
background-position Posición de la imagen de fondo dentro del elemento. background-position: center top; No disponible
background-repeat Define si la imagen de fondo se repite: repeat, no-repeat, repeat-x. background-repeat: no-repeat; No disponible
opacity Transparencia del elemento completo. 0 = invisible, 1 = opaco. opacity: 0.5; No disponible

Modelo de Caja (Box Model)

Propiedad Descripción Ejemplo de uso Video
margin Espacio exterior alrededor del borde del elemento. margin: 16px; ▶ Ver video
padding Espacio interior entre el contenido y el borde del elemento. padding: 8px 16px; ▶ Ver video
border Borde del elemento. Abreviación de border-width, style y color. border: 1px solid #ccc; No disponible
border-radius Redondea las esquinas del borde del elemento. border-radius: 8px; No disponible
width Ancho del elemento. Puede ser px, %, rem, etc. width: 100%; No disponible
height Alto del elemento. height: 200px; No disponible
max-width Ancho máximo que puede alcanzar el elemento. max-width: 1200px; No disponible
box-sizing Define cómo se calcula el tamaño. border-box incluye padding y border. box-sizing: border-box; No disponible

Posicionamiento y Layout

Propiedad Descripción Ejemplo de uso Video
display Tipo de caja del elemento: block, inline, flex, grid, none. display: flex; ▶ Ver video
position Método de posicionamiento: static, relative, absolute, fixed, sticky. position: relative; ▶ Ver video
top / left / right / bottom Desplazamiento del elemento cuando position no es static. top: 0; left: 0; No disponible
z-index Orden de apilamiento. Mayor número = encima de los demás. z-index: 100; No disponible
flex-direction Dirección principal de los items en un contenedor flex. flex-direction: row; No disponible
justify-content Alineación de items en el eje principal de flex/grid. justify-content: space-between; No disponible
align-items Alineación de items en el eje secundario (cruzado) de flex. align-items: center; No disponible
gap Espacio entre items en un contenedor flex o grid. gap: 16px; No disponible
grid-template-columns Define las columnas de un contenedor grid. grid-template-columns: repeat(3, 1fr); No disponible
overflow Comportamiento del contenido desbordado: visible, hidden, scroll, auto. overflow: hidden; No disponible

Sección Adicional

Unidades de Medida en CSS

Unidades de Medida

CSS permite usar distintas unidades de medida, clasificadas en absolutas (valor fijo independiente del contexto) y relativas (valor que depende de otro elemento o del viewport).

Unidades Absolutas

Unidad Nombre Descripción Ejemplo
px Píxeles Unidad más común. Fija en pantalla. No cambia con el zoom del navegador de forma natural. font-size: 16px;
pt Puntos Usada principalmente en tipografía para impresión. 1pt ≈ 1.33px. font-size: 12pt;
cm / mm Centímetros / Milímetros Unidades de medida física. Más útiles para estilos de impresión. margin: 1cm;

Unidades Relativas

Unidad Nombre Descripción Ejemplo
em Em Relativa al font-size del elemento padre. 2em = el doble del tamaño heredado. padding: 1.5em;
rem Root Em Relativa al font-size del elemento raíz (<html>). Más predecible que em. font-size: 1rem;
% Porcentaje Relativa al tamaño del elemento padre. Muy usada en diseños responsivos. width: 50%;
vw Viewport Width 1vw = 1% del ancho de la ventana del navegador. Útil para diseño fluido. width: 100vw;
vh Viewport Height 1vh = 1% del alto de la ventana del navegador. height: 100vh;

¿Cuándo usar cada una?

  • px: Para bordes, iconos, sombras — valores que no deben escalar.
  • rem: Para tipografía y espaciado general — escala bien con las preferencias del usuario.
  • %: Para anchos de columnas y layouts responsivos.
  • em: Para padding y margin internos relacionados con el texto.
  • vw / vh: Para secciones hero o elementos de pantalla completa.