1

CONSTRUCCION FRONTEND

GA5-220501123-AA2-EV02

Construcción de servicios-mocks y maquetas web del frontend

Aprendiz:

Daniela Martínez Sánchez.

Ficha: 2758542

Instructor:
Francisco Arnaldo Vargas Bermudez.

Servicio Nacional de Aprendizaje – SENA

Técnico en Procesamiento de Pruebas de Software.
Modalidad Virtual.
Febrero de 2024.
 2
CONSTRUCCION FRONTEND

1. Describa los elementos (apertura de la etiqueta, cierre de la etiqueta, atributos y

contenido) de una etiqueta HTML.

Apertura de la etiqueta: <nombre>

Cierre de la etiqueta: </nombre>
Atributos: Se encuentran dentro de la etiqueta y proporcionan información adicional como:
<a href="https://www.ejemplo.com">Enlace</a>
Contenido: Información que se encuentra entre la etiqueta de apertura y cierre. Ejemplo:
<p>Hola Mundo</p>

2. Explique cuál es la etiqueta para el título principal, dentro del contenido de una
página web y cuál es la diferencia entre esta y la etiqueta de título principal del
documento o página web.
Etiqueta para el Título Principal del Contenido: <h1> a <h6>. Desde el 1 hasta el 6,
predefiniendo al tamaño del encabezado. Así, <h1> sería el encabezado más grande mientras que
<h6> sería el más pequeño.
Etiqueta para el Título Principal del Documento: <title> especifica el título del documento o
página web.

3. Con un ejemplo en código HTML5 describa la estructura básica de un documento

web.

.
 3
CONSTRUCCION FRONTEND
4. Qué ocurre cuando se pasa de <h1> a una etiqueta <h6>

Cuando se pasa de <h1> a <h6>, se reduce el nivel de importancia del encabezado. <h1>
es el encabezado más importante, mientras que <h6> es el menos importante.

5. ¿Por qué se utilizan las etiquetas <ol> y <ul>, y cuáles son sus diferencias?

<ol> (Ordered List): Se utiliza para crear listas ordenadas donde hay números o letras.
<ol>
<li>Lista ordenada</li>
<li>Lista ordenada</li>
</ol>

<ul> (Unordered List): Se utiliza para crear listas desordenadas donde hay viñetas.
<ul>
<li>Lista sin orden</li>
<li>Lista sin orden</li>
</ul>

6. Al momento de diseñar una página web que sirva como capa de presentación para
una futura aplicación se debe tener en cuenta un lenguaje de maquetación como
HTML, con base en esto ¿cuál es la utilidad del atributo "class"?

El atributo "class" se utiliza para asignar una o varias clases a un elemento HTML. Permite
aplicar estilos CSS o identificar elementos para interacciones con JavaScript. Por ejemplo:
html
<p class="destacado">Este es un párrafo destacado.</p>
Css
.destacado {
color: red;
font-size: 18px;
}
 4
CONSTRUCCION FRONTEND
7. ¿Qué especifica la etiqueta <thead> ?

La etiqueta <thead> se utiliza para agrupar las filas de encabezado en una tabla HTML.
Especifica que las filas contenidas son parte del encabezado de la tabla.

8. ¿Qué especifica la etiqueta <input> y que tipos de input existen?

La etiqueta <input> se utiliza para crear controles de entrada, se usa para crear controles
interactivos para formularios para recibir datos del usuario. Algunos tipos de input son:
text: Campo de texto.
password: Campo de contraseña.
radio: Botón de opción.
checkbox: Casilla de verificación.
submit: Botón de envío de formulario, etc.

9. Al utilizar la etiqueta <b> HTML coloque el texto en negrita, no obstante, existen

otras opciones, por ello, escriba el código CSS que permitiría colocar un texto en
negrita sin emplear esta etiqueta o la etiqueta <strong>
css
.negrita {
font-weight: bold;
}

html
<p class="negrita">Este texto está en negrita.</p>

10. Escriba la sintaxis CSS correcta para cambiar la fuente todos los elementos <p> a
negrita, tipo de fuente y el tamaño:

p{
font-weight: bold;
font-family: 'Arial', sans-serif;
 5
CONSTRUCCION FRONTEND
font-size: 16px;
}
 6
CONSTRUCCION FRONTEND

I. Bibliografía
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics
https://developer.mozilla.org/es/docs/Web/HTML/Element/input
https://www.juntadeandalucia.es/averroes/centros-
tic/11000289/helvia/aula/archivos/repositorio/0/222/html/texto.html#:~:text=Las%20etiquetas%
20y%20%3C,sobre%20el%20resto%20del%20texto.