Curso HTML MODULO 4

📖 Curso de HTML para Principiantes

Módulo 4: Listas y Tablas

🎯 Objetivo

Aprender a organizar información en listas y tablas, dos estructuras muy útiles para mostrar datos de forma clara.

1. Listas ordenadas (<ol>)

Las listas ordenadas muestran elementos numerados automáticamente.

html

<h2>Pasos para hacer café</h2>
<ol>
  <li>Calentar agua</li>
  <li>Colocar café en el filtro</li>
  <li>Verter agua caliente</li>
  <li>Servir en la taza</li>
</ol>

💡 Tip: El navegador asigna números por defecto, pero puedes personalizar el estilo con CSS.

2. Listas desordenadas (<ul>)

Las listas desordenadas muestran elementos con viñetas.

html

<h2>Mis aficiones</h2>
<ul>
  <li>Leer</li>
  <li>Escuchar música</li>
  <li>Programar</li>
</ul>

3. Listas anidadas

Puedes incluir listas dentro de otras para organizar jerarquías.

html

<h2>Plan de viaje</h2>
<ul>
  <li>España
    <ul>
      <li>Madrid</li>
      <li>Barcelona</li>
    </ul>
  </li>
  <li>Francia
    <ul>
      <li>París</li>
      <li>Lyon</li>
    </ul>
  </li>
</ul>

4. Tablas (<table>)

Las tablas organizan datos en filas y columnas.

html

<h2>Horario de clases</h2>
<table border="1">
  <tr>
    <th>Día</th>
    <th>Asignatura</th>
    <th>Hora</th>
  </tr>
  <tr>
    <td>Lunes</td>
    <td>Matemáticas</td>
    <td>10:00</td>
  </tr>
  <tr>
    <td>Martes</td>
    <td>Historia</td>
    <td>12:00</td>
  </tr>
</table>

🔎 Explicación:

• <table> → crea la tabla.
• <tr> → fila.
• <td> → celda de datos.
• <th> → celda de encabezado (se muestra en negrita por defecto).
• border="1" → añade un borde simple (aunque lo ideal es usar CSS para estilos).

5. Ejercicio práctico

👉 Crea un archivo listas_tablas.html con:

• Una lista ordenada con tus 3 metas de aprendizaje.
• Una lista desordenada con tus comidas favoritas.
• Una tabla con al menos 3 filas que muestre tus horarios de estudio (día, materia, hora).
• Un comentario que diga: <!-- Aquí practico listas y tablas -->.

6. Conceptos clave del módulo

• <ol> y <ul> organizan elementos en listas numeradas o con viñetas.
• <li> define cada elemento de la lista.
• <table> organiza datos en filas (<tr>) y columnas (<td> / <th>).
• Las tablas son útiles para datos estructurados, pero no deben usarse para maquetar páginas modernas.

📌 Mini-reto: Crea una tabla con dos columnas: “Película” y “Año de estreno”, e introduce al menos 3 películas que te gusten.

HTML	MÓDULOS
Curso HTML	MÓDULO 5. Formularios
PÁGINA ANTERIOR	PÁGINA SIGUIENTE