Está en la página 1de 2

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página web semántica</title>
<style>
/* Estilos generales */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

/* Estilos para la barra de navegación */


header {
background-color: #f8f9fa;
padding: 20px;
}

header ul {
list-style-type: none;
padding: 0;
}

header ul li {
display: inline;
margin-right: 10px;
}

header ul li a {
text-decoration: none;
color: #333;
}

/* Estilos para el encabezado y el pie de página */


main {
padding: 20px;
}

main h1 {
color: #333;
}

main p {
color: #666;
}

/* Estilos para el pie de página */


footer {
background-color: #f8f9fa;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Logo de la empresa</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<h1>Encabezado principal</h1>
<p>Contenido principal de la página web...</p>
</main>
<footer>
<p>&copy; 2022 Empresa XYZ. Todos los derechos reservados.</p>
</footer>
</body>
</html>

También podría gustarte