GRADO 10 MEDIA TÉCNICA Aplicaciones WEB Básicas.

 

APLICACION MENÚ CON BOOTSTRAP.

1.    Crear la carpeta raíz llamada "AppWebFunciones"

2.    Dentro de AppWebFunciones, crear las siguientes carpetas:

·         html

·         css

·         js

·         img

3.    Dentro de la carpeta html, crear los siguientes archivos:

·         index.html (página principal)

·         suma.html

·         resta.html

·         multiplicacion.html

·         division.html

4.    En index.html:

·         Agregar las etiquetas HTML básicas (doctype, html, head, body, etc)

·         Enlazar Bootstrap CSS en el head

·         Crear una barra de navegación con Bootstrap

·         Agregar un dropdown para "Operaciones" que linkee a cada página de operación

·         Enlazar Bootstrap JS antes de cerrar el body

5.    En cada página de operación (suma.html, etc):

·         Agregar formulario con inputs para los números y botón de calcular

·         Agregar lógica JavaScript para realizar la operación correspondiente

6.    En la carpeta CSS, crear el archivo estilos.css para agregar estilos personalizados

7.    En la carpeta JS, crear archivos JavaScript para separar lógica si es necesario

8.    En la carpeta img agregar imágenes si se desea

9.    Probar que las páginas y navegación funcionen correctamente

APLICACION MENÚ SIN BOOTSTRAP.

1. Crea un documento HTML básico con el título "Manu.html".
2. Dentro del body crea un div con la clase "caja-principal". Este será el contenedor principal.
3. Dentro de "caja-principal" crea 3 divs, uno con clase "caja1", otro con "caja2" y el último con "caja3".
4. En la hoja de estilos CSS define las siguientes propiedades para "caja-principal":
   • width: 100%
   • height: 500px
   • display: flex
   • flex-direction: row
   • justify-content: space-evenly
   • align-items: center
5. Para "caja1" define:
   • width: 650px
   • height: 250px
   • display: flex
   • flex-direction: row
   • justify-content: space-evenly
   • align-items: center
6. Para "caja2" y "caja3" define el ancho, alto y color de fondo deseado.
7. Dentro de "caja1" pon 3 enlaces <a> con los textos "REGISTRAR", "LOGIN", "SALIR".
8. Da estilos a los enlaces:
   • background-color
   • color de texto
   • padding
   • text-decoration: none
9. Agrega hover a los enlaces para resaltar al pasar el mouse.
10.  Revisa que los elementos se posicionen como deseas con Flexbox. Ajusta justify-content y align-items según sea necesario.
11. Personaliza agregando bordes, colores, fuentes, etc.

Esa sería la guía general. Flexbox permite distribuir fácilmente elementos dentro de un contenedor. La clave está en definir cómo se comportan los "hijos" con las propiedades de sus "padres".

D        Deben de llegar a esto:

Archivo HTML.

El             Estilo CSS: