Proyecto 3
1. Crear la página de inicio
● Creamos la carpeta Proyecto3 y dentro un archivo inicio.html.
● Imagina que estás trabajando en el desarrollo de un sitio web para un restaurante.
● La tarea es crear una página de inicio, en la que pondremos el nombre del
restaurante y una breve descripción del sitio.
● Requisitos:
○ Un título (<h1>) que muestre el nombre del restaurante.
○ Un párrafo (<p>) que describa el tipo de comidas que se sirven en el
restaurante. Dentro del párrafo, utiliza al menos tres de las siguientes
etiquetas: <strong>, <em>, <u>, <mark>, <small>, <sub>, <sup>.
○ Usa la etiqueta <br> para agregar un salto de línea donde sea necesario.
○ Incluye la etiqueta <time> para mostrar la fecha de creación de la página
(puede ser una fecha ficticia).
○ Utiliza estilos de texto personalizados mediante la etiqueta <span> para
destacar una palabra o frase en el párrafo.
2. Crear la página del menú
● Creamos el archivo menu.html
● Utilizando elementos de texto, encabezados, párrafos y enlaces vamos a
crear nuestra página con el menú del día. Va a tener el siguiente aspecto:
3. Crear la página de contacto
● Creamos otro archivo al que nombraremos contacto.html.
● Va a tener el siguiente aspecto (los enlaces de teléfono y email que sean
enlaces con sus palabras clave):
4. Modificar la página de inicio
● Modificamos la página de inicio para que tenga la siguiente información:
○ Breve descripción del restaurante (qué tipo de comidas ofrece, la
experiencia, su historia…)
○ El horario del restaurante.
○ Enlace al menú y que ponga la información de este (que incluye, precio…).
○ Enlace a la página de contacto.
○ Enlaces a las redes sociales (poner que os abra en un enlace la página
principal de facebook y en otro enlace que os abra la página de instagram).
○ Añadimos un enlace a la página de inicio en las páginas del menú y en la
página de contacto.
5. Crear la página de la carta
● Creamos el archivo carta.html
● En esta página creamos varios platos disponibles en nuestra carta del restaurante
(mínimo 5 platos).
● Por cada plato mostramos una breve información (ingredientes, alérgenos
alimentarios…), su precio y una imagen de ese plato.
● Las imágenes van estar en una carpeta aparte, a la que llamaremos img.
● Añadimos un enlace a la página de inicio.
● Añadimos un enlace a la carta en la página de inicio.
6. Entregar el proyecto
● Creamos un .zip con la carpeta Proyecto3.
● Añadimos esa carpeta a Google Drive y le damos permisos al profesor.
7. Añadir elementos de contenido
● Ahora lo que tenemos que hacer es estructurar bien las páginas con sus elementos
de contenido correctos.
● Para ello vamos a hacer un menú de navegación con los enlaces a otras páginas.
Este menú de navegación lo vamos a añadir a una cabecera. Esta cabecera además
va a tener una imagen del logo del restaurante. Es decir, voy a tener una cabecera
que va a tener el menú de navegación con un enlace a la página de menú, otro
enlace a la página de contacto, otro enlace a la página de carta y un último enlace a
la página de inicio, que este último va a ser el logo del restaurante. Insertamos esta
cabecera en todas las páginas del proyecto.
● Añadimos un pie de página que va a ser igual en todas las páginas del proyecto. En
el ponemos lo siguiente: 2023 © Nombre de la empresa.
● Estructuramos bien el contenido principal de la página usando (main, section, div…).
De momento no es necesario tener un menú lateral.
● Guardamos el proyecto con el mismo nombre del .zip y lo sobreescribimos en el
drive.
