Diseño y elaboración de páginas Web

  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 Crea una carpeta de trabajo con el nombre menu-cafeteria y dentro de ella genera dos archivos: index.html y estilos.css . 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 ). Dentro de la etiqueta <nav> , agrega cuatro enlaces ( <a> ) con los siguientes nombres: In...

 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...

  Propiedades CSS de las tablas Las propiedades CSS de las tablas son las que nos permiten controlar los estilos de los títulos de la tabla, el tamaño de las celdas, las filas y las columnas o espaciado entre los bordes.  Anchura de tabla y de celda La primera decisión que hay que tomar es qué anchura debe tener la tabla. La opción por defecto del navegador es la misma que establecer table {width: auto; }, que da como resultado que la tabla se extienda a lo ancho del contenido. Esto, en general, queda desordenado. A)    Alineación del texto   La tabla aún es un poco confusa de leer, de manera que vamos a especificar que la alineación del texto sea un poco más clara. La norma adicional que se muestra a continuación alineará a la izquierda los encabezamientos para que encajen con el contenido (por defecto, los navegadores centran los títulos de las tablas): Ahora mismo, todas las celdas están alineadas verticalmente en el centro. Si lo prefieres, puedes defi...