HTML y CSS

Teoría

Estructura básica

HTML usa marcas (tags) que definen el significado semántico del contenido. Cada marca abre <tag> y cierra </tag>. Las marcas vacías se escriben como <br/> o <img/>.

La estructura de un documento HTML es arborescente: cada elemento es un nodo, y los nodos se contienen unos dentro de otros formando el DOM (Document Object Model).

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>Título de la Página</title>
</head>
<body>
  <h1>Encabezado nivel 1</h1>
  <p>Un párrafo de texto.</p>
</body>
</html>

Resultado en el navegador

Árbol DOM:

Directoriohtml
- Directoriohead
  - meta charset="UTF-8"
  - title “Título de la Página”
- Directoriobody
  - h1 “Encabezado nivel 1”
  - p “Un párrafo de texto.”

Haz clic en un nodo:

<html>

<head>

<title>Título de la Página</title>

</head>

<body>

<h1>Encabezado nivel 1</h1>

<p>Un párrafo de texto.</p>

</body>

</html>

Selecciona un nodo

Explorador del DOM

Haz clic en cualquier etiqueta de la izquierda para analizar sus propiedades y visibilidad en el navegador.

Valores y atributos

Un elemento HTML tiene un valor (el contenido entre las marcas) y puede tener atributos que configuran su comportamiento. El valor de los atributos siempre va entre comillas.

<a href="https://www.w3schools.com">Enlace a w3schools</a>

Elementos HTML

Tabla

<table> define una tabla. <tr> es una fila (table row). <th> es celda de encabezado y <td> celda de datos.

Haz clic en una etiqueta:

<table>

<tr>

<th>Nombre</th>

<th>Apellido</th>

<th>Usuario</th>

</tr>

<tr>

<td>María</td>

<td>maria.diaz</td>

</tr>

<tr>

<td>Castro</td>

<td>juan.castro</td>

</tr>

</table>

Selecciona una etiqueta

Anatomía de una tabla

Haz clic en cualquier etiqueta de la izquierda para ver qué hace y dónde aparece en la tabla que dibuja el navegador.

Resultado en el navegador, sin CSS:

Nombre	Apellido	Usuario
María	Díaz	maria.diaz
Juan	Castro	juan.castro

Imagen

<img> incrusta una imagen. src es la URL o ruta local, alt es el texto alternativo para accesibilidad, y width / height definen el tamaño en píxeles.

<img
src="https://picsum.photos/400/250"
alt="Paisaje de ejemplo"
width="400"
height="250"
/>

Resultado

Enlace

<a> crea un enlace. El atributo href define el destino. Con target="_blank" el enlace se abre en una nueva pestaña.

<!-- Enlace en la misma pestaña -->
<a href="https://developer.mozilla.org">MDN Web Docs</a>

<!-- Abre en nueva pestaña -->
<a href="https://www.w3schools.com" target="_blank">W3Schools ↗</a>

Resultado

Formulario

<form> agrupa campos de entrada. Cada <input> tiene type (text, email, submit…), name y opcionalmente value como valor por defecto. <br/> inserta un salto de línea.

<form>
Ciudad:
<br/><br/>
<input type="text" name="ciudad" value="Bogotá">
<br/><br/>
Zipcode:
<br/><br/>
<input type="text" name="zipcode" value="1101001">
<br/><br/>
<input type="submit" value="Enviar">
</form>

Resultado

Práctica Interactiva: Editor HTML

Modifica el código y observa el renderizado en tiempo real. Algunas cosas concretas para probar:

Cambia value="Bogotá" por otra ciudad, y mira cómo cambia el texto del campo.
Cambia type="text" por type="date" o type="color": el navegador dibuja un control completamente distinto, sin que tú programes nada.
Prueba ahora type="email" y type="number". Se ven iguales a text, pero no son lo mismo: cambian la validación al enviar y el teclado que aparece en un celular. No todo lo que hace un atributo es visible.
Reemplaza value="Bogotá" por placeholder="Escribe tu ciudad" y compara. ¿En qué se diferencia un valor por defecto de un texto de ayuda?
Agrega disabled a un campo, sin valor: es un atributo booleano y el campo se ve deshabilitado de inmediato.
Agrega un campo nuevo, por ejemplo <input type="checkbox" checked>.

Editor HTML en Vivo

Vista Previa

Estilos CSS

Definir los estilos

CSS funciona con reglas. Cada regla tiene un selector (a qué elemento aplica) y un bloque de declaraciones con pares propiedad: valor separados por ;.

selector {
  propiedad: valor;
  otra-propiedad: otro-valor;
}

Antes y después: el mismo HTML, sin CSS y con CSS.

Sin CSS

body { background-color: lightyellow; }
h1   { color: navy; text-align: center; }
p    { font-family: Georgia, serif; color: #444; }
table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #bbb; padding: 6px 10px; }

Con CSS

Aplicar los estilos, Selectores

El selector determina a qué elementos HTML aplica cada regla CSS. Los tres tipos fundamentales son:

Selector de elemento, aplica a todos los elementos con esa etiqueta.

table { border-collapse: collapse; width: 100%; background: #f0f8ff; }
th, td { border: 2px solid steelblue; padding: 8px 12px; }
th { background: steelblue; color: white; }

Resultado

Selector por ID (#), se escribe con # en el CSS y se aplica con id="nombre" en el HTML. Identifica un elemento único en la página.

<!-- Solo este th tiene el id -->
<th id="titulotabla">Nombre</th>

#titulotabla {
color: darkred;
font-weight: bold;
font-family: Times, serif;
font-size: 14px;
font-style: italic;
}

Resultado

Selector por clase (.), se escribe con . en el CSS y se aplica con class="nombre". Se puede reutilizar en múltiples elementos y combinar varias clases en uno solo.

<p class="centrado colorazul">Centrado y azul.</p>
<p class="resaltado">Solo resaltado.</p>
<p>Sin clases.</p>

.centrado { text-align: center; }
.colorazul { color: steelblue; font-weight: bold; }
p.resaltado { background: lightyellow; padding: 8px 12px; border-radius: 4px; }

Resultado

Laboratorio de Especificidad CSS

Experimenta cómo interactúan y se superponen las reglas según el tipo de selector:

1. Selector de Etiqueta:

2. Activar `#titulotabla` (Rojo + Cursiva)

3. Aplicar `.resaltado` (2da fila amarilla)

Nombre	Apellido	Usuario
María	Díaz	maria.diaz
Juan	Castro	juan.castro

/* Selecciona una opción arriba para ver la regla CSS correspondiente */

Autoevaluación

1. ¿Cuál es la primera línea obligatoria de todo documento HTML?

2. ¿Qué sección del HTML contiene el contenido visible de la página?

3. ¿Cómo se escribe la etiqueta de cierre para <h1>?

4. ¿Qué etiqueta define una fila en una tabla HTML?

5. ¿Qué atributo de <a> define la URL de destino del enlace?

srcurllinkhref

6. ¿Qué atributo hace que un enlace se abre en una nueva pestaña?

open="new"target="_blank"window="tab"new="true"

7. ¿Cuál es la sintaxis correcta de una regla CSS?

selector: { propiedad = valor }selector { propiedad: valor; }selector( propiedad: valor; )@selector { propiedad: valor }

8. ¿Cómo se define un selector de clase en CSS?

#miClase { ... }*miClase { ... }.miClase { ... }@miClase { ... }

9. Para que todos los <p> sean de color rojo, ¿cuál regla es correcta?

.p { color: red; }#p { color: red; }*p { color: red; }p { color: red; }

10. ¿Cuál es la mejor práctica para definir estilos CSS en un proyecto?

En cada etiqueta con style="..."En un <style> al final del <body>En un archivo .css separado enlazado con <link>No se puede separar del HTML