TECNO 9°

TERCER PERIODO

Lección: Tablas en HTML

Una tabla sirve para organizar información en filas y columnas. Por ejemplo, una lista de estudiantes con sus notas o un horario escolar.

Estructura básica:

<table>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>Juan</td>
    <td>14</td>
  </tr>
  <tr>
    <td>Laura</td>
    <td>13</td>
  </tr>
</table>

Explicación de etiquetas:

• <table>: Inicia la tabla
• <tr>: Crea una fila
• <th>: Encabezado de columna
• <td>: Dato dentro de la tabla

Tabla con estilo:

Asignatura	Nota
Matemáticas	4.5

Actividades

Actividad 1

Crea una tabla con tus datos:

• Nombre
• Curso
• Edad

Actividad 2

Crea el siguiente horario usando HTML:

Día	Materia 1	Materia 2
Lunes	Español	Inglés
Martes	Matemáticas	Sociales
Miércoles	Biología	Tecnología

Examen

Parte 1: Preguntas tipo test

1. ¿Qué etiqueta se usa para crear una fila en una tabla?
   • A. <td>
   • B. <table>
   • C. <tr>
   • D. <th>
2. ¿Cuál representa un título de columna?
   • A. <td>
   • B. <th>
   • C. <tr>
   • D. <table>
3. ¿Qué atributo permite mostrar bordes?
   • A. style="1"
   • B. border="1"
   • C. table-border
   • D. borde="si"

Parte 2: Reto práctico

Crea una tabla con los siguientes datos:

• Producto
• Precio
• Cantidad

Agrega estilo con bordes y color de fondo al encabezado.

PERIODO 2

LECCION DEL 23-04-2025

Lección: El atributo style en HTML

¿Qué es el atributo style?
El atributo style se usa en HTML para aplicar estilos directamente a una etiqueta. Es como decirle a la etiqueta cómo debe verse.

📌 ¿Cómo se escribe?

Se escribe dentro de la etiqueta HTML, así:

<etiqueta style="propiedad: valor;">Contenido</etiqueta>

Ejemplo:

<p style="color: red;">Hola mundo</p>

Este ejemplo mostrará un texto rojo que dice "Hola mundo".

🎨 Propiedades comunes que puedes usar

• color: cambia el color del texto
• background-color: cambia el color del fondo
• font-size: cambia el tamaño de la letra
• text-align: alinea el texto (izquierda, centro, derecha)
• border: agrega bordes

🧪 Ejemplos prácticos

Texto azul y centrado:

<p style="color: blue; text-align: center;">Texto centrado en azul</p>

Div con fondo amarillo y texto negro:

<div style="background-color: yellow; color: black;">Caja resaltada</div>

Texto con tamaño de fuente grande:

<h1 style="font-size: 36px;">Título grande</h1>

❗Importante

Cuando uses más de una propiedad en style, debes separarlas con punto y coma (;), por ejemplo:

<p style="color: green; font-size: 20px;">Texto verde y grande</p>

✅ Actividad sugerida

Escribe un código HTML que contenga tres párrafos, cada uno con un estilo diferente: uno rojo, otro con fondo gris claro y el tercero alineado a la derecha.

---

¡Recuerda que el atributo style te permite dar color y forma a tus páginas HTML fácilmente!