- Lenguajes de marcas y sistemas de

gestión de información -

Centro Integrado de Enseñanzas Reglada

a Distancia

UT2 - Utilización de lenguajes de marcas

en entornos web

Autor: Alejandro Expósito Revenaque

Curso 2023/2024
Lenguajes de marcas y sistemas de gestión de información Tarea 02
Alejandro Exposito Revenaque Curso 2023/24

ÍNDICE

EJERCICIO 1 2
EJERCICIO 2 4
EJERCICIO 3 7

1
Lenguajes de marcas y sistemas de gestión de información Tarea 02
Alejandro Exposito Revenaque Curso 2023/24

EJERCICIO 1
Diseñar una página web para la presentación de las recetas de cocina de un restaurante y
aplicarlo a la siguiente receta de cocina. Añade algunas imágenes apropiadas.

Este documento HTML tiene una estructura visual, de manera general, que consta de tres
partes. Una cabecera mostrando el nombre del restaurante, una lista con los ingredientes y
una lista numerada con los pasos a seguir.

Estructura detallada:

- Incluye declaración DOCTYPE con etiqueta html.

- Sección head con:
- etiqueta meta: para declarar codificación UTF-8
- etiqueta title: para mostrar el nombre del restaurante en la pestaña del
navegador
- etiqueta link: para referenciar el archivo de estilo y diseño de la página.

- Dentro de la sección body hay 5 partes, una cabecera, las siguientes tres (título del
plato, ingredientes y pasos a seguir) encapsuladas cada una en una etiqueta div. y
por último la imagen del plato:
- Etiqueta header donde se muestra:
- La cabecera de la posible página principal del restaurante con el
nombre
- Etiqueta nav: mostrando un menú con otras paginas de información
del restaurante.

- Primer div:
- Etiqueta h2: título del plato
- Etiqueta p: breve comentario sobre el plato.
- Segundo div:
- Etiqueta h3: título de lista ingredientes
- Etiqueta ul: Para listar los ingredientes de manera simple con etiqueta
li.
- Tercer div:
- Etiqueta h3: título de lista de los pasos a seguir.
- Etiqueta ol: para que los pasos aparezcan enumerados con etiqueta
li.
- Etiqueta img: con atributo src para mostrar una imagen del plato.

2
Lenguajes de marcas y sistemas de gestión de información Tarea 02
Alejandro Exposito Revenaque Curso 2023/24

Se muestra el resultado de la página web sin aplicar el código css.

Estilo y diseño

Referenciamos en el head con la etiqueta link el archivo ejercicio1.css el cual dará estilo a la
página web. Las unidades aplicadas en todo el archivo ejercicio1.css, son aplicadas para
obtener un diseño escalable y adaptable de la página para diferentes dispositivos.

Para etiqueta body:

- Se configura width all 100% (para ocupar todo el ancho del navegador)
- un background-color verde claro.

Etiqueta header:
- Elegimos un background-color para indicar la cabecera principal que aparece
siempre en otras páginas del restaurante.
- Text-align center.

Etiqueta ul perteneciente a nav:

Se aplica un diseño horizontal al menú que aparece dentro de la etiqueta nav.
- Display: flex; (Los elementos dentro de la caja nav, dependiendo de su
tamaño, se posicionan lo más juntos que se pueda)
- padding: 0 0 1rem 0 (eliminamos todos los márgenes interiores menos el
inferior.)
- justify.content: space-around (para que se ajusten los elementos ocupando el
ancho de la página.)

Etiquetas div diseño general para las cajas:

- Border: 10px inset black;
- Text-align: left (para romper la norma del body y que el texto aparezca a la izquierda)

3
Lenguajes de marcas y sistemas de gestión de información Tarea 02
Alejandro Exposito Revenaque Curso 2023/24
- Se configuran los diferentes márgenes exteriores e interiores de las cajas para
separarlas entre ellas y el texto esté separado del borde de las mismas.

Etiquetas h2, h3 se les atribuye class=”titulo”:

- Cada etiqueta mantiene su dimensión, pero se les da un color diferente al texto.

Etiqueta p dentro del primer div:

- Se configuran los márgenes del texto dentro de la caja
etiqueta img:
- se le atribuye una id=”sopa” para aplicar un diseño único a la imagen

Resultado Visual:

4
Lenguajes de marcas y sistemas de gestión de información Tarea 02
Alejandro Exposito Revenaque Curso 2023/24

EJERCICIO 2
Diseñar y codificar una página web personal.

Este documento HTML tiene una estructura visual, de manera general, que consta de tres
partes. Una cabecera indicando el nombre de la persona de la web personal, un apartado
lateral con fotografía y links de interés, el apartado central describiendo la persona y su
experiencia y por último el pie reservando los derechos de copyright.

Estructura detallada

- Incluye declaración DOCTYPE con etiqueta html.

- Sección head con:
- etiqueta meta: para declarar codificación UTF-8.
- etiqueta title: para mostrar el nombre de la página personal en la pestaña del
navegador .
- etiqueta link: para referenciar el archivo css para el estilo y diseño de la
página.

- Dentro de la sección body hay 4 partes, una cabecera, una barra de navegación,
una columna lateral con fotografia y enlaces de interes, una parte central donde se
exponen las secciones y sus artículos y por último, el footer.
- Etiqueta header donde se muestra:
- etiqueta h1: Nombre o título principal en la cabecera de todas las
página que pueda tener el proyecto.
- Etiqueta nav: mostrando una barra de navegación referenciando a
las palabras de las secciones de la pagina.

- etiqueta div: (caja principal) con:

- etiqueta aside (columna izquierda) con:
- etiqueta h3: enunciado de fotografia .
- etiqueta img: fotografia de la persona.
- etiqueta h3: Enunciado de los enlaces externos.
- etiqueta ul: lista de los enlaces.

- etiqueta div (incluido en el div principal) con:

- etiqueta section: encapsula cada sección nombrada en la
barra del navegador. Incluye:
- etiqueta h2: título de la sección.
- etiqueta article: inluye:
- etiqueta h4: titulo del articulo.
- etiqueta p : párrafo descriptivo.

- etiqueta footer: Indicador de derechos reservados del autor.

5
Lenguajes de marcas y sistemas de gestión de información Tarea 02
Alejandro Exposito Revenaque Curso 2023/24

Estilo y diseño

Referenciamos en el head con la etiqueta link el archivo ejercicio1.css el cual dará estilo a la
página web. Las unidades aplicadas en todo el archivo ejercicio1.css, son aplicadas para
obtener un diseño escalable y adaptable de la página para diferentes dispositivos.

Para etiqueta body se aplica una configuración standard de fuente y dimensión.

- Etiqueta header, footer: se aplica color y un alineado centrado.

- etiqueta nav: la parte más relevante es la posición de los elementos de la lista en
horizontal.
- nav ul {
list-style: none; (borrar el formato de tipo lista)
padding: 10px; (margen interior entre elementos)
margin: 0; (margen exterior a 0)
display: flex; (para que los elementos se puedan posicionar
horizontalmente)
justify-content: space-around; (para que los elementos ocupen el
ancho de la pagina).
}
- Class=”transicion” se aplica a los elementos un hover de cambio de color. Estos
son los de la barra de navegación, y a al nombre de las secciones a los cuales
hacen referencia.
- .transicion{
transition: color 0.3s;
}

.transicion:hover{
color: red;
}

- etiqueta div se aplica el atributo class=”principal”:

.principal {
display: flex;
(para que los elementos en su interior puede ajustarse flexiblemente)
}

- etiqueta aside:
- Un width: 20%( proporción que ocupa la columna)

6
Lenguajes de marcas y sistemas de gestión de información Tarea 02
Alejandro Exposito Revenaque Curso 2023/24

- Para la etiqueta img se aplica el atributo class=”foto”, para aplicar un hover de

dimensión.
.foto{
transition: transform 0.5s;
}

.foto:hover {
transform: scale(1.8);
}

- Para las etiquetas section:

- Se aplica para su posicionamiento:

div section{
flex: 1;
display: flex;
flex-direction: column;
padding: 10px 20px 0px 0px;
margin: 0px 0px 20px 20px;
}
- Se aplican distintas unidades de márgenes interiores y exteriores a las
etiquetas dentro de section.

7
Lenguajes de marcas y sistemas de gestión de información Tarea 02
Alejandro Exposito Revenaque Curso 2023/24

EJERCICIO 3
Crear un formulario que realice una petición de reserva de un hotel con las siguientes
características:
1. Un campo para introducir cada uno de los siguientes datos: nombre, apellidos,
teléfono de contacto, e-mail, número de noches.

Se utilizan labels para indicar que información deben de introducir, y el tipo de

input, correspondientes a la información que se debe introducir, para establecer
restricciones si los datos no cumplen una mínima coherencia. También tienen
configurado el atributo required en todos los campos, para que antes de enviar el
formulario no quede ningún campo sin rellenar.

En nombre y apellidos es de tipo texto.

En teléfono el input es de tipo tel.
En input de email es de tipo email.
En input de noche es de tipo number, y tiene restricción para elegir del 1 al 100.

2. Dos menús desplegables para recoger la fecha de entrada (día/mes/año) y la

fecha de salida (día/mes/año)

8
Lenguajes de marcas y sistemas de gestión de información Tarea 02
Alejandro Exposito Revenaque Curso 2023/24
3. Un botón de radio para elegir entre habitación simple, doble o matrimonio.

Los inputs en esta sección son de tipo radio y con el atributo value para cuando
se envie el formulario indique el valor elegido de las diferentes opciones. En este
tipo de inputs dentro de una misma caja nada mas deja escoger una opción.

4. Dos campos de selección múltiple (checkbox) que permita al usuario indicar si

desea desayuno, comida, cena y/o cama supletoria.

En esta sección los inputs el atributo type es definido como checkbox y como en
el caso anterior, cada input está atribuido un valor pero permitiendo escoger más
de una opción.

5. Una caja de texto donde se puedan dejar comentarios.

Este input se configura con la etiqueta textarea. Proporciona la posibilidad de

configurar el espacio deseado para que se pueda escribir un texto.

9
Lenguajes de marcas y sistemas de gestión de información Tarea 02
Alejandro Exposito Revenaque Curso 2023/24

6. Un botón para limpiar el formulario y otro para enviarlo.

Se introducen con la etiqueta button y para es enviar es de tipo submit y para

resetear el formulario o borrar el contenido es de tipo reset.

7. Utiliza etiquetas semánticas (Header, nav, section, article, aside, footer, div, p,
etc..) para organizar la página (No es recomendable el uso de tablas para
colocar/estructurar la página).

Estructura de la pagina formulario

Un head estándar con codificación UTF-8, título para la pestaña en el navegador y el link
para el archivo css.

En el body encontramos el título del formulario.

Debajo del título encontramos la etiqueta form para crear el formulario. Esta etiqueta
delimita los elementos que componen el formulario y permite especificar el comportamiento
del formulario, como el script que manejará los datos recopilados y el método de envío de
esos datos.

El formulario está dividido por sections. Cada sección recoge diferentes tipos de datos
especificados en los apartados anteriores,

Cada sección tiene un título y un div para crear las cajas para cada label y su respectivo
tipo de input.

Estilo y diseño.

Cada sección ha sido ajustada la dimensión de sus márgenes interiores y exteriores. Con la
capacidad de adaptarse al tamaño de la pantalla.
Esta página ha sido diseñada principalmente para dispositivos móviles, por el detalle de
dejar un espacio en blanco en el lateral derecho para hacer scroll.

10
Lenguajes de marcas y sistemas de gestión de información Tarea 02
Alejandro Exposito Revenaque Curso 2023/24

11