Construcción de Sitios Web - Clase No.05

Contenidos Principales:
Fundamentos de HTML:

Uso del Bloc de Notas (Notepad) para crear páginas web básicas.
Reconocimiento de etiquetas esenciales: , , , .
Guardado de archivos con extensión .html usando comillas dobles para evitar .txt.
Exploración de Archivos y Extensiones:

Identificación de tipos de archivo mediante íconos y extensiones.
Activación de la opción “Extensiones de nombre de archivo” en el Explorador de Windows.
Edición y Visualización de Páginas Web:

Apertura de archivos HTML con distintos navegadores.
Problemas comunes con caracteres especiales (como tildes y signos de interrogación).
Etiquetas HTML para Estilo:

Uso de con atributos color y size.
Aplicación de para saltos de línea.
Ejercicios para comprobar funcionamiento de colores y tamaños de fuente.

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 Bloc de Notas NOTEPAD

7. Conocimiento Previo Observar la tecla de: Comilla doble Comilla Simple Tilde a la izquierda Tilde a la derecha Responder ¿Son similares? ¿Diferentes? ¿Cómo en Qué?

8. Conocimiento Previo Todo Archivo tiene una extensión o es un de un tipo, como que perteneciera a una familia especifica

9. Conocimiento Previo Casi todos los programas o aplicaciones manejan más de un tipo de archivo. Ej. Microsoft Word.

10. Conocimiento Previo Colocar el nombre del archivo entre comillas dobles, omite la extensión por defecto. En este caso, el archivo sería extensión html y no txt.

11. Conocimiento Previo Abrimos el Explorador de Archivos Windows File Manager Mi PC Este equipo Pestaña Vista -activamos Extensión de nombre de archivos Detalles

12. Mi 1era. Página WEB Ingresamos al Bloc de Notas Escribimos el siguiente texto:

13. Mi 1era. Página WEB Clic en Archivo y luego en Guardar Como Escogemos el Escritorio 2 1 3

14. Escribimos el nombre del archivo entre Comillas Dobles 1 Toda página web Inicia y termina En HTML

15. El icono del archivo nos indica el tipo. Todo Archivo tiene una extensión o es un de un tipo, como que perteneciera a una familia especifica

16. ABRIR CON Colocamos el ratón sobre el archivo Damos Clic con el botón derecho del ratón 2 1 3 2 1 3

17. ABRIR CON Colocamos el ratón sobre el archivo Damos Clic con el botón derecho del ratón 2 1 1

18. Escribir el nombre del archivo sin comillas dobles 1 2 Borramos 1ra. y le cambiamos por 2da. o sea 1

19. Mi 3ra. Página WEB 2 3 Aumentamos < title > Con el mensaje ¿ Dónde aparece esto ? 1

20. 1 2 3 Abrimos desde WinFile Manager Colocamos el ratón sobre el archivo Damos Clic con el botón derecho del ratón Abrimos el archivo con varios navegadores

21. ¿Se escribe Bien, sale mal? El signo de interrogación y tilde ¿dan problemas? El titulo está bien en un caso, mal en el otro %20 ¿qué es?

22. Mi 4ta. página

23. ¿Funcionaron todos los Títulos?

24. 1 2 3 Abrimos para editar el archivo y crear otro nuevo

25. Usamos la etiqueta < font > con el atributo color

26. ¿Cada color está en una línea distinta? ¿Funcionaron todos los Colores?

27. 1 Abrimos para editar el archivo y crear otro nuevo

28. Usamos la etiqueta < br >

29. ¿Cuál es la función de la etiqueta < br > ?

30. Aumentamos a la etiqueta < font > el atributo size

31. ¿Funcionaron todos los size ?

32.   Porque [email protected]

33. < h1 >Escucha esta canción</ h1 > < audio controls > < source src = "cancion.mp3" type = "audio/ mpeg " > Tu navegador no soporta el elemento de audio. </ audio > 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.

34. < video controls > < source src = "video.mp4" type = "video/mp4" > Tu navegador no soporta la reproducción de videos. </ video > Atributos principales 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.

35. <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.