A continuación, te detallo paso a paso cómo escribir el código HTML y CSS proporcionado, explicando qué debes escribir, dónde colocarlo y cómo afecta a la estructura del sitio web. El objetivo es replicar la página mostrada en la imagen.
Paso 1: Crear el documento HTML básico
- Qué escribir:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> - Dónde colocarlo: En un archivo nuevo llamado
index.html. - Efecto en la estructura: Esto define el documento como una página HTML5, establece el idioma en español, configura la codificación de caracteres y hace que la página sea responsive. El
<body>será el contenedor principal de todo el contenido visible.
Paso 2: Agregar el estilo CSS dentro del <head>
- Qué escribir:
<style> body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; } nav { background: dodgerblue; margin: 0; height: 30px; display: flex; align-items: center; } nav ul { display: flex; list-style: none; justify-content: center; padding: 0; margin: 0; } nav ul li { margin-right: 150px; } nav ul li:last-child { margin-right: 0px; } nav :nth-child(1) { margin-left: 2px; } nav ul li a { color: white; text-decoration: none; } section { display: flex; justify-content: center; align-items: center; } section div { width: 100%; display: flex; justify-content: center; align-items: center; } section div img { width: 50%; height: auto; object-fit: contain; } .table-container { position: absolute; bottom: 420px; left: 0; right: 0; margin: 0 auto; width: 97%; text-align: center; } table { border-collapse: collapse; width: 100%; margin: 0; } table, th, td { border: 1px solid black; } th, td { padding: 10px; text-align: center; } </style> - Dónde colocarlo: Dentro de la etiqueta
<head>después de<title>Document</title>. - Efecto en la estructura: Este CSS define el diseño y la apariencia:
bodyusa flexbox para apilar elementos verticalmente y ocupar toda la altura de la pantalla.navcrea una barra de navegación azul con enlaces centrados.sectionalinea el logo en el centro de la parte superior..table-containerposiciona la tabla de forma absoluta debajo del logo.tableestiliza la tabla con bordes y centrado de texto.
Paso 3: Agregar la sección del logo
- Qué escribir:
<section> <div> <img src="https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1224,h=341,fit=crop/AQEEDM8ELNiRa5pG/logolistogrande-dWxxBjwv6Qh4xBbr.png" alt="Logo Acali"> </div> </section> - Dónde colocarlo: Dentro de
<body>al inicio. - Efecto en la estructura: Esto añade el logo en la parte superior de la página. La sección usa flexbox para centrar el logo horizontalmente, y el CSS limita su ancho al 50% de la pantalla.
Paso 4: Agregar la barra de navegación
- Qué escribir:
<nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Asistencia</a></li> <li><a href="#">Ventas</a></li> <li><a href="#">Configuración</a></li> </ul> </nav> - Dónde colocarlo: Dentro de
<body>después de la sección del logo. - Efecto en la estructura: Crea una barra de navegación horizontal con cuatro enlaces. El CSS los centra, les da un margen entre ellos y los estiliza con color blanco y sin subrayado.
Paso 5: Agregar la tabla de datos
- Qué escribir:
<div class="table-container"> <table> <thead> <tr> <th>Nombre</th> <th>Apellido</th> <th>Edad</th> <th>Ciudad</th> <th>Dirección</th> </tr> </thead> <tbody> <tr> <td>Juan</td> <td>Pérez</td> <td>30</td> <td>Madrid</td> <td>Calle Falsa 123</td> </tr> <tr> <td>María</td> <td>Gómez</td> <td>25</td> <td>Barcelona</td> <td>Avenida Siempre Viva 456</td> </tr> </tbody> </table> </div> - Dónde colocarlo: Dentro de
<body>después de la barra de navegación. - Efecto en la estructura: Añade una tabla con encabezados y dos filas de datos. El CSS la posiciona absolutamente debajo del logo y le da un diseño con bordes y celdas centradas.
Resumen del impacto en la estructura
- El documento sigue una estructura vertical: logo en la parte superior, barra de navegación debajo y tabla más abajo.
- El uso de
position: absoluteen.table-containerpermite que la tabla se coloque a una distancia fija del fondo, pero podría superponerse si el contenido cambia de tamaño. - El flexbox en
body,nav, ysectionasegura un diseño centrado y organizado.
Paso 6: Guardar y probar
- Guarda el archivo
index.htmly ábrelo en un navegador. - Verifica que todo se muestre como en la imagen. Ajusta el CSS (por ejemplo,
bottomen.table-container) si es necesario.
¡Con esto tienes tu página web lista!
Curso de Frontend Developer
0 Comentarios
para escribir tu comentario
