Clase HTML/CSS: desglose de la lección 1

Lección 1: Revisión de HTML básico e introducción a elementos HTML avanzados

Objetivo:

• Actualizar etiquetas HTML fundamentales.
• Introduzca elementos HTML de nivel intermedio para crear páginas web más funcionales.

1. Introducción a la estructura HTML

Comience con una breve explicación de cómo HTML organiza el contenido de la página web mediante etiquetas. Haga hincapié en que HTML (lenguaje de marcado de hipertexto) se utiliza para estructurar páginas web, mientras que CSS se utiliza para diseñar.

Conceptos clave para revisar:

• , , : Explique que todo documento HTML tiene una estructura definida:
  • : Elemento raíz que engloba toda la página web.
  • : Contiene metainformación como el título, enlaces a CSS, scripts, etc.
  • : contiene todo el contenido visible, como texto, imágenes y elementos con los que interactúan los usuarios.

2. Resumen de etiquetas HTML básicas

• Encabezados (

  a

  ):

  Explique que los encabezados estructuran el contenido jerárquicamente, desde el más grande (

  ) hasta el más pequeño (

  ).

Ejemplo:

    
Main Heading
    
Sub Heading

• Párrafos (

  ):

  Se utilizan para definir bloques de texto o párrafos.

Ejemplo:

    
This is a paragraph.

• Anclajes (Click here
  • Imágenes (): Se utiliza para mostrar imágenes. Explique el atributo src para vincular al archivo de imagen y alt para accesibilidad.

  Ejemplo:
  

  3. Introducción a los elementos HTML intermedios

  3.1. Formularios (, , )

  • Los formularios se utilizan para recopilar entradas del usuario.

  • Estructura básica del formulario:

    • : Un contenedor para elementos de formulario. Puede incluir atributos como acción (donde se envían los datos del formulario) y método (GET/POST).
    • : Define una etiqueta para los elementos de entrada y mejora la accesibilidad.
    • : Define varios tipos de campos de entrada como texto, contraseña, casilla de verificación, radio, etc.

  Ejemplo de un formulario simple con entrada de texto:
  

  Name: Email:

  3.2. Listas (

  ,
  ,
  1. )
  • Listas desordenadas (
    )
    y Listas ordenadas (
    )
    ayudan a organizar datos en viñetas o listas numeradas.
  • Elementos de lista (
  • )
  definen cada elemento de la lista.

  Ejemplo de lista ordenada y desordenada:
  

  • Item 1
  • Item 2
  1. Step 1
  2. Step 2

  3.3. Tablas (, , , )

  • Las tablas permiten que los datos estructurados se muestren en filas y columnas.

    • : El contenedor de la tabla.
      : Define una fila en la tabla.

      : Define una celda en la tabla.

      : Define una celda de encabezado en la tabla (opcional). Ejemplo de una tabla simple: Name Age John 25 4. Actividades de clase 4.1. Resumen de actividad: Pide a los estudiantes que creen una página web básica que incluya: Un título ( ) Un párrafo ( ) Una imagen () Ejemplo: Welcome to My Website This is my first webpage. 4.2. Ejercicio guiado: Crear un formulario simple: guíe a los estudiantes en la creación de un formulario simple para recopilar información del usuario (nombre y correo electrónico). Incluye , y . 4.3. Listas y tablas: Pide a los estudiantes que creen una lista desordenada ( ) de sus cosas favoritas y una tabla simple con algunas filas de datos (nombre, edad, color favorito). Ejemplo: Reading Coding Traveling Name Age Alice 30 5. Tarea Los estudiantes deben ampliar su página web: Agregar elementos de formulario como casillas de verificación, botones de opción y un botón de envío. Personalizar el formulario para recopilar información adicional del usuario (por ejemplo, género, pasatiempos). Ejemplo: Gender: Male Female 6. Consejos adicionales Anima a los estudiantes a validar su HTML utilizando herramientas como el Servicio de validación de marcado del W3C. Explique la importancia del HTML semántico y por qué utilizar las etiquetas correctas es importante para la accesibilidad y el SEO. Resumen Los estudiantes revisarán etiquetas HTML básicas como encabezados, párrafos, imágenes y enlaces. Se les presentarán elementos HTML de nivel intermedio: formularios, listas y tablas. Los ejercicios prácticos y las tareas les brindarán experiencia práctica en la creación de una página web más estructurada.