Want to create interactive content? It’s easy in Genially!
Get started free
Template - Premium V2
tlab
Created on September 28, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Modern Presentation
View
Terrazzo Presentation
View
Colorful Presentation
View
Modular Structure Presentation
View
Chromatic Presentation
View
City Presentation
View
News Presentation
Transcript
¡Practica conceptos claves de programación!
Actividad 1
Completa el código
Revisa e identifica errores
Elige la opción correcta
Encuentra el error
Acomoda el código
Completa el código
Comenzar
Completa el código
Haz clic sobre la imagen para ampliarla y presta atención en los espacios en blanco del código HTML o CSS. Luego, realiza los ejercicios de autocompletado para que el sitio web se visualice correctamente.
Completa el código 1/4
Observa los href de los enlaces.
¿Cuál sería el orden correcto de los valores?
Haz clic en la opción correcta
#servicios #trabajos www.prensa.com index.html contacto.html
index.html #servicios #trabajos www.prensa.com contacto.html
www.prensa.com #servicios #trabajos contacto.html index.html
¡Correcto!
Los enlaces que has utilizado están divididos en tres grupos:Enlaces absolutos:- www.prensa.comEnlaces relativos:- index.html- contacto.htmlEnlaces internos:- #servicios- #trabajos
Para continuar completando el código, pasa al siguiente ejercicio
Completa el código 2/4
¿En qué linea deberías colocar la imagen para completar el código? Haz clic sobre ella.
¡Correcto!
Es en el elemento imagen y en su atributo src donde se debe colocar la url o ruta de una imagen para que se muestre en el sitio.
Para continuar completando el código, pasa al siguiente ejercicio
Completa el código 3/4
Ahora, presta atención en este fragmento del código.
¿Cuál es el orden correcto para que se visualicen los íconos de las redes sociales?
Haz clic en la opción correcta
<i class="fa-brands fa-instagram"></i> <i class="fa-brands fa-linkedin"></i> <i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-facebook"></i> <i class="fa-brands fa-linkedin"></i> <i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-facebook"></i> <i class="fa-brands fa-instagram"></i> <i class="fa-brands fa-linkedin"></i>
¡Correcto!
El orden de las class es el correcto ya que segun font awesome primero es necesario aclarar que vamos a utilizar un icono de una marca (fa-brands) y luego la marca a utilizar (facebook, instagram, linkedln).
Para continuar completando el código, pasa al siguiente ejercicio
Completa el código 4/4
Por último, para que un icono se vea en una página, es necesario usar una librería. Esa librería trae los iconos con este script:
<script src="https://kit.fontawesome.com/e155ba3b25.js" crossorigin="anonymous"></script>
¿En qué lineas podrías colocarlo? Haz clic sobre alguna de ellas.
¡Correcto!
La ubicación del script es dentro de <head> para que al cargar el sitio, puedas utilizar los iconos de la libreria.
¡Felicidades!
Has completado la actividad
Revisa e identifica errores
Comenzar
El código web es la base de un sitio web y su calidad puede influir en la experiencia del usuario y la optimización para los motores de búsqueda. Para ejercitar, realiza las actividades en el siguiente orden:
1) ¡Repasa los conceptos!
2) Identifica la imagen correcta
3) Encuentra el error
1) ¡Repasa los conceptos!
Las diferencias en la estructura, etiquetado semántico y estilo del código web pueden afectar tanto la accesibilidad como el mantenimiento del sitio web. A continuación, se detallan algunos ejemplos:
ACCESIBILIDAD
MANTENIMIENTO
En resumen, el uso de etiquetas semánticas y una estructura de código clara y bien organizada pueden mejorar la accesibilidad y el mantenimiento del sitio web, mientras que un código confuso y menos semántico puede hacer que el sitio web sea menos accesible y más difícil de mantener en el futuro.
2) Identifica la imagen correcta
Haz clic sobre las siguientes imágenes para ampliarlas y luego identifica cuál de ellas facilita la comprensión de la estructura del sitio web y mejora su accesibilidad.
¿Cuál es la correcta?
OPCIÓN B
OPCIÓN A
OPCIÓN A
OPCIÓN B
¡Correcto!
Aquí se utilizan etiquetas semánticas como <header>, <nav>, <main> y <footer> que facilitan la comprensión de la estructura del sitio web y mejoran su accesibilidad. Ahora pasa a la siguiente actividad para identificar qué error presentaba la imagen A.
3) Encuentra el error
Haz clic sobre la imagen para ampliarla y detecta el error.
¿Qué error presenta?
Usa divs con identificadores (id), lo que hace que el código sea menos semántico y más difícil de entender
El elemento <nav> no es necesario para crear un menú de navegación y puede ser omitido
El atributo “alt” en la etiqueta <img> es opcional y no es necesario en todas las imágenes. Solamente se utiliza cuando la imagen viene unida a un parrafo
¡Felicidades!
Has completado la actividad
Elige la opción correcta
Comenzar
1/12
Elige la opción correcta
Elige el término CSS que mejor describe cada estilo aplicado en una página web para cambiar el color del texto a rojo:
c) color
b) font-size
d) border
a) background-color
¡CORRECTO! La propiedad "color" es la que se utiliza para cambiar el color del texto en un elemento.
¡CONTINUEMOS!
2/12
Elige la opción correcta
Elige el término CSS que mejor describe al estilo para alinear contenido al centro de la página
d) float
a) text-align
b) margin
c) padding
¡CORRECTO! La propiedad "text-align" es la que se utiliza para alinear el texto dentro de un elemento, incluyendo centrarlo.
¡CONTINUEMOS!
3/12
Elige la opción correcta
Elige el término CSS que mejor describe cada estilo aplicado en una página web para crear una transición suave en la animación de un elemento:
a) keyframes
b) transform
c) animation
d) transition
¡CORRECTO! La propiedad "transition" se utiliza para crear una transición suave entre dos estados de un elemento, como cuando se cambia de un color a otro o se mueve de una posición a otra.
¡CONTINUEMOS!
4/12
Elige la opción correcta
Elige el término CSS que mejor describe cada estilo aplicado en una página web para redondear las esquinas de un recuadro:
a) box-shadow
d) background-image
b) border-radius
c) text-shadow
¡CORRECTO! La propiedad "border-radius" es la que se utiliza para redondear las esquinas de un elemento.
¡CONTINUEMOS!
5/12
Elige la opción correcta
¿Cuál es el elemento HTML que se utiliza para los títulos?
a) <p>
b) <h1>
c) <img>
¡CORRECTO! El elemento "h1" se utiliza para el título principal de una página web, y hay otros tamaños de encabezado disponibles (h2, h3, etc.).
¡CONTINUEMOS!
6/12
Elige la opción correcta
¿Cuál es la propiedad CSS que se utiliza para cambiar el color de fondo de un elemento?
b) color
c) border
a) background-color
¡CORRECTO! La propiedad "background-color" se utiliza para establecer el color de fondo de un elemento.
¡CONTINUEMOS!
7/12
Elige la opción correcta
¿Qué significa la sigla HTML?
c) HyperLink Markup Language
a) HyperText Markup Language
b) HyperText Media Language
¡CORRECTO! La sigla "HTML" significa "HyperText Markup Language", que es el lenguaje utilizado para crear páginas web.
¡CONTINUEMOS!
8/12
Elige la opción correcta
¿Cuál es el atributo HTML que se utiliza para especificar la URL de un enlace?
b) src
a) href
c) alt
¡CORRECTO! El atributo HTML "href" se utiliza para especificar la URL de un enlace, lo que significa que es la propiedad correcta que debe usarse cuando se desea enlazar un elemento HTML a otro recurso en la web.
¡CONTINUEMOS!
9/12
Elige la opción correcta
¿Cuál es la propiedad CSS que se utiliza para cambiar el tamaño de un elemento?
c) width
a) font-size
b) height
¡CORRECTO! La propiedad CSS "width" se utiliza para cambiar el tamaño de un elemento HTML en términos de su ancho, lo que significa que es la opción correcta para seleccionar cuando se desea ajustar el ancho de un elemento HTML.
¡CONTINUEMOS!
10/12
Elige la opción correcta
¿Cuál es la etiqueta HTML que se utiliza para crear un enlace?
b) <a>
c) <div>
a) <img>
¡CORRECTO! La etiqueta HTML "<a>" se utiliza para crear un enlace, lo que significa que es la opción correcta para seleccionar cuando se desea crear un enlace en un documento HTML.
¡CONTINUEMOS!
11/12
Elige la opción correcta
¿Cuál es la propiedad CSS que se utiliza para especificar el tipo de letra que se utilizará en un elemento?
a) font-size
b) font-family
c) font-style
¡CORRECTO! La propiedad CSS "font-family" se utiliza para especificar el tipo de letra que se utilizará en un elemento HTML. Esta propiedad le permite a los desarrolladores de sitios web definir una fuente personalizada que se aplicará a los elementos específicos de su sitio web.
¡CONTINUEMOS!
12/12
Elige la opción correcta
¿Cuál es el elemento HTML que se utiliza para crear una lista ordenada?
a) <ul>
b) <li>
c) <ol>
¡CORRECTO! El elemento HTML "<ol>" se utiliza para crear una lista ordenada en una página web. Este elemento define una lista de elementos que se numeran automáticamente en orden ascendente.
¡Felicidades!
Has completado el cuestionario
Encuentra el error
Comenzar
1/4
Se quiere escribir una línea de código para que los enlaces de la web se abran en una pestaña nueva. Sin embargo, este código presenta un error. Haz clic para identificarlo.
¡Correcto! El valor del atributo target "_blanc" está mal escrito. Debería ser "_blank" para que el enlace se abra en otra pestaña o ventana del navegador.
2/4
Se quiere presentar un texto en cursiva. Sin embargo, este código presenta un error. Haz clic para identificarlo.
¡Correcto! Cuando la propiedad font-style se establece en bold el texto se muestre en negrita. Para la cursiva, luego del font style debería aparecer "italic".
3/4
Se quiere mostrar una imagen. Sin embargo, este código presenta un error. Haz clic para identificarlo.
<img scr="imagen.jpg" alt="Una imagen " />
¡Correcto! La forma correcta de escribir el atributo es "src". Si se escribe "scr", la imagen no se muestra.
4/4
Se quiere centrar vertical y horizontalmente el contenido del contenedor y corregir la propiedad margin en p a 0 para eliminar márgenes adicionales. Sin embargo, este código presenta un error. Haz clic para identificarlo.
. container { width: 500px ; height: 300px ; border: 1px solid black ; text-align: center ; } p { margin: 0 auto; }
¡CORRECTO! En el código con errores, el texto se centra horizontalmente con text-align: center, pero no verticalmente. Además, la propiedad margin en p está establecida como 0 auto, lo que no tiene sentido. Para realizarlo correctamente se agrega la propiedad display: flex, justify-content: center y align-items: center para centrar vertical y horizontalmente el contenido del contenedor. También se corrige la propiedad margin en p a 0 para eliminar cualquier margen adicional que pueda causar problemas de alineación.
¡Felicidades!
Has completado la actividad
MIRA CÓMO DEBERÍA QUEDAR
Acomoda el código
Comenzar
1/4
1) Observa este código HTML:
<img src= "imagen.jpg" alt= "Una imagen" class= "imagen-borde">
2) Arrastra cada elemento dentro del recuadro hasta la ubicación que debería tener para que la imagen se muestre con un borde de 2px de ancho y de color rojo:
border:
.image-borde {
2px
solid red
3) Visualiza cómo debería quedar el código CSS:
2/4
1) Observa este código HTML:
<h1 class= "encabezado">Mi sitio web</h1>
2) Arrastra cada elemento dentro del recuadro hasta la ubicación que debería tener para que en la class encabezado haya un gradiente de fondo de color:
background:
.encabezado {
linear-gradient(to bottom,
#ffffff, #333333) ;
3) Visualiza cómo debería quedar el código CSS:
3/4
1) Observa este código HTML:
<ul class="mi-lista"> <li>Elemento 1 </li> <li>Elemento 2 </li> <li>Elemento 3 </li> </ul>
2) Arrastra cada elemento dentro del recuadro hasta la ubicación que debería tener para que la lista tenga un estilo de viñetas personalizado:
.mi-lista {
margin-right:10px;
list-style: none;
.mi-lista li:before {
content:"✓";
3) Visualiza cómo debería quedar el código CSS:
4/4
1) Observa este código HTML:
<h2>Contáctanos</h2> <p>Por favor, completa el siguiente formulario:</p>
2) Arrastra cada elemento dentro del recuadro hasta la ubicación que debería tener para agregar un formulario de contacto con los campos Nombre, Email y Mensaje:
<label for="email">Email:</label> <input type="email" id="email" name="email" required>
<form action= "/enviar-mensaje"method="POST"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre" required>
</form>
<label for="mensaje">Mensaje:</label> <textarea id="mensaje" name="mensaje" required></textarea>
<button type="submit">Enviar</button>
3) Visualiza cómo debería quedar el código CSS:
¡Felicidades!
Has completado la actividad