Ejercicio: Valorización del patrimonio en clases de informática

Instrucciones

Diseñar dos páginas web, index.html y contact.html, enlazadas por el elemento <a>. Para la creación de la primera página, index.html, utilizarás el tema "Muebles pintados tradicionales sajones: un elemento del patrimonio inmaterial" y podrás inspirarte en el diseño de un sitio web que te guste o crear tu página de index.html con tu propio diseño. La página tendrá los elementos semánticos HTML5 <header>, <main>, <article>, <aside>, <footer> y también contendrá el elemento <nav> que le permitirá acceder a la página contact.html.

La segunda página, contact.html, mantendrá el estilo de la primera página, y entre <encabezado> y <pie de página> insertará una sección que contiene un formulario de contacto. El elemento <form> contendrá los controles de formulario: input type="text", input type="email", input type="submit", input type="reset" y <textarea>.

Pasos para completar el proyecto

Busco una plantilla.
Les presento el diseño.
Analizo el diseño de la página.
Creo una página similar, index.html, agregando texto e imágenes con el tema sugerido.

<!DOCTYPE html>
  <html>
  <head>
    <title>Bootstrap Tutorial</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <nav class="navbar navbar-expand-md">
      <div class="container">
        <a class="navbar-brand" href="#"><img src="images/logo.png" alt="Logo">
</a>
        <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="main-navigation">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contact.html">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <header class="page-header header container-fluid">
      <div class="overlay d-flex justify-content-center align-items-center">
        <div class="description text-center">
         <h1>Furniture painted using traditional Saxon style - an element of intangible heritage</h1>
         <p>The technique of producing painted furniture is a manufacturing process, with origins in the artisanal field dating back long before the period of the Saxon guilds in Transylvania. The manual production of painted furniture is considered a traditional activity, as it developed gradually from the 14th to the 20th century. Folk craftsmen have passed this craft down through the ages by word of mouth from father to son and beyond. p>
         <a href="#more" class="btn btn-outline-secondary btn-lg">Read more</a>
       </div>
     </div>
   </header>
   <a name="more"></a><div class="container">
    <div class="row mt-5">
      <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" src="images/imaginea1.jpg" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Cultural context</h5>
            <p class="card-text">The Saxons are German settlers from today's Rhineland, France, Luxembourg and Belgium who were brought to Transylvania by King Geza II in 1141 (Nägler, T., 2003). According to Roswith Capesius, the beginnings of painted woodworking date back to the Middle Ages, long before it was first practised in organized guilds across Transylvania. </p>
            <a href="#more" class="btn btn-outline-secondary btn-lg">Read more</a>
          </div>
        </div>
      </div>
 <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" src="images/imaginea2.jpg" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Raw materials used (wood, paints, pigments and binders)</h5>
            <p class="card-text">From ancient times, people have used the natural resources of the local environment, which were abundant and economically accessible.  Given that Romania is a Carpathian country, forests occupied large areas, favouring the development of a wood culture, a tradition of wood processing.</p>
            <a href="#more" class="btn btn-outline-secondary btn-lg">Read more</a>
          </div>
        </div>
      </div>
     <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" src="images/imaginea3.jpg" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Modelling and style (modelling techniques, shapes, colours, ornaments, symbols and inscriptions)</h5>
            <p class="card-text">The process of making painted furniture is a complex one that requires in the first phase woodworking using specific techniques and in the second phase wood painting techniques.</p>
            <a href="#more" class="btn btn-outline-secondary btn-lg">Read more</a>
          </div>
        </div>
      </div>
        <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title"> CONTACT US</h5>
            <p class="card-text">Do you have a request or want to give us feedback? Click the button below to contact our team.</p>
            <a href="contact.html" class="btn btn-outline-secondary btn-lg">Contact</a>
          </div>
        </div>
      </div>
</div> <!-- end div class="row" -->
  </div> <!-- end div class="container" -->
 
  <footer class="page-footer">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-sm-12">
          <h6 class="text-uppercase font-weight-bold">Additional Information</h6>
          <p>Erasmus + project,KA220-ADU-000086697 "Safeguarding intangible cultural heritage through transformative learning within community-based art". </p>
        </div>
        <div class="col-md-4 col-sm-12">
          <h6 class="text-uppercase font-weight-bold">Address</h6>
          <p> Perseidele Association, 72 Eroilor Street, Asău
            <br/>perseidele@gmail.ro
            <br/> (+40) 256 200 217
          </div>
        </div>
        <div class="footer-copyright text-center">© 2024 Copyright: perseidele.ro</div>
      </div>
    </footer>
  </body>
  </html>

Busco imágenes que coincidan con el tema y agrego un archivo de estilo.

Creo la página contact.html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <title>Contact</title>
  </head>
<body>
     <h2 class="form-title text-center">CONTACT US</h2>
      <div class="container d-flex justify-content-center">
          <div class="row my-2 mx-2">
            <div class="col-md-6">
              <img src="images/letters1.jpg" alt="IMG">
            </div>
        <!--col-->
          <div class="col-md-6">
            <p class="justify text-muted">Do you have a request or want to give us feedback?<br>Fill out the form below to contact our team.</p>
           <form>
               <div class="form-group">
                  <label for="name">Name</label>
                  <input type="name" class="form-control" id="name" placeholder="Name">
               </div>
               <div class="form-group">
                  <label for="name">Name</label>
                  <input type="name" class="form-control" id="name" placeholder="First name">
               </div>
               <div class="form-group">
                  <label for="email">Email address</label>
                  <input type="email" class="form-control" id="email" aria-describedby="email" placeholder="Email">
               </div>
              <div class="form-group">
                  <label for="description1">Your message</label>
                  <texttarea class="form-control" id="description1" rows="3" placeholder="Write your message here"></texttarea>
              </div>
              <div class="form-group">
              <label for="group2">You can also add a file</label>
                  <div class="input-group" id="group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="addon2"><i class="far fa-file-image"></i></span>
                    </div>
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="file2" aria-describedby="addon2">
                        <label class="custom-file-label" for="file2">Choose file</label>
                    </div>
                  </div>
              </div>
            <div class="custom-control custom-checkbox form-group">
                  <input type="checkbox" class="custom-control-input" id="checkTerms">
                  <label class="custom-control-label" for="checkTerms">I have read and acknowledged the Terms & Conditions.</label>
            </div>
                <button type="submit" class="btn btn-info">Submit</button>
           </form>
        </div>
     </div>
  </div>
  <footer class="page-footer">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-sm-12">
          <h6 class="text-uppercase font-weight-bold">Additional Information</h6>
          <p>Erasmus + project,KA220-ADU-000086697 "Safeguarding intangible cultural heritage through transformative learning within community-based art". </p>
        </div>
        <div class="col-md-4 col-sm-12">
          <h6 class="text-uppercase font-weight-bold">Address</h6>
          <p> Perseidele Association, 72 Eroilor Street, Asău
            <br/>perseidele@gmail.ro
            <br/> (+40) 256 200 217
          </div>
        </div>
        <div class="footer-copyright text-center">© 2024 Copyright: perseidele.ro</div>
      </div>
    </footer>
</body>
</html>