Construcción de Sitios Web - Clase No.06

Contenidos Principales:
Desafío de Creación Web:

Actividad práctica: crear una página web en menos de 10 minutos que incluya imagen, sonido y video.
Extensión del reto: añadir hipervínculos si se completa rápidamente.
Reflexión sobre el uso de IA:

Debate sobre la licitud y conveniencia de usar IA para resolver tareas.
Comparación entre resolver con IA, sin saber, y sin ayuda tecnológica.
Comparación entre IA y Buscadores:

Casos donde el buscador es más eficiente: clima, resultados deportivos, negocios locales, conversiones, vuelos, cotizaciones, compras, definiciones, etc.
La IA como herramienta para síntesis y creación; el buscador como herramienta para precisión y rapidez.
HTML Multimedia:

Inserción de imágenes con atributos como src, alt, width, height, title, loading.
Reproductor de audio con y .
Reproductor de video con y atributos como controls, autoplay, loop, muted.
HTML y Colores:

Uso de colores en HTML con referencias a listas y convertidores de códigos (HEX, RGB, etc.).
Ejercicio de tabla con degradado de colores usando estilos en línea.
HTML y Tablas:

Construcción de tablas básicas con , , .
Tablas en HTML5 con , , , y estilos CSS.
Explicación detallada de cada elemento estructural de una tabla HTML.
Síntesis Final:

Metáfora visual: el buscador como bisturí para precisión; la IA como navaja suiza para creatividad y análisis.

1. Todas las imágenes pertenecen a sus respectivos autores y han sido usadas solamente con fines educativos, sin ánimo de lucro. https://creativecommons.org/licenses/by-nc-sa/4.0/

2. Tecnología con Propósito Educación General Básica Bachillerato General Unificado 2025 - 2026

3. Oremos Por nosotros, por los nuestros,  por los más necesitados; Oremos, agradeciendo y pidiendo. De manera especial por aquellos, que no tienen quien rece por ellos.

4. Jaculatoria Oración Asistencia Saludo Inspección Visual Buscar el Bien Principio de orden Normativa

5. Tema Objetivo Propósito Ser + por + Destreza Competencia Acción Reparadora

6. HTML Imagen – Sonido - Animación Colores y Tablas

7. En máximo de 10 minutos Crear una página Web que contenga : Imagen Corto de Sonido Corto de Vídeo Si lo resuelve en 5 minutos o menos: Investigue sobre cómo crear hiperenlaces Aumente a lo pedido al menos un enlace a otra página web

8. ¿Era licito usar una IA? ¿había otra forma válida?

9. ¿ Usaste la IA para resolver o que te ayude a resolver ? ¿Es la IA siempre eficiente, conveniente, etc.?

10. ¿Cómo se podía resolver, sin saber y sin IA? Veamos unos casos…

11. ¿Tiene sentido? Bus por comodidad para una familia O está sobre dimensionado Un automóvil para ir al trabajo Viviendo frente a él

12. ¿Es la IA siempre conveniente?

13. Es mejor el buscador que la IA 🛠️ Encontrar tutoriales en video para una tarea manual 💻 Solucionar un problema técnico o un código de error 🧮 Realizar conversiones y cálculos simples 🛒 Comparar precios de producto específico ⚽ Obtener resultados deportivos en vivo 🎵 Encontrar la letra de una canción 🎬 Consultar los horarios del cine 🧑‍🍳 Encontrar una receta de cocina 🗣️ Verificar la pronunciación de una palabra ⛈️ Consultar el clima en tiempo real

14. HTML Imagen – Sonido - Animación

15. < h1 >Disfrut a la imagen </ h1 > < img src = "perro.jpg" alt = “Imagen de un perro" > src (Obligatorio) Define la ruta o URL de la imagen que se va a mostrar. alt (Obligatorio) Proporciona un texto alternativo para la imagen. Es crucial para la accesibilidad (lectores de pantalla) y el SEO, además de mostrarse si la imagen no se carga. width Establece el ancho de la imagen en píxeles ( px ). height Establece la altura de la imagen en píxeles ( px ). title Muestra un texto informativo cuando el cursor del ratón se coloca sobre la imagen. Es un " tooltip " o sugerencia. loading Un atributo moderno para mejorar el rendimiento. Con el valor " lazy ", le dice al navegador que cargue la imagen solo cuando el usuario se acerque a ella, lo que acelera la carga inicial de la página.

16. < h1 >Escucha esta canción</ h1 > < audio controls > < source src = "cancion.mp3" type = "audio/ mpeg " > Tu navegador no soporta el elemento de audio. </ audio > Etiqueta <audio>: Es el contenedor para el reproductor de audio. Atributo controls: Agrega controles como reproducir, pausar y ajustar el volumen. Etiqueta < source >: Especifica la ruta del archivo de audio (src) y su tipo ( type ). Mensaje alternativo: Aparece si el navegador no soporta la etiqueta <audio>.

17. < video controls > < source src = "video.mp4" type = "video/mp4" > Tu navegador no soporta la reproducción de videos. </ video > src : Especifica la ruta del archivo de video. Alternativamente, puedes usar la etiqueta < source > para incluir múltiples formatos. controls : Muestra controles predeterminados como reproducir, pausar, volumen, etc. autoplay : Hace que el video se reproduzca automáticamente al cargar la página. loop : Reproduce el video en bucle. muted : Inicia el video sin sonido. width y height : Definen el tamaño del video en píxeles.

18. HTML Colores

19. Lista de colores HTML - Eniun

20. Convertidor de códigos de color en línea: HEX, RGB, CMYK, HSL y HSV

21. HTML Tablas: Básica y con HTML 5

22. <table> <tr> <td>

23. Tabla Sencilla 3 Filas < tr ></ tr > 3 celdas por fila < td >

24. Tabla HTML 5 Define el estilo para la tabla en la <head>

25. En HTML 5 La 1ra. Fila de la Tabla son los Títulos o Encabezados de Columna

26. Explicación de los elementos: <!DOCTYPE html > : Declara el tipo de documento como HTML5. Es la primera línea y es obligatoria. < html lang ="es"> : El elemento raíz de la página, con el atributo lang ="es" para indicar que el idioma del contenido es español. <head> : Contiene metadatos sobre el documento, como la codificación de caracteres, la configuración de la vista y el título de la página. <meta charset ="UTF-8"> : Define la codificación de caracteres para que se muestren correctamente los caracteres especiales. < title > : El título que se mostrará en la pestaña del navegador. < style > : Contiene el CSS para dar un poco de estilo a la tabla. Esto no es obligatorio, pero ayuda a que se vea mejor. < body > : Contiene todo el contenido visible de la página. <h1> y <p> : Encabezado y párrafo que dan contexto a la tabla. <table> : El elemento principal que define la tabla. < thead > : El contenedor del encabezado de la tabla. Es una buena práctica para separar el encabezado del cuerpo. < tbody > : El contenedor del cuerpo de la tabla. Contiene las filas con los datos. < tr > : Representa una fila completa en la tabla (Table Row ). < th > : Representa una celda de encabezado (Table Header ). Generalmente el texto se muestra en negrita y centrado por defecto. En este caso, lo usamos para las celdas de la primera fila dentro de < thead >. < td > : Representa una celda de datos (Table Data). Se usa para todas las celdas dentro de < tbody >.

27.   Porque [email protected]

28. <video   width = "320"   height = "240"   controls > < source   src = "movie.mp4"   type = "video/mp4" > < source   src = "movie.ogg"   type = "video/ ogg " > Your browser does not support the video tag </video> Explicación: Etiqueta <audio>: Es el contenedor para el reproductor de audio. Atributo controls: Agrega controles como reproducir, pausar y ajustar el volumen. Etiqueta < source >: Especifica la ruta del archivo de audio (src) y su tipo ( type ). Mensaje alternativo: Aparece si el navegador no soporta la etiqueta <audio>. Solo necesitas reemplazar "cancion.mp3" con la ruta de tu archivo de audio. ¡Y listo! Tu canción estará disponible para reproducirse en la página.

29. El buscador es un bisturí para encontrar datos específicos y navegar por la web de forma rápida. La IA es una navaja suiza para sintetizar, crear, y conversar sobre temas complejos .