Actividad 12

 Unidad de aprendizaje: Desarrollo de páginas web estáticas 

Práctica  12. Definición de propiedades para el control del aspecto de los enlaces usando hojas de estilos en cascada. 

Propósito de la práctica: Mejorar el aspecto de los enlaces diseñados mediante el uso de hojas de estilos en cascada para su desarrollo. 

Una cafetería local quiere mejorar su página web. Actualmente solo tiene enlaces simples, pero necesita convertirlos en un menú de navegación atractivo, similar a botones, que funcione tanto en forma horizontal como vertical.

Instrucciones

  1. Crea una carpeta de trabajo con el nombre menu-cafeteria y dentro de ella genera dos archivos: index.html y estilos.css.
  2. En el archivo index.html, escribe la estructura básica de una página web e incluye un encabezado (header) con un título y un menú de navegación (nav).
  3. Dentro de la etiqueta <nav>, agrega cuatro enlaces (<a>) con los siguientes nombres:
    • Inicio
    • Menú
    • Promociones
    • Contacto
  4. Vincula el archivo estilos.css a tu documento HTML utilizando la etiqueta <link>.
  5. En el archivo CSS, agrega bordes a las etiquetas header, h1, nav y a para observar cómo se comportan visualmente los elementos de bloque y en línea.
  6. Observa el resultado en el navegador y escribe una breve conclusión sobre:
    • ¿Qué elementos ocupan todo el ancho?
    • ¿Cuáles se colocan en la misma línea?
  7. Modifica la apariencia de los enlaces (a) agregando:
    • Espacio interno (padding)
    • Espacio externo (margin)
    • Eliminación del subrayado (text-decoration)
    • Color de texto
  8. Ajusta los enlaces para que comiencen a parecer botones de navegación.
  9. Aplica la pseudoclase :hover a los enlaces para que cambien de color cuando el cursor pase sobre ellos.
  10. Personaliza el efecto hover agregando:
    • Color de fondo
    • Cambio de color de texto
  11. Mejora el diseño de los botones agregando propiedades como:
    • Bordes (border)
    • Esquinas redondeadas (border-radius)
  12. Verifica que el menú se muestre de forma horizontal y centrada en la página.
  13. Cambia la propiedad display de los enlaces a block para transformar el menú horizontal en un menú vertical.
  14. Observa los cambios y escribe una breve explicación sobre:
    • ¿Qué efecto tuvo cambiar display?
    • ¿Cuál menú te parece más útil y por qué?
  15. Realiza una versión final del menú con un diseño libre, utilizando colores y estilos personalizados para la cafetería.
  16. Guarda evidencias (capturas o archivo final) de:
    • Menú horizontal
    • Menú vertical

 

Comentarios

Publicar un comentario

Entradas populares de este blog

CSS

Imagen
   Uso de elementos CSS en HTML ¿Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas. Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes. Al crear una página web, se utiliza en primer lugar el lenguaje HTML, para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza...
Leer más

Repaso de etiquetas HTML

  Resumen de etiquetas HTML para poner texto en una web   Resaltar textos   <strong> Texto de mayor importancia</strong> Normalmente devuelve el texto en negrita, pero fundamentalmente se usa para dar mayor importancia a ciertas palabras o frases dentro de un texto.    <b>texto en negrita</b> La etiqueta que convierte el texto en negrita, simplemente. Para darle a un texto mayor importacia es más correcto usar <strong>.   <em> texto en cursiva </em> Crea énfasis en el texto seleccionado, normalmente mostrando el texto en cursiva. Es una manera de resaltar parte del texto. Usa esta etiqueta en lugar de <i>.   <h1> títulos y encabezados</h1> Crea títulos, para dar más o menos importancia a frases de tu texto y establecer orden dentro de la narración. Hay 6 niveles de mayor a menor importante, de H1 a H6. Estas etiquetas título son importantes para el SEO.   <big>texto más grande</b...
Leer más

Actividad 11

Imagen
 Una cafetería local quiere publicar su menú en su página web. Actualmente, el menú está organizado en una tabla HTML, pero los clientes se quejan de que: La tabla se ve desordenada El texto está mal alineado Es difícil distinguir los precios No hay separación clara entre los productos El diseño no es atractivo El dueño te contrata como desarrollador web para mejorar la presentación usando CSS . Situación inicial (tabla sin estilo) <table> <tr><th> Producto </th><th> Precio </th><th> Descripción </th></tr> <tr><td> Café </td><td> $25 </td><td> Caliente </td></tr> <tr><td> Té </td><td> $20 </td><td> Natural </td></tr> <tr><td> Pastel </td><td> $30 </td><td> Chocolate </td></tr> </table> Problema a resolver Diseña los estilos CSS en un archivo externo, necesar...
Leer más