Guía de Repaso — HTML, CSS y JavaScript

Estructura básica de un documento HTML

"El esqueleto de cualquier página web"

Todo fichero .html tiene siempre la misma estructura base. Es obligatoria. El navegador la usa para saber cómo interpretar el archivo.

HTML<!-- Le decimos al navegador que es HTML5 -->
<!DOCTYPE html>

<html lang="es">          <!-- Raíz de todo el documento -->

  <head>                   <!-- Metadatos (no se VEN en pantalla) -->
    <meta charset="UTF-8">  <!-- Soporte para tildes y ñ -->
    <title>Mi página</title> <!-- Título en la pestaña del navegador -->
  </head>

  <body>                   <!-- Aquí va todo lo que SE VE -->
    <h1>Hola mundo</h1>
  </body>

</html>

🧠 <head>

Lo que va aquí no se muestra al usuario. Son instrucciones para el navegador: qué fuentes cargar, qué CSS aplicar, cuál es el título de la página, etc.

👁️ <body>

Todo lo que va aquí sí se ve: textos, imágenes, tablas, botones... Es el "lienzo" de la página.

⚠️ Importante: Las etiquetas en HTML se abren <etiqueta> y se cierran </etiqueta>. Hay excepciones como <meta>, <br> o <img> que son etiquetas vacías (no tienen cierre).

Incluir CSS y JS externos en el <head>

Se pueden cargar recursos externos (hojas de estilo, fuentes, scripts) desde el <head>:

HTML<head>
  <!-- CSS externo: hoja de estilos propia -->
  <link rel="stylesheet" href="estilos.css">

  <!-- CSS desde una CDN (p.ej. Font Awesome) -->
  <link rel="stylesheet" href="https://cdnjs.../font-awesome/all.min.css">

  <!-- JavaScript interno (dentro del HTML) -->
  <script>
    // código JS aquí
  </script>
</head>

💡 <link> es para CSS. <script> es para JavaScript. Ambos se pueden incluir tanto dentro del <head> como al final del <body>.

Etiquetas HTML esenciales

"Los ladrillos del contenido"

Encabezados y párrafos

HTML<h1>Título principal (el más grande)</h1>
<h2>Subtítulo</h2>
<h3>Subsección</h3>      <!-- Hay hasta h6 -->

<p>Esto es un párrafo de texto normal.</p>

📌 Sólo debe haber un <h1> por página. Los demás encabezados crean jerarquía visual y semántica.

Contenedores: <div> y <span>

Son las etiquetas más usadas para agrupar y organizar contenido.

div — bloque<!-- div ocupa toda la línea -->
<div id="div-tablero">
  <!-- Contenido agrupado -->
</div>

span — en línea<!-- span va dentro del texto -->
<p>Texto con
  <span class="rojo">color</span>
</p>

Etiqueta	Comportamiento	Uso típico
`<div>`	Bloque (ocupa toda la fila)	Secciones, contenedores grandes
`<span>`	En línea (dentro del texto)	Colorear palabras, iconos inline

Tablas — <table>

Las tablas se usan para datos tabulares (filas y columnas). En el tablero de ajedrez usamos una tabla para dibujar las celdas.

HTML<table>              <!-- Contenedor de la tabla -->
  <tr>               <!-- tr = table row = fila -->
    <td>Celda 1</td>   <!-- td = table data = celda -->
    <td>Celda 2</td>
  </tr>
  <tr>
    <td>Celda 3</td>
    <td>Celda 4</td>
  </tr>
</table>

<table>

└── <tr> (fila 1)

├── <td> celda A </td>

└── <td> celda B </td>

└── <tr> (fila 2)

├── <td> celda C </td>

└── <td> celda D </td>

⚠️ En el código del ajedrez, unTablero.rows[i] accede a una fila <tr> y unTablero.rows[i].cells[j] accede a una celda <td>. Esto es clave para entender cómo se colocan las piezas.

Atributos importantes: id, class, style

HTML<!-- id: identifica un elemento ÚNICO en la página -->
<table id="tablero-ajedrez"></table>

<!-- class: aplica estilos a VARIOS elementos -->
<td class="celda-blanca"></td>
<td class="celda-negra"></td>

<!-- style: estilos CSS directamente en el elemento -->
<td style="color: yellow; font-size: 40px"></td>

Atributo	Cuándo se usa	En JS se accede con...
`id`	Un único elemento especial	`document.getElementById("id")`
`class`	Grupo de elementos con mismo estilo	`document.getElementsByClassName("clase")`
`style`	Estilo rápido y puntual	`elemento.style.color = "red"`

CSS — Estilos y propiedades

"El maquillaje de la página"

CSS (Cascading Style Sheets) controla el aspecto visual de los elementos HTML: colores, tamaños, posiciones, fuentes...

Sintaxis básica de CSS

CSS/* selector { propiedad: valor; } */

h1 {
  color: navy;              /* color del texto */
  font-family: Arial, sans-serif;  /* tipo de fuente */
  font-size: xx-large;     /* tamaño de fuente */
  text-align: center;      /* centrar el texto */
}

⚠️ Importante: Cada propiedad CSS termina con punto y coma ;. El bloque de reglas va entre llaves { }.

Propiedades CSS más usadas

Propiedad	Qué controla	Ejemplo de valor
`color`	Color del texto	`red`, `navy`, `#fff`
`background-color`	Color de fondo	`black`, `lightgray`
`font-size`	Tamaño de fuente	`40px`, `medium`, `xx-large`
`font-weight`	Grosor de la fuente	`bold`, `normal`
`text-align`	Alineación del texto	`center`, `left`, `right`
`width` / `height`	Ancho / alto del elemento	`50px`, `100%`
`border`	Borde del elemento	`1px solid blue`
`margin`	Espacio FUERA del elemento	`10px auto`
`text-shadow`	Sombra del texto	`1px 1px black`

Unidades en CSS

Absolutas

px — píxeles (lo más común)
pt — puntos (tipografía)

No cambian con el tamaño de pantalla.

Relativas

% — porcentaje del contenedor
em — relativo al tamaño de fuente
rem — relativo a la raíz (<html>)

Se adaptan según el contexto.

CSS — Selectores: ID y Clase

"¿A quién le aplico el estilo?"

Selector por etiqueta, clase e ID

CSS/* 1. Selector de ETIQUETA — afecta a TODOS los h2 */
h2 {
  color: navy;
}

/* 2. Selector de CLASE — afecta a todos los que tienen class="celda-blanca" */
.celda-blanca {
  background-color: white;
  text-shadow: 1px 1px black;
}

/* 3. Selector de ID — afecta SÓLO al elemento con id="tablero-ajedrez" */
#tablero-ajedrez {
  border: 1px solid blue;
  margin: 10px auto;  /* auto centra el tablero */
}

Tipo	Símbolo en CSS	En HTML	Cuándo se aplica
Etiqueta	(sin símbolo) `h1`	`<h1>`	A TODOS los h1 de la página
Clase	`.nombre`	`class="nombre"`	A todos los elementos con esa clase
ID	`#nombre`	`id="nombre"`	A ese único elemento específico

Selectores múltiples y agrupados

Se pueden aplicar los mismos estilos a varios selectores separándolos con coma:

CSS/* Mismo estilo para celda-blanca Y celda-negra */
.celda-blanca, .celda-negra {
  font-weight: bold;
  height: 50px;
  text-align: center;
  width: 50px;
}

/* Luego cada una con su propio color de fondo */
.celda-blanca {
  background-color: white;
  text-shadow: 1px 1px black;
}
.celda-negra {
  background-color: black;
  text-shadow: 1px 1px white;
}

💡 Esto se llama cascada. Primero aplicamos propiedades comunes, y luego las específicas sobrescriben o añaden. Esto evita repetir código.

JavaScript — Variables, Arrays y Funciones

"La lógica y el movimiento de la página"

Variables: const y let

JavaScript// const: valor que NO cambia (constante)
const fichaPeon = '<i class="fa-solid fa-chess-pawn"></i>';

// let: valor que SÍ puede cambiar
let celda_blanca = true;
celda_blanca = false;  // Puedo reasignarla

// ❌ var está en desuso, evítalo en código moderno

	`const`	`let`
¿Se puede reasignar?	❌ No	✅ Sí
¿Scope de bloque?	✅ Sí	✅ Sí
Uso recomendado	Valores fijos	Contadores, flags

Arrays — Listas de valores

Un array guarda múltiples valores en orden. Se accede a cada uno por su índice (empieza en 0).

JavaScript// Array de fichas de ajedrez
const fichasPAw = [
  '',                              // índice 0 — vacío
  '<i class="fa-chess-rook"></i>',  // índice 1 — Torre
  '<i class="fa-chess-knight"></i>',// índice 2 — Caballo
  '<i class="fa-chess-bishop"></i>',// índice 3 — Alfil
  '<i class="fa-chess-queen"></i>',  // índice 4 — Reina
  '<i class="fa-chess-king"></i>'    // índice 5 — Rey
];

// Acceder a un elemento por su índice
console.log(fichasPAw[1]);  // Torre
console.log(fichasPAw[4]);  // Reina
console.log(fichasPAw.length); // 6 — cuántos elementos tiene

⚠️ Los índices empiezan en 0, no en 1. El primer elemento es [0], el segundo [1], etc. En el ajedrez, el índice 0 se deja vacío a propósito porque la columna 0 es para el número de fila.

Funciones

Una función es un bloque de código con nombre que puedes llamar cuando quieras. Puede recibir parámetros y devolver un resultado.

JavaScript// Definición de la función
function dibujarTablero(filas, columnas) {
  // 'filas' y 'columnas' son PARÁMETROS (entran como dato)
  let texto_html = "";

  // ... construye el HTML ...

  return texto_html;  // Devuelve el resultado
}

// Llamada a la función con argumentos concretos
let html = dibujarTablero(8, 8);  // 8 filas, 8 columnas

Parámetro con valor por defecto

// Si no pasas ponerFichasBlancas,
// se asume true automáticamente
function ponerFichasEnTablero(
  unTablero,
  ponerFichasBlancas = true
) {
  // ...
}

Condicional dentro de función

if (ponerFichasBlancas) {
  fila1 = tabla.rows.length - 2;
  color = "yellow";
} else {
  fila1 = 0;
  color = "red";
}

Bucles for

Permiten repetir código un número determinado de veces. Son clave para construir el tablero.

JavaScript// Bucle básico: de 1 a 8 (las filas del tablero)
for (let i = 1; i <= filas; i++) {
  texto_html += "<tr>";  // Añade una fila

  // Bucle ANIDADO: las columnas de cada fila
  for (let j = 0; j <= filas; j++) {
    if (j == 0)
      texto_html += "<td class='celda-numfila'>" + i + "</td>";
    else
      texto_html += "<td class='celda-" + (celda_blanca?"blanca":"negra") + "'></td>";

    celda_blanca = !celda_blanca;  // Alterna blanca/negra
  }

  texto_html += "</tr>";
}

🔄 El operador ! niega un booleano: !true = false, !false = true. Así se alterna el color de las celdas en cada iteración.

📐 El operador ternario condicion ? valorSiTrue : valorSiFalse es un if-else en una línea. En el código: (celda_blanca ? "blanca" : "negra") → devuelve "blanca" si es true, "negra" si es false.

Concatenación de strings con +=

JavaScriptlet texto = "";

texto += "<tr>";       // texto = "<tr>"
texto += "<td>A</td>"; // texto = "<tr><td>A</td>"
texto += "</tr>";      // texto = "<tr><td>A</td></tr>"

// Es equivalente a: texto = texto + "</tr>"

💡 Patrón común: Construir HTML dinámico acumulando texto en un string, y luego inyectarlo en el DOM de una sola vez con innerHTML.

JavaScript — Manipulación del DOM

"Cambiar la página desde el código"

El DOM (Document Object Model) es la representación en memoria de la página HTML. JavaScript puede leerlo y modificarlo en tiempo real.

Obtener elementos del HTML

JavaScript// Por ID — devuelve UN elemento (o null si no existe)
let unDiv = document.getElementById("div-tablero");

// Por nombre de etiqueta — devuelve una colección
let tablas = document.getElementsByTagName("table");

// Por clase — devuelve una colección
let celdas = document.getElementsByClassName("celda-blanca");

// Selector CSS moderno — más flexible
let tabla = document.querySelector("#tablero-ajedrez");

innerHTML — Insertar HTML dinámicamente

La propiedad innerHTML permite leer o escribir el contenido HTML de un elemento.

JavaScriptlet unDiv = document.getElementById("div-tablero");

// LEER el contenido actual
console.log(unDiv.innerHTML);

// ESCRIBIR / REEMPLAZAR el contenido con HTML generado
unDiv.innerHTML = dibujarTablero(8, 8);
// → El div ahora contiene la tabla del tablero

// También se puede poner en una celda una pieza de ajedrez
unTablero.rows[fila2].cells[j].innerHTML = fichaPeon;

⚠️ innerHTML reemplaza TODO el contenido anterior. Si solo quieres añadir sin borrar lo anterior, usa innerHTML +=.

Modificar estilos desde JS con .style

JavaScript// Acceder a la celda de la fila 'fila1', columna 'j'
let celda = unTablero.rows[fila1].cells[j];

// Asignar estilo CSS directamente
celda.style = "color: yellow";    // fichas blancas en amarillo
celda.style = "color: red";       // fichas negras en rojo

// También se puede así (propiedad por propiedad):
celda.style.color = "yellow";
celda.style.fontSize = "40px";    // font-size → camelCase en JS

🐪 Las propiedades CSS con guion (font-size, background-color) se escriben en camelCase en JavaScript: fontSize, backgroundColor.

Navegar por la tabla: rows y cells

Los elementos <table> tienen propiedades especiales para acceder a sus filas y celdas:

JavaScriptlet tabla = document.getElementById("tablero-ajedrez");

tabla.rows            // Array con todas las filas <tr>
tabla.rows.length     // Número total de filas (ej: 9 — 8 filas + 1 letras)
tabla.rows[0]         // Primera fila (fila negras)
tabla.rows[0].cells   // Array de celdas de esa fila
tabla.rows[0].cells[1] // Primera celda <td> (índice 0 = número de fila)

// Para la última fila de la tabla:
tabla.rows[tabla.rows.length - 1]  // Última fila
tabla.rows[tabla.rows.length - 2]  // Penúltima fila (fichas blancas)

💡 En el ajedrez: Las blancas están en las últimas filas, por eso se usa rows.length - 2 (fila de piezas) y rows.length - 3 (fila de peones).

JavaScript — El evento DOMContentLoaded

"Espera a que la página esté lista"

El JavaScript del <head> se ejecuta antes de que el HTML esté construido. Si intentamos acceder a un <div> que aún no existe, obtenemos null. Para evitarlo, usamos el evento DOMContentLoaded.

addEventListener — Escuchar eventos

JavaScript// Sintaxis: elemento.addEventListener(evento, función_manejadora)

// Cuando el HTML esté completamente cargado, ejecuta la función
document.addEventListener("DOMContentLoaded", listenerDeCargadelDoc);

// 'listenerDeCargadelDoc' es la función que se ejecutará
function listenerDeCargadelDoc() {
  // Ahora SÍ podemos acceder al DOM (ya está construido)
  let unDiv = document.getElementById("div-tablero");
  unDiv.innerHTML = dibujarTablero(8, 8);
}

Con función con nombre ✅

function miHandler() {
  // código
}
document.addEventListener(
  "DOMContentLoaded",
  miHandler  // sin ()
);

Con función anónima ✅

document.addEventListener(
  "DOMContentLoaded",
  function() {
    // código directamente aquí
  }
);

⚠️ Importante: Al pasar la función a addEventListener, no se ponen los paréntesis (). Escribir miHandler pasa la función como referencia. Escribir miHandler() la ejecutaría inmediatamente.

Eventos más comunes

Evento	Cuándo se dispara
`DOMContentLoaded`	Cuando el HTML está listo (antes de imágenes/CSS)
`load`	Cuando TODO (imágenes, CSS) ha cargado
`click`	Al hacer clic en un elemento
`mouseover`	Al pasar el ratón por encima
`keydown`	Al pulsar una tecla

Ejemplo completo — El tablero de ajedrez

"Todo junto, paso a paso"

Vamos a repasar cómo funciona el código del tablero entendiendo cada parte:

Se carga la página → se dispara DOMContentLoaded → se llama a listenerDeCargadelDoc()

listenerDeCargadelDoc() obtiene el div contenedor y le inyecta el HTML de la tabla generada:

JavaScriptlet un_div = document.getElementById("div-tablero");
un_div.innerHTML = dibujarTablero(8, 8);

dibujarTablero(8, 8) genera el HTML de la tabla con bucles anidados. Cada celda recibe la clase celda-blanca o celda-negra alternando. Al final devuelve una cadena de texto con todo el HTML de la tabla.

Se obtiene la tabla ya insertada en el DOM por su ID:

JavaScriptlet unaTabla = document.getElementById("tablero-ajedrez");

ponerFichasEnTablero(unaTabla) coloca las fichas blancas (amarillas). ponerFichasEnTablero(unaTabla, false) coloca las fichas negras (rojas). La función usa el array fichasPAw[] para saber qué icono poner en cada columna.

Diagrama de flujo del programa

📄 Página HTML carga

└── 🔔 Evento: DOMContentLoaded

└── 📞 Llama a: listenerDeCargadelDoc()

├── 🎨 dibujarTablero(8, 8) → genera HTML de la tabla

│ └── Bucle i (filas 1→8)

│ └── Bucle j (columnas 0→8)

│ └── Alterna celda-blanca / celda-negra

├── 🔍 getElementById("tablero-ajedrez") → obtiene la tabla

├── ♟️ ponerFichasEnTablero(tabla, true) → fichas blancas

└── ♟️ ponerFichasEnTablero(tabla, false) → fichas negras

Font Awesome — Iconos como texto

Font Awesome es una librería de iconos que funciona como una fuente tipográfica. Se incluye con <link> en el <head> y se usa con etiquetas <i>:

HTML / JavaScript<!-- En el HTML directamente -->
<i class="fa-solid fa-chess-king"></i>   <!-- Rey ♚ -->
<i class="fa-solid fa-chess-queen"></i>  <!-- Reina ♛ -->
<i class="fa-solid fa-chess-pawn"></i>   <!-- Peón ♟ -->

// En JavaScript, como un string de HTML que se inyecta con innerHTML
const fichaPeon = '<i class="fa-solid fa-chess-pawn"></i>';
celda.innerHTML = fichaPeon;

🎨 Como los iconos de Font Awesome son texto, se les puede cambiar el color y tamaño con CSS normal: color: yellow; font-size: 40px.

Resumen: ¿Cómo se construye el color de la celda dinámicamente?

JavaScript — Truco clave// La clase CSS se construye concatenando strings
texto_html += "<td class='celda-"
             + (celda_blanca ? "blanca" : "negra")
             + "'></td>";

// Si celda_blanca es true → genera: <td class='celda-blanca'></td>
// Si celda_blanca es false → genera: <td class='celda-negra'></td>

// Al final de cada celda, se alterna:
celda_blanca = !celda_blanca;

Guía de repaso HTML · CSS · JavaScript — Generada para examen

📄 HTML · CSS · JavaScript

📋 Índice

🧠 <head>

👁️ <body>

Incluir CSS y JS externos en el <head>

Encabezados y párrafos

Contenedores: <div> y <span>

Tablas — <table>

Atributos importantes: id, class, style

Sintaxis básica de CSS

Propiedades CSS más usadas

Unidades en CSS

Absolutas

Relativas

Selector por etiqueta, clase e ID

Selectores múltiples y agrupados

Variables: const y let

Arrays — Listas de valores

Funciones

Parámetro con valor por defecto

Condicional dentro de función

Bucles for

Concatenación de strings con +=

Obtener elementos del HTML

innerHTML — Insertar HTML dinámicamente

Modificar estilos desde JS con .style

Navegar por la tabla: rows y cells

addEventListener — Escuchar eventos

Con función con nombre ✅

Con función anónima ✅

Eventos más comunes

Diagrama de flujo del programa

Font Awesome — Iconos como texto

Resumen: ¿Cómo se construye el color de la celda dinámicamente?