prompter: Crea un template sencillo de una pagina web con html, css y javascript

assistant: Claro, aquí está un template básico de una página web que incluye HTML, CSS y JavaScript:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mi página web</title>
    <link rel="stylesheet" type="text/css" href="estilos.css">
  </head>
  <body>
    <header>
      <h1>Bienvenido a mi página web</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#acerca-de">Acerca de</a></li>
        <li><a href="#contacto">Contacto</a></li>
      </ul>
    </nav>
    <main>
      <section id="inicio">
        <h2>Inicio</h2>
        <p>Bienvenido a mi página web. Aquí podrás encontrar información sobre mí y mis proyectos.</p>
      </section>
      <section id="acerca-de">
        <h2>Acerca de</h2>
        <p>Soy un apasionado por la tecnología y el desarrollo web. Me encanta aprender y crear cosas nuevas.</p>
      </section>
      <section id="contacto">
        <h2>Contacto</h2>
        <p>Si tienes alguna pregunta o sugerencia, no dudes en contactarme a través de mi correo electrónico: <a href="mailto:tu-correo@ejemplo.com">tu-correo@ejemplo.com</a>.</p>
      </section>
    </main>
    <footer>
      <p>&copy; 2023 Tu nombre</p>
    </footer>
    <script src="script.js"></script>
  </body>
</html>

CSS:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

nav {
  background-color: #eee;
  padding: 10px;
  text-align: center;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  color: #333;
  text-decoration: none;
}

main {
  padding: 20px;
}

section {
  padding: 20px;
}

footer {
  background-color: #333;
  color: #fff;
  padding

JavaScript:

<script>
  // Declara una variable numérica
  var num = 5;
  
  // Declara una función que muestre un mensaje en la consola
  function showMessage() {
    console.log("Hola, esto es un mensaje desde JavaScript");
  }
  
  // Llama a la función showMessage al cargar la página
  window.onload = showMessage;
</script>

assistant: <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mi Página Web</title>
    <style>
      /* Estilos CSS */
      body {
        font-family: Arial, sans-serif;
        background-color: #f1f1f1;
      }
      .container {
        width: 80%;
        margin: 0 auto;
        text-align: center;
      }
      h1 {
        color: #333;
        margin-top: 50px;
      }
      button {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Bienvenido a mi página web</h1>
      <button id="miBoton">Haz clic aquí</button>
    </div>

    <script>
      // Código JavaScript
      const miBoton = document.querySelector("#miBoton");
      miBoton.addEventListener("click", function() {
        alert("Haz hecho clic en el botón");
      });
    </script>
  </body>
</html>

assistant: A continuación, un template sensillo de una página web que incluya html, css y javascript:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mi sitio web.</title>
    <style>
      /* CSS */
      body {
        font-family: Arial, sans-serif;
        background-color: #f2f2f2;
      }
      h1 {
        text-align: center;
        color: #333;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Bienvenido a mi sitio web.</h1>
      <p>Este es un template sencillo de una página web.</p>
    </div>
    <script>
      // JavaScript
      console.log("Bienvenido a mi sitio web.");
    </script>
  </body>
</html>