Scribd
Cargar
0 vistas5 páginas

Clase

La clase de Introducción a la Programación Web y Estructura Básica de HTML5 tiene como objetivo enseñar a los estudiantes de 11° grado los fundamentos del desarrollo web moderno y la creación de una página web básica utilizando HTML5. Se abordan conceptos como el front-end y back-end, la estructura de una página HTML, y se realizan actividades prácticas para que los estudiantes creen su propia página web. Al final, se plantean preguntas de reflexión y se asigna una tarea para reforzar el aprendizaje.

Cargado por

Andres David Valencia Hurtado
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
0 vistas5 páginas

Clase

La clase de Introducción a la Programación Web y Estructura Básica de HTML5 tiene como objetivo enseñar a los estudiantes de 11° grado los fundamentos del desarrollo web moderno y la creación de una página web básica utilizando HTML5. Se abordan conceptos como el front-end y back-end, la estructura de una página HTML, y se realizan actividades prácticas para que los estudiantes creen su propia página web. Al final, se plantean preguntas de reflexión y se asigna una tarea para reforzar el aprendizaje.

Cargado por

Andres David Valencia Hurtado
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

Clase: Introducción a la Programación Web y Estructura Básica

de HTML5

Grado: 11°
Duración: 4 horas

1. Objetivo de la clase

Comprender los conceptos básicos del desarrollo web moderno y


aprender a crear la estructura inicial de una página web utilizando
HTML5 y sus etiquetas fundamentales.

2. Introducción (45 minutos)

Actividad inicial

El docente inicia preguntando a los estudiantes:

 ¿Cómo creen que se construyen las páginas web?

 ¿Qué lenguajes creen que se usan para crear sitios web?

Luego se explica que el desarrollo web se basa en dos partes


principales:

1. Cliente (Front-end)
Es la parte que ve el usuario en el navegador:

 textos

 imágenes

 botones

 videos

Tecnologías principales:

 HTML

 CSS

 JavaScript

2. Servidor (Back-end)
Es la parte que procesa información y envía datos al usuario.

Ejemplos de lenguajes:
 Python

 PHP

 Java

 [Link]

Ejemplo sencillo

Cuando abrimos una página como Google:

 El cliente muestra el buscador.

 El servidor procesa lo que escribimos y devuelve resultados.

3. Introducción a HTML5 (1 hora)

Se explica que HTML significa:

HyperText Markup Language


Lenguaje de marcado para estructurar páginas web.

HTML no es un lenguaje de programación, es un lenguaje para


organizar el contenido de una página.

Se muestra un ejemplo simple de una página web.

4. Estructura básica de una página HTML (1 hora)

Se explica la estructura mínima:

<!DOCTYPE html>
<html>
<head>
<title>Mi primera página web</title>
</head>
<body>

<h1>Bienvenidos</h1>
<p>Esta es mi primera página web.</p>

</body>
</html>
Se explica cada etiqueta:

<html>
Indica que el documento es una página web.

<head>
Contiene información del documento (título, configuración, enlaces).

<body>
Contiene todo lo que ve el usuario.

5. Etiquetas básicas de HTML (1 hora)

Etiqueta de párrafo

<p>Este es un párrafo.</p>

Sirve para escribir texto.

Etiqueta de enlace

<a href="[Link] a Google</a>

Permite ir a otra página web.

Etiqueta de imagen

<img src="[Link]" alt="Descripción de la imagen">

Muestra imágenes dentro de la página.

6. Actividad práctica (45 minutos)

Los estudiantes crearán su primera página web.

Ejercicio

Crear un archivo llamado:

[Link]

y escribir el siguiente código:


<!DOCTYPE html>
<html>
<head>
<title>Mi primera página</title>
</head>
<body>

<h1>Hola mundo</h1>

<p>Mi nombre es ______.</p>

<p>Estoy aprendiendo desarrollo web.</p>

<a href="[Link] a Wikipedia</a>

<br><br>

<img src="[Link]
[Link]" width="100">

</body>
</html>

Luego abrir el archivo en el navegador.

7. Cierre de la clase (30 minutos)

Preguntas de reflexión:

 ¿Qué es HTML?

 ¿Cuál es la función de <body>?

 ¿Para qué sirve la etiqueta <a>?

 ¿Cómo se inserta una imagen en una página web?

Tarea

Crear una página llamada mi_presentacion.html que contenga:

 Un título con su nombre

 Un párrafo sobre ellos


 Una imagen

 Un enlace a su red social favorita o página favorita

También podría gustarte