Unidad 2: HTML Básico – Estructura de una Página Web

Introducción al Desarrollo Web con HTML y CSS

En esta sesión, aprenderás a organizar contenido en tu página web utilizando listas y tablas. Las listas te permiten mostrar elementos de forma ordenada o desordenada, mientras que las tablas son ideales para organizar datos en filas y columnas. Al final de esta sesión, crearás una página llamada “Mis Hobbies” usando listas y tablas para mostrar tus intereses.

1. Crear Listas Ordenadas y Desordenadas

¿Qué es una lista en HTML?
Las listas son una manera fácil de agrupar elementos similares en la web. Hay dos tipos principales de listas en HTML:

• Listas ordenadas (<ol>): los elementos se muestran en orden numérico.
• Listas desordenadas (<ul>): los elementos se muestran con viñetas o puntos.

Cómo crear una lista ordenada en HTML:

Las listas ordenadas se crean con la etiqueta <ol> y cada elemento de la lista se coloca dentro de <li>:

<ol>
    <li>Leer libros</li>
    <li>Escuchar música</li>
    <li>Jugar videojuegos</li>
</ol>

Esto mostrará una lista numerada con cada actividad como un elemento de la lista.

Cómo crear una lista desordenada en HTML:

Las listas desordenadas funcionan igual que las listas ordenadas, pero se crean con la etiqueta <ul>:

<ul>
    <li>Leer libros</li>
    <li>Escuchar música</li>
    <li>Jugar videojuegos</li>
</ul>

En este caso, cada elemento de la lista se mostrará con un punto (o viñeta) en lugar de un número.

2. Introducción a Tablas para Organizar Datos

¿Qué es una tabla en HTML?
Las tablas te permiten organizar información en filas y columnas, como una hoja de cálculo. En HTML, se crean con la etiqueta <table>. Dentro de la tabla, usamos:

• <tr> para definir una fila (row).
• <th> para definir un encabezado de columna (header).
• <td> para definir celdas que contienen datos.

Ejemplo básico de una tabla:

Aquí tienes una tabla simple que muestra una lista de hobbies con sus niveles de interés:

<table>
    <tr>
        <th>Hobby</th>
        <th>Nivel de Interés</th>
    </tr>
    <tr>
        <td>Leer libros</td>
        <td>Alto</td>
    </tr>
    <tr>
        <td>Escuchar música</td>
        <td>Medio</td>
    </tr>
    <tr>
        <td>Jugar videojuegos</td>
        <td>Alto</td>
    </tr>
</table>

En este ejemplo:

• La primera fila usa <th> para los encabezados, “Hobby” y “Nivel de Interés.”
• Las siguientes filas usan <td> para cada dato específico, como “Leer libros” y su nivel de interés “Alto.”

3. Proyecto: Página de “Mis Hobbies” Utilizando Listas y Tablas

Ahora vamos a poner en práctica lo que hemos aprendido creando una página que muestre tus hobbies favoritos. Esta página tendrá una lista desordenada para mostrar algunos hobbies y una tabla para organizar detalles sobre ellos.

Abre Visual Studio Code y crea un nuevo archivo HTML llamado mis-hobbies.html.

Escribe el siguiente código para comenzar:

Mis Hobbies

<h2>Hobbies Favoritos</h2>
<p>Aquí tienes algunos de mis hobbies favoritos:</p>
<ul>
    <li>Leer libros</li>
    <li>Escuchar música</li>
    <li>Jugar videojuegos</li>
    <li>Hacer deporte</li>
</ul>

<h2>Detalles de mis Hobbies</h2>
<p>Esta tabla muestra mis hobbies y el nivel de interés que tengo en cada uno:</p>
<table border="1">
    <tr>
        <th>Hobby</th>
        <th>Nivel de Interés</th>
    </tr>
    <tr>
        <td>Leer libros</td>
        <td>Alto</td>
    </tr>
    <tr>
        <td>Escuchar música</td>
        <td>Medio</td>
    </tr>
    <tr>
        <td>Jugar videojuegos</td>
        <td>Alto</td>
    </tr>
    <tr>
        <td>Hacer deporte</td>
        <td>Medio</td>
    </tr>
</table>

<p><a href="index.html">Volver a la página principal</a></p>

Ajusta la lista y la tabla para que incluyan tus hobbies y niveles de interés.

Guarda y abre mis-hobbies.html en tu navegador para ver el resultado.

¡Buen trabajo!
Has aprendido a organizar contenido en tu página web utilizando listas y tablas. Ahora tu página de “Mis Hobbies” muestra tus intereses de manera organizada y profesional. En la próxima sesión, exploraremos los estilos de CSS para que puedas diseñar tus páginas con colores y estilos únicos. ¡Sigue así!