CG5-C1 MX
AM : Actividad del maestro
AA: Actividad del alumno
AAA : Actividad adicional del alumno
PARA PLANEACIÓN Y REFERENCIA
Diapositiva No. |
Tema |
---|---|
2 | Estructura de la clase |
3 | Requisitos previos |
17 | Inicio de sesión en Repl.it para el maestro |
19-23 | AM explicación del código |
39 | Enlaces de actividades |
ESTRUCTURA DE LA CLASE
Actividad No: | DiapositivaNo. | Tema | Tiempo |
---|---|---|---|
1 | 4 | 2min | |
2 | 5 | 5 min | |
3 | 9 | 4 min | |
4 | 14 | 6 min | |
5 | 25 | 10 min | |
6 | 30 | - | |
7 | 33 | 3 min |
PARA EL MAESTRO
1. Computadora con buena conexión a internet.
2. Navegador más reciente instalado.
3. Proyector para presentar pantalla.
4. Credenciales de inicio de sesión de Repl.it.
PARA LOS ALUMNOS
1. Computadora con buena conexión a internet.
2. Navegador más reciente instalado.
3. Credenciales de Repl.it.
CSS
HTML
PRESENTACIÓN
JavaScript
ESTRUCTURA
COMPORTAMIENTO
Cabeza
Cuerpo
Huesos
ESTRUCTURA
PRESENTACIÓN
HTML
ETIQUETAS
JavaScript
CONTENIDO
ESTRUCTURA
COMPORTAMIENTO
Los bloques/líneas de código resaltados en rojo, necesitan ser agregados.
QUE HACER: Agrega las etiquetas HTML ("<h1>","<p>", "<b>", "<i>", "<img>"), agregar CSS para cambiar el color de fondo, agregar JS para cambiar el color de fondo al hacer clic.
HTML
CSS
JavaScript
<body>
<h1>About Me</h1>
</body>
index.html
index.html
<body>
<h1>About Me</h1>
<p>Hi, my name is <i>Ria Sharma</i></p>
<p>I am in Grade 5 and I study in City Public school.</p>
<p>I am a <b>Junior Coder</b> and I love making apps.</p>
</body>
index.html
<body>
<h1>About Me</h1>
<img src="picture.png" />
<p>Hi, my name is <i>Ria Sharma</i></p>
<p>I am in Grade 5 and I study in City Public school.</p>
<p>I am a <b>Junior Coder</b> and I love making apps.</p>
</body>
body {
background-color:orange;
color: white;
}
style.css
<body id="b1" >
<h1>About Me</h1>
<img src="picture.png" onclick="changecolor()"/>
<p>Hi, my name is <i>Ria Sharma</i></p>
<p>I am in Grade 5 and I study in City Public school.</p>
<p>I am a <b>Junior Coder</b> and I love making apps.</p>
</body>
index.html
function changecolor(){
document.getElementById("b1").style.background="red";
}
script.js
Paso 1
Paso 3
Paso 2
Paso 5 :
Output
Agregar código JavaScript
Por ejemplo
Username: dodo2021
Password (contraseña): Dodo@2021
Agreguemos tu nombre y tu escuela para personalizar tu página SOBRE MI.
Pista:
Implementa los cambios en la línea 12 y 13.
Pista:
Implementa los cambios en "style.css"
Cambiemos el color de fondo de tu página: "Sobre mi"
CSS
HTML
JavaScript
PRESENTACIÓN
COMPORTAMIENTO
ESTRUCTURA
Como hemos aprendido al principio de la clase, "HTML" es la base de nuestro sitio web. Entonces, también es llamado el esqueleto de nuestra página web.
La etiqueta <p> se llama:
Usamos la etiqueta "<p>" para escribir una descripción de nuestra página web
CSS
HTML
PRESENTACIÓN
JavaScript
ESTRUCTURA
COMPORTAMIENTO
Nombre de la actividad | Enlaces | |
---|---|---|
Actividad del maestro 1 | Página Sobre mi |
|
Solución a la Actividad del maestro 1 | Página Sobre mi |
|
Actividad del alumno 1 | Página Sobre mi |
|
Actividad adicional del alumno 1 |
Agregar nombre | |
Actividad adicional del alumno 2 |
Cambiar color de fondo |