HTML+CSS

MetaWeb contiene doce ficheros y pesa 41,5 kB.

index.html

Es el fichero principal de toda página web y debe llamarse así. Para leer ese fichero en cualquier web, solo hace falta ir a la web en cuestión, clicar botón derecho y seleccionar "Código fuente la página".

Líneas de texto para crear el fichero "index.html" de esta web:

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>MetaWeb</title>
  <link rel="stylesheet" href="estilo.css">
</head>

<body>

<header>
	<ul class="topnav">
		<li><a class="active" href="#">Inicio</a></li>
		<li class="dropdown"><a href="#">Ítem 1</a>
			<div class="dropdown-content">
			<a href="#">Sub 1</a>
			<a href="#">Sub 2</a>
			</div>
		<li><a href="#">Ítem 2</a></li>
		</li>
		<li class="right"><a href="#">Ítem 3</a></li>
	</ul>
</header>

  <h1>h1 o cabecera uno</h1>
  <p>Esto es un párrafo.</p>

  <h2>h2 o cabecera dos</h2>
  <p>Esto es otro párrafo.</p>

<footer>
<p>Esto es un pie de página centrado y en letra más pequeña.</p>  
</footer>

</body>
</html>

Fichero CSS

Es otro fichero de texto pero la extensión del documento es CSS. A este fichero se le puede dar el nombre que queramos y tiene que ir enlazado des del "index.html". Para consultarlo, solo tenemos de clicar en el enlace del estilo que se situa en el "head" de la página "index.html".

Líneas de texto para crear el fichero "estilo.css" de esta web:

body {
  margin: 0 auto;
  max-width: 42em;
  background: #E5E4E2;
  color: #3B3C36;
  font-family: sans-serif;
  font-size: 1.4rem;
}

footer {
  text-align: center;
  font-size: 0.9em;
  border-top: 2px solid #3B3C36;
  margin-top: 1rem;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover:not(.active) {
  background-color: #111;
}

ul.topnav li a.active {
  background-color: #04AA6D;
}

ul.topnav li.right {
  float: right;
}

@media screen and (max-width: 600px) {
  ul.topnav li.right, ul.topnav li {
    float: none;
  }
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

Esta web se inspira de un tutorial de W3Cschools:
CSS Horizontal Navigation Bar

Otros ejemplos

En MiniWebs se recogen ejemplos de web sencilla y MetaWeb es una de ellas.
Más MiniWebs