Taller de Desarrollo

de Páginas web

Evaluación del módulo

Nombre: Andrés Trejo Vázquez

Folio: 5015ZN05
Práctica 1.

1. INTRODUCCIÓN

Objetivo: Verificar el dominio teórico de los fundamentos técnicos, las

tecnologías de software y la funcionalidad del navegador mediante preguntas
específicas.

Indicaciones: Pedir responder cada una de las preguntas de manera breve y clara.

Preguntas:

1. ¿Qué es el hipertexto? (valor 1.0)

Respuesta: Es un conjunto estructurado de textos, gráficos, etc, unidos

entre sí por enlaces, vínculos o hipervínculos.

2. ¿Qué es la hipermedia? (valor 1.0)

Respuesta: Es un conjunto estructurado de diversos medios como textos
gráficos, imágenes y sonidos unidos entre sí por enlaces y conexiones
lógicas para la transmisión de una información.

3. ¿Qué características tiene un lenguaje de etiquetas? (valor 1.0)

Respuesta: Los lenguajes de etqiueta procedurales se caracterizan por:

Contener instrucciones claras para el programa visualizador o impresor sobre la forma en que se debe
mostrar el contenido del documento, con un determinado estilo y formato.

Dependencia de las instrucciones de formateado del medio de presentació n, de forma que el documento
final, el formado por el contenido original má s las marcas, no es portable a otros medios.

Por otra parte, los lenguajes de etiqueta generalizados se caracterizan por:

Marcar las estructuras del texto: las etiquetas se dirigen má s a describir el contenido del documento, su
estructura ló gica, que a expresar instrucciones detalladas de formateado.
Separar la estructura del documento de su aspecto.
Ser independientes del software que procesa el documento.
Facilitar el procesamiento automá tico de la extracció n de la informació n contenida en los documentos.

Facilitar la generació n de visualizaciones y presentaciones del documento: permiten la presentació n de

diferentes vistas del documento dependiendo del dispositivo de visualizació n y de las preferencias del
usuario.
1
2
4. ¿Cuáles son las ventajas que introduce HTML5? (valor 1.0)
Respuesta: Estas son:
1. Incorporación de video: HTML5 proporciona un estándar para mostrar videos, haciendo que su
incorporación sea sencilla y popular.
2. Experiencia de usuario:  Se pueden diseñar y presentar sitios y aplicaciones Web que superen
las expectativas de los usuarios.
3. Un código más limpio: HTML5 ha sido creado para ofrecer un código más limpio, que soluciona
el tan aquejado problema de tener que hacer modificaciones en un sitio Web.
4. Compatibilidad múltiple entre navegadores.
5. Optimización para móviles: HTML5 es aún más increíble, ya que está optimizado para
desarrollar sitios y aplicaciones móviles.
6. Una mejor posibilidad de ranking.

5. ¿Cuál es la función del motor de renderizado de un navegador web? (valor

1.0)

Respuesta: La función principal de un motor de navegación es transformar los documentos HTML y

otros recursos de una página web en una representación visual interactiva en el dispositivo del usuario.
Se encarga de interpretar los archivos HTML (lenguaje de marcado de hipertexto), CSS (hojas de estilo
en cascada), y Javascript para presentarlos en pantalla, ó convertirlos a pixeles.

6. Menciona al menos 2 tecnologías de software para el desarrollo de páginas

web y explícalas brevemente (valor 1.0)

Respuesta: CSS Cascading Style Sheets

Nos permite establecer medidas, colores o cualquier otra característica de
representación de una página web.

Java Script
Es un lenguaje multiparadigma que requiere de un intérprete para ser
ejecutado, permite la creación de páginas dinámicas.

3
4
Práctica 2.

2. HERRAMIENTAS PARA LA CREACIÓN DE PÁGINAS WEB

Objetivo: Verificar el dominio del concepto de editor de texto y su uso en el

diseño de páginas web.

Indicaciones: Pedir responder cada una de las preguntas de manera breve y clara.

Preguntas:

1. Describe al menos 5 características básicas de un editor de texto. (valor 1.0)

Respuesta: Las características má s comunes que puedes encontrar en lo que es un editor de texto:
 La capacidad de cortar, copiar y pegar texto.
 Crear una lista con viñ etas.
 Ajustar el texto a la siguiente línea.
 Deshacer o rehacer el ú ltimo comando. 
 Algunos editores de texto ofrecen funciones má s avanzadas, como la capacidad de configurar
marcos o teclas de comando para editar el có digo fuente. 

2. Menciona al menos 3 editores de texto. Pueden ser tanto comerciales como

los preinstalados en algÚn sistema operativo. (valor 1.0)

Respuesta: Notepad++, Sublime Text, Vim, Komodo Edit

5
3. ¿Qué extensión debe tener un archivo que contiene el código HTML de una
página web? (valor 1.0)

Respuesta:La extensión .html

4. ¿Qué extensión llevan los archivos que contienen instrucciones para aplicar
estilos a un documento que contiene el código HTML de una página web?
(valor 1.0)

Respuesta: Es un archivo de extensión .CSS (CSS, Cascading Style Sheets = Hojas de

estilo) que contempla definiciones de formato (tipo de fuente, tamaño, color de la fuente, color
de fondo, párrafos, etc) de las distintas etiquetas que forman una página *.HTML.

5. ¿Menciona al menos tres formatos de imagen que puedes incorporar dentro

del código html5? (valor 1.0)

Respuesta: PGN: Soporta transparencia. Compresión sin pérdidas. Imágenes “lisas”.

JPG: Compresión con pérdidas. Ideal para imágenes con texturas.
SVG: Formato vectorial. Ideal para imágenes escalables.

6. Uno de los buenos hábitos para desarrollar nuestra página web es tener en
distintas carpetas distintos tipos de archivo, por ejemplo, los archivos
relacionados a imágenes en una carpeta, en otra los relacionados a
multimedia, en otra a lo referente a los estilos (CSS), etc. (valor 1.0)

a) Cierto
b) Falso

Respuesta: Cierto

6
Práctica 3.

3. ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

Objetivo: Verificar el dominio del concepto de web semántica y su estructura.

Indicaciones: Pedir responder o seleccionar la respuesta correcta segÚn sea el

caso. Preguntas:

1. ¿Menciona brevemente qué es una etiqueta y qué es un elemento? (valor

Respuesta: Las etiquetas HTML son fragmentos de texto rodeados por corchetes
angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código HTML.

HTML define el término elemento para referirse a las partes que componen los documentos
HTML.
Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en realidad
un elemento HTML es mucho más que una etiqueta, ya que está formado por:
Una etiqueta de apertura.
 Cero o más atributos.
 Texto encerrado por la etiqueta.
 Una etiqueta de cierre.
El texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de HTML no pueden
encerrar ningún texto.

0.6)

2. ¿Qué significa la semántica en el contexto de HTML5? (valor 0.3)

a) Las etiquetas HTML semánticas dan un significado extra al

contenido de la etiqueta
b) La nueva etiqueta <semantic> contiene información sobre cómo
interpretar el contenido de la página
c) Todas las etiquetas ahora tienen un atributo llamado "semántico" que
contiene información sobre el contenido de la etiqueta.
d) Es solo una palabra de moda sin sentido.

Respuesta: a) Las etiquetas HTML semánticas dan un significado

extra al contenido de la etiqueta

3. ¿Qué elemento se utiliza para diferenciar el contenido de una página

7
 web del material en el que se encuentra (como una barra lateral)?
(valor 0.3)

a) <header>
b) <footer>

8
c) <nav>
d) <aside>
Respuesta: a)<header>

4. De los siguientes elementos, seleccione el que NO clasifica como

marcado semántico. (valor 0.3)

a) <mark>
b) <article>
c) <time>
d) <span>

Respuesta: d) <span>

5. ¿Menciona al menos 6 elementos semánticos en html5 y descríbelos

brevemente? (valor 1.5)

Respuesta: <article> Define el contenido independiente, autónomo de los

elementos relacionados.
<nav > Para definir la sección de enlaces de navegación. Se utiliza para definir la
navegación, página enlaza algunas zonas, pero no todos los enlaces deben ser
incluidos.
<aside> Define el contenido de la página más allá del área principal de contenido
(como barra lateral).

<header> Especifica una cabecera para un documento o sección. Debe ser usado
como un recipiente para el contenido de introducción. Puede tener varias en un
documento.
<figure> El elemento debe estar asociado con el contenido principal, pero si se
elimina, no responden al impacto de flujo de documentos. Etiqueta especificada
contenido de corriente separada (imágenes, gráficos, fotografías, etc).
<footer> Describe la zona inferior del documento, es decir; especifica un pie de
página de un documento o sección. Debe contener en este caso, el autor del
documento, la información de derechos de autor, los vínculos, condiciones de uso,
etc.

9
Los siguientes ejemplos de elementos son incorrectos. Describe lo que está mal con
cada uno, y luego escríbelo correctamente. (cada respuesta vale 0.3, en total suman
1.2)

1. <img "birthday.jpg">

Respuesta: Falta la URL de la imagen y la alt el texto alternativo de la

imagen. Entonces quedaría: <img src="birthday.jpg" alt="birthday">

2. <i>Congratulations!<i>

Respuesta: La i es incorrecrat como leemnto, sería el elemnto h1 que nos

indica títulos dentro de un contenido. Entonces quedaría
<h1>Congratulations!<h1>

3. <a href="file.html">Enlace de texto</a href="file.html">

Respuesta: El cierre del elemento “a” (</a>) va al final y no se repite href.

Entonces quedaría: <a href= “file.html”>Enlace de texto </a>

4. <p>Esto es un párrafo<\p>

Respuesta: La diagonal en el cierre del elemento “p” es en el otro sentido.

Esto quedaría: <p>Esto es un párrafo</p

10
Indicaciones: La siguiente imagen muestra el contenido de la página web del periodico
The New York Times. Coloca los elementos semánticos de HTML5 dentro de cada uno
de los recuadros segÚn corresponda: (valor 0.3 cada una, total 1.8)

<header>

<nav>

<section>

<aside>

<article>

<footer>

11
12
Práctica 4.

4. LENGUAJE HTML

Objetivo: Verificar el dominio de los elementos básicos en html para la realización de la

maquetación de una página web usando Únicamente código html.

Indicaciones: Pedir subrayar, encerrar en un círculo, o escribir la respuesta que

consideren correcta.

Preguntas:

1. ¿Qué significa HTML? (valor 0.24)

a) Home Tool Markup Language

b) Hyperlinks and Text Markup Language
c) Hyper Text Markup Language

Respuesta: c) Hyper Text Markup Language.

2. Elige el elemento HTML correcto para el encabezado más grande: (valor 0.24)

a) <heading>
b) <hed>
c) <h6>
d) <h1>

Respuesta: c) <h6>

3. ¿Cuál es el elemento HTML correcto para insertar un salto de línea? (valor

0.24)

a) <lb>
b) <br>
c) <break>

Respuesta: b) <br>

4. ¿Cuál es el HTML correcto para agregar un color de fondo? (valor 0.24)

13
a) <background>yellow</background>
b) <body bg="yellow">
c) <body style="background-color:yellow;">

Respuesta: c) <body style= “background – color: yellow;”>

5. Elija el elemento HTML correcto para definir texto importante (valor 0.24)

a) <b>
b) <strong>
c) <i>
d) <important>

Respuesta: c) <strong>

6. Elija el elemento HTML correcto para definir el texto enfatizado (valor 0.24)

a) <italic>
b) <em>
c) <i>

Respuesta: a) <em>

7. ¿Cuál es el HTML correcto para crear un hipervínculo? (valor 0.24)

a) <a>https://adip.cdmx.gob.mx/</a>
b) <a name="https://adip.cdmx.gob.mx">ADIP</a>
c) <a href="https://adip.cdmx.gob.mx">ADIP</a>
d) <a url=”https://adip.cdmx.gob.mx">ADIP</a>

Respuesta: c) <a href=”https://adip.cdmx.gob.mx”>ADIP</a>

8. ¿Cómo puedes abrir un enlace en una nueva pestaña/ventana del

navegador? (valor 0.24)

a) <a href="url" target="new">

b) <a href="url" target="_blank">
c) <a href="url" new>

14
 Respuesta: b) <a href="url" target="_blank">

9. ¿Cuáles de estos elementos son todos elementos de <table>? (valor 0.24)

a) <thead><body><tr>
b) <table><tr><tt>
c) <table><head><tfoot>
d) <table><tr><td>

a) Respuesta: a) <thead><body><tr>

10. Los elementos inline normalmente se muestran sin comenzar una

nueva línea. (valor 0.24)

a) Verdadero
b) Falso

Respuesta: a) Verdadero

11. ¿Cómo puedes hacer una lista numerada? (valor 0.24)

a) <list>
b) <ol>
c) <ul>
d) <dl>

Respuesta: b) <ol>

12. ¿Cómo se puede hacer una lista con viñetas? (valor 0.24)

a) <ol>
b) <ul>
c) <list>
d) <dl>

Respuesta: b) <ul>

15
13. ¿Cuál es el HTML correcto para hacer una casilla de verificación
(checkbox )? (valor 0.24)
a) <input type="check">
b) <check>
c) <checkbox>
d) <input type="checkbox">

Respuesta: d) <input type="checkbox">

14. ¿Cuál es el HTML correcto para crear un campo de entrada de texto?

(valor 0.24)

a) <textfield>
b) <textinput type="text">
c) <input type="textfield">
d) <input type="text">

Respuesta: d) <input type="text" name= “tipo de dato”/>

15. ¿Cuál es el HTML correcto para hacer una lista desplegable? (valor
0.24)

a) <list>
b) <input type="list">
c) <input type="dropdown">
d) <select>

Respuesta: d) <select>

16. ¿Cuál es el HTML correcto para hacer un área de texto? (valor 0.24)

a) <input type="textbox">
b) <input type="textarea">
c) <textarea>

Respuesta: c)<textarea>

17. ¿Cuál es el HTML correcto para insertar una imagen? (valor 0.24)

a) <img src="image.gif" alt="Mi imagen">

b) <img href="image.gif" alt="Mi imagen">

16
c) <img alt="Mi imagen">image.gif</img>

17
d) <image src="image.gif" alt="Mi imagen">

Respuesta: d) <image src="image.gif" alt="Mi imagen">

18. ¿Cuál es el HTML correcto para insertar una imagen de fondo? (valor
0.24)

a) <body bg="background.gif">
b) <body style="background-image:url(background.gif)">
c) <background img="background.gif">

Respuesta: <body background="fondo.jpg">

19.Los comentarios HTML comienzan con <!-- y terminan con - -> (valor 0.24)

a) Verdadero
b) Falso

Respuesta: a) Verdadero

20. Los elementos de bloque normalmente se muestran sin comenzar una

nueva línea. (valor 0.24)

a) Verdadero
b) Falso

Respuesta: b) Falso

21. ¿Qué elemento HTML define el título de un documento? (valor 0.24)

a) <title>
b) <head>
c) <meta>

RespuestA: A) <title>

22. ¿Qué atributo HTML especifica un texto alternativo para una imagen, si
la imagen no se puede mostrar? (valor 0.24)

18
a) longdesc
b) src
c) alt
d) title

Respuesta: c) alt

23. ¿Qué tipo de documento es correcto para HTML5? (valor 0.24)

a) <!DOCTYPE html>
b) <!DOCTYPE HTML5>
c) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN\"
\"http://www.w3.org/TR/html5/strict.dtd\">

a) Respuesta: a) <!DOCTYPE html>

24. ¿Qué elemento HTML se usa para especificar un pie de página para un
documento o sección? (valor 0.24)

a) <bottom>
b) <footer>
c) <section>

Respuesta: b) <footer>

25. ¿Cuál es el elemento HTML correcto para reproducir archivos de video?

(valor 0.24)

a) <video>
b) <media>
c) <movie>

Respuesta: a) <video>

19
Indicaciones:

Realiza la maquetación del siguiente ejemplo de página: (se aplica la rÚbrica de la

maquetación en código html, valor 18)

Debes tener en cuenta los siguientes requisitos:

● Este ejercicio lo deberás realizar con las etiquetas de HTML5, haciendo uso de
los elementos semánticos de HTML5.
● Deberás, en un bloc de notas, colocar todo el código html5 y
guárdalo con extensión .html
● No es necesario que incluyas los estilos (CSS) para cada elemento en
esta actividad pero sí todo el código HTML5 que da estructura a cada
una de las secciones que se muestran en la imagen de arriba.

20
 Respuesta:

<!DOCTYPE html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>EJEMPLO MAQUETACIÓN EN HTML5</title> <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<!-- Cabecera -->
<header> <img src="Media/ejemplo-logotipo.gif" width="189" height="57" alt="logo" />

<nav>

<div class="menu contenido menu-principal">

<a class= "enlaces" href="">Enlace1 </a>
<a class= "enlaces" href="">Enlace2</a>
<a class= "enlaces" href="">Enlace3</a>
<a class= "enlaces" href="">Enlace4</a>
</div>

</nav>

<h1>EJEMPLO MAQUETACIÓN EN HTML5 - Maqueta #1</h1> </header>

<!-- Contenido -->
<section>
<figure> <img src="Media/Koala.jpg" width="200" height="200" alt="foto" />
<figcaption>Figura: descipción foto</figcaption> </figure>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare sapien ac nibh
vulputate feugiat. Morbi euismod velit sit amet libero volutpat ultrices in quis sem. Sed
sit amet placerat sem. Curabitur vitae lectus nec purus accumsan faucibus. Donec vitae
volutpat tortor. Suspendisse tempor rutrum urna, in consequat est tincidunt vitae. Cras et
ligula at felis placerat tempor. Fusce elementum metus non justo luctus iaculis.</p>

<p>Donec ligula arcu, sagittis lacinia nibh et, consequat gravida turpis. Aenean nec
scelerisque felis. Integer nec odio sed lorem mattis rhoncus quis quis nibh. Praesent non
fringilla nisi. Duis porta placerat mattis. Aenean in mollis odio, at egestas massa. Quisque
in lectus magna. Vestibulum vel faucibus massa, vel varius tortor. Maecenas et laoreet
neque, ut semper neque. Suspendisse aliquet, nisl vel pharetra ultricies, elit felis
molestie sem, ac scelerisque turpis tortor non lacus.</p>
</section>

<!-- Contenido relacionado-->

<aside>
<p>Contenido Relacionado</p>

21
<p>Recibir artículos sobre los siguientes temas: <br/>
<input type="checkbox" name="musica"/> Música<br/>
<input type="checkbox" name="deportes"/> Deportes<br/>
<input type="checkbox" name="cine"/> Cine<br/>
<input type="checkbox" name="libros"/> Libros<br/>
<input type="checkbox" name="ciencia"/> Ciencia</p>
</aside>

<!-- Pie de pagina -->

<footer> <a href="http://www.ejemplocodigo.com">www.ejemplocodigo.com</a> </footer>
</body>
</html>

22
23
Práctica 5.

5. LENGUAJE CSS

Objetivo: Verificar el dominio de implementación de estilos (CSS) sobre el código

html de una página web..

Indicaciones: Pedir subrayar, encerrar en un círculo, o escribir la respuesta que

consideren correcta.

Preguntas:

1. ¿Qué significa CSS? (valor 0.25)

a) Cascading Style Sheets

b) Computer Style Sheets
c) Creative Style Sheets
d) Colorful Style Sheets

Respuesta: a) Cascading Style Sheets

2. ¿Cuál es el HTML correcto para hacer referencia a una hoja de estilo

externa? (valor 0.25)

a) <style src="mystyle.css">
b) <link rel="stylesheet" type="text/css" href="style.css">
c) <stylesheet>mystyle.css</stylesheet>

Respuesta: <LINK href="miestilo.css" rel="stylesheet" type="text/css">

3. ¿En qué parte de un documento HTML es el lugar correcto para hacer

referencia a una hoja de estilo externa? (valor 0.25)

a) En la sección <head>
b) En la sección <body>
c) Al final del documento

Respuesta: En la sección <head>

24
4. ¿Qué etiqueta HTML se utiliza para definir una hoja de estilo interna? (valor
0.25)

a) <css>
b) <script>
c) <style>

Respuesta: c) <style>

5. ¿Qué atributo HTML se usa para definir estilos en línea? (valor 0.25)

a) font
b) styles
c) class
d) style

Respuesta: d) style

6. ¿Cuál es la sintaxis CSS correcta? (valor 0.25)

a) {body;color:black;}
b) body {color: black;}
c) body:color=black;
d) {body:color=black;}

Respuesta: b) body {color: black;}

7. ¿Cómo se inserta un comentario en un archivo CSS? (valor 0.25)

a) /* esto es un comentario */
b) // esto es un comentario
c) // esto es un comentario //
d) ' esto es un comentario

Respuesta: a) /* esto es un comentario */

8. ¿Qué propiedad se utiliza para cambiar el color de fondo? (valor 0.25)

a) bgcolor
b) background-color
c) color

25
 Respuesta: b) background-color

9. ¿Cómo se agrega un color de fondo para todos los elementos <h1>? (valor
0.25)

a) all.h1 {background-color:#FFFFFF;}
b) h1 {background-color:#FFFFFF;}
c) h1.all {background-color:#FFFFFF;}

Respuesta: a) h1 {background-color:#FFFFFF;}

10. ¿Qué propiedad CSS se usa para cambiar el color del texto de un
elemento? (valor 0.25)

a) fgcolor
b) text-color
c) color

Respuesta: c) color

11. ¿Qué propiedad CSS controla el tamaño del texto? (valor 0.25)

a) font-style
b) text-style
c) font-size
d) text-size

Respuesta: c) font-size

12. ¿Cuál es la sintaxis CSS correcta para poner en negrita todos los
elementos <p>? (valor 0.25)

a) <p style=\"text-size:bold;\">
b) p {text-size:bold;}
c) p {font-weight:bold;}
d) <p style=\"font-size:bold;\">

Respuesta: c) p {font-weight:bold;}

26
13. ¿Cómo hacer que cada palabra en un texto comience con una letra
mayÚscula? (valor 0.25)

a) transform:capitalize
b) text-transform:capitalize
c) No puedes hacer eso con CSS
d) text-style:capitalize

Respuesta: first-letter {
text-transform: uppercase;
}

14. ¿Qué propiedad se utiliza para cambiar la fuente de un elemento? (valor

0.25)

a) font-weight
b) font-family
c) font-style

Respuesta: b) font-family

15. ¿Cómo pones el texto en negrita? (valor 0.25)

a) style:bold;
b) font:bold;
c) font-weight:bold;

Respuesta: c) font-weight:bold;

16. ¿Cómo se muestra un borde como este? (valor 0.25)

El borde superior = 10
píxeles El borde inferior = 5
píxeles
El borde izquierdo = 20
píxeles El borde derecho = 1
píxel

a) border-width:10px 1px 5px 20px;

b) border-width:5px 20px 10px 1px;
c) border-width:10px 20px 5px 1px;

27
d) border-width:10px 5px 20px 1px; (valor 0.25)

28
 Respuesta: border-width:10px 1px 5px 20px;

17. ¿Qué propiedad se usa para cambiar el margen izquierdo de un

elemento? (valor 0.25)

a) padding-left
b) margin-left
c) indent

Respuesta: b) margin-left

18. Al usar la propiedad de relleno (padding); ¿Está permitido usar valores

negativos? (valor 0.25)

a) No
b) Sí

Respuesta: a) No

19. ¿Cómo se selecciona un elemento con id 'demo'? (valor 0.25)

a) *demo
b) #demo
c) .demo
d) demo

Respuesta: b) #demo{}

20. ¿Cómo se seleccionan elementos con el nombre de clase 'test'? (valor

0.25)

a) *test
b) .test
c) #test
d) test

RespuestA: B) .test

29
21. ¿Cómo se seleccionan todos los elementos p dentro de un elemento
div? (valor 0.25)

a) div.p
b) div p
c) div + p

a) Respuesta: b) div p

22. ¿Cómo se agrupan los selectores? (valor 0.25)

a) Separe cada selector con un espacio

b) Separe cada selector con un signo más
c) Separe cada selector con una coma

Respuesta: c) Separe cada selector con una coma

23. ¿Cuál es el valor predeterminado de la propiedad posición? (valor 0.25)

a) absolute
b) fixed
c) relative
d) static

Respuesta: d) static

24. ¿Cómo se hace una lista que enumere sus elementos con cuadrados?
(valor 0.25)

a) list-type: square;
b) list: square;
c) list-style-type: square;

Respuesta: c) clist-style-type: square;

30
Indicaciones:

Realiza la maquetación del siguiente ejemplo de página: (se aplica la rÚbrica de la

maquetación en código html y css, valor 36)

● Este ejercicio lo deberás realizar con las etiquetas de HTML5, haciendo uso de
los elementos semánticos de HTML5.
● Deberás, en un bloc de notas, colocar todo el código html5 y
guárdalo con extensión .html
● Lo mismo harás con el código CSS3, deberás guardar en un bloc de
notas el código css3 con extensión .css.
● Guardar ambos archivos, el código html5 y css3, en una misma carpeta.
● Recuerda usar el elemento link para llamar dentro del código html5 los
estilos guardados en el archivo con extensión .css.

-Hay tres imágenes que utilizarás para realizar esta actividad:

Imagen del logo institucional.

https://escuelasdecodigo.cdmx.gob.mx/wp-content/themes/escuelasdecodigo/assets/i
mages/logo.svg

Imagen del vector blanco que se encuentra antes del texto “Aprende a programar”.
https://escuelasdecodigo.cdmx.gob.mx/wp-content/themes/escuelasdecodigo/dist/asse
ts/hero-vector.svg

Imagen paisaje de la Ciudad de México

https://escuelasdecodigo.cdmx.gob.mx/wp-content/themes/escuelasdecodigo/dist/asse
ts/hero.jpg

-El texto alternativo para la primer imagen imagen debe ser “Gobierno de la
Ciudad de México”

31
 Respuesta:

Código HTML5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Escuela de có digo</title>
<enlace rel="preconectar" href="https://fonts.googleapis.com">
<enlace rel="preconectar" href="https://fonts.gstatic.com" crossorigin>
<enlace href="https: //fonts.googleapis.com/css2? family= Bebas+Neue & family= Inconsolata:wght@200 &
family= Oleo+Script &familia= Roboto:peso@100;300 & display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/estilo.css">
</head>

<body>

<!--parte header-->
<header>
<div class="contenido">
<img src="img/logo.svg" alt="logotipo">
</div>
</header>

<div class="linea">

</div>

<nav>

<div class="menu contenido menu-principal">

<a class= "enlaces" href="">Residentes</a>
<a class= "enlaces" href="">Negocios</a>
<a class= "enlaces" href="">Visitantes</a>
<a class= "enlaces" href="">Gobierno</a>
</div>

</nav>

<!--parte hero-->

<div class="hero">
<div class="title">

32
<h1>
<span class="span1">APRENDE A PROGRAMAR</span> <br>
<span class="span2">EN LAS</span>
<span class="span3"><span class="span5">ESCUELA</span> <br> DE CÓ DIGO</span> <br>
<span class="span4">DE LA CDMX </span>
</h1>

</div>
</div>

<section class="contenido">

<h1 class="title_ins">¿Quién se puede escribir? </h1>

<p>
Cualquier persona que quiera aprender a programar có digo y contar con 4-8 horas disponibles a la
semana. <br>
<span class="SpamP">*Menores de edad deben entrar a las instalaciones acompañ adas de un adulto.
</span>
</p>

</section>

</body>
</html>

CÓDIGO CSS
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}

/parte header/

.contenido{
width: 80%;
/* background: rgb(117, 20, 93); */
margin: auto;
}
header {
padding: 10px;
}

33
.menu{
text-align: right;
}
.enlaces{
padding: 12px 20px 12px 20px;
text-decoration: none;
color: rgb(2, 108, 156);
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
}

.linea{
border: 0.5px solid pink;
}
.enlaces:hover{
text-decoration: underline;
border-left: 1px solid greenyellow;
}

/* parte hero*/

.hero{
background: url(../img/imagen.jpg);
height: 360px;
background-repeat: no-repeat;
background-size: cover;
}

h1{
color:aliceblue;
}

.title{
padding: 50px;
margin-left: 150px;
}
.span1{
font-size: 45px;
font-family: Arial, Helvetica, sans-serif;
}

34
 .span2{
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
margin-left: 160px;
}
.span5{
font-size: 70px;
font-family: Arial, Helvetica, sans-serif;
}

/parte section/

.title_ins{
color: #b08f5c;
text-align: center;
padding-top: 20px;
font-size: 23px;
}

p{
color: rgb(26, 75, 26);
font-size: 15px;
text-align: center;
}

.spamP{
color: rgb(43, 95, 43);
font-size: 5px;
}

35
36
37
38
39
40
41