SEMANA 1
1. Saludo
2. marcar cuaderno (nombre completo, curso, correo personal de gmail, correo insittucional, blog del nivel, correo de la profesora)
3. Basado en cada uno de los aprendizajes para la paz argumentar su compromiso personal para el cuarto periodo (para cada uno de los 5 items escribir un párrafo de mínimo de 7 líneas)
SEMANA 2
1. Saludo
Introducción a HTML
Recursos: Bloc de notas, atom (o editor de texto plano), navegador web, guía de etiquetas.
Parte 1: ¿Qué es HTML y cómo funciona?
- Explicación Conceptual:
- ¿Qué significa HTML? HyperText Markup Language (Lenguaje de Marcas de Hipertexto).
- La analogía de la casa: Si una página web fuera una casa, HTML es la estructura de columnas, paredes y ladrillos (el esqueleto). No es la pintura ni los muebles bonitos (eso es CSS), ni la electricidad o los botones que hacen cosas (eso es JavaScript). HTML solo se encarga de organizar el contenido.
- ¿Qué es una Etiqueta (Tag)? Las etiquetas son las órdenes que le damos al navegador para decirle qué tipo de contenido estamos mostrando. Se escriben siempre entre signos menor que y mayor que:
<etiqueta>.
- La Anatomía de una Etiqueta:
- Casi todas las etiquetas vienen en parejas: una etiqueta de apertura
- (
<p>) y una etiqueta de cierre (</p>). La barra inclinada (/) en la etiqueta de cierre indica que la orden ha terminado.
Parte 2: Las Etiquetas Básicas del Esqueleto Web
Para que cualquier página web en el mundo funcione, necesita una estructura base obligatoria. Vamos a estudiar los "cimientos" que siempre deben ir en el Bloc de notas:
| Etiqueta | Nombre / Significado | ¿Para qué sirve? | Ejemplo |
<!DOCTYPE html> | Declaración de documento | Le avisa al navegador que esta página usa la versión moderna de HTML (HTML5). Nota: No se cierra. | <!DOCTYPE html> |
<html> | Raíz (Root) | Es la caja gigante que envuelve todo el código de la página web. | <html> ... </html> |
<head> | Cabecera | Contiene información invisible para el usuario, como el título que aparece en la pestaña del navegador. | <head> ... </head> |
<title> | Título de la pestaña | Define el nombre que se ve arriba en la pestaña del navegador web. | <title>Mi Página</title> |
<body> | Cuerpo | Es la parte más importante: todo lo que escribas aquí es lo que el usuario podrá ver en la pantalla. | <body> ... </body> |
Etiquetas de Contenido y Texto:
- Encabezados (
<h1>a<h6>): Sirven para los títulos principales y subtítulos.<h1>es el título más grande e importante, y<h6>el más pequeño.- Ejemplo:
<h1>Este es mi título principal</h1>
- Párrafos (
<p>): Se usan para agrupar bloques de texto común.- Ejemplo:
<p>Este es un párrafo donde explico mi propósito de vida.</p>
Parte 3: Laboratorio Práctico en el Bloc de Notas (35 minutos)
Instrucciones paso a paso para que cada estudiante cree su primera página web local:
- Abre el Bloc de notas o atom en tu computador.
- Copia la siguiente estructura base respetando cada espacio, etiqueta y símbolo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mi Primer Portafolio Web</title>
</head>
<body>
<h1>Hola, soy el CEO de mi futuro</h1>
<p>Este es el espacio donde presento mi proyecto de vida y mi IKIGAI.</p>
<h2>Mi Meta Profesional</h2>
<p>Quiero estudiar en la Universidad Nacional para transformar mi comunidad.</p>
</body>
</html>
- Cómo guardar el archivo correctamente (¡Paso crítico!):
- Haz clic en Archivo > Guardar como...
- En "Nombre", asígnale un nombre sin espacios y termina con la extensión
.html(Ejemplo:index.html). - En "Tipo", cambia "Documentos de texto (.txt)" por "Todos los archivos (.*)".
- Guárdalo en el Escritorio.
- Ejecutar la página: Ve al Escritorio, busca el archivo que creaste (tendrá el ícono de tu navegador web predeterminado, como Chrome, Edge o Firefox) y haz doble clic sobre él. ¡Felicidades, acabas de programar tu primera página web local sin necesidad de internet!
- Revisión del docente: Pasa por los puestos verificando que los estudiantes hayan entendido la actividad
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.