Exercițiu: Valorificarea patrimoniului în cadrul cursurilor de informatică

Instrucțiuni

Realizarea a două pagini web, index.html și contact.html, legate între ele, prin elementul <a>. Pentru crearea primei pagini, index.html, veți avea ca temă Mobilier pictat în stil tradițional săsesc - un element al patrimoniului imaterial și vă puteți inspira din desing-ul unui site care vă place sau vă construiți pagina index.html prin propriul design. Pagina va avea elementele semantice din HTML5: <header>, <main>, <article>, <aside>, <footer> și va conține de asemenea elementul <nav> care va permite accesarea paginii contact.html.

A doua pagină, contact.html, va păstra stilizarea primei pagini, iar între <header> și <footer> veți intetegra o secțiune conținând un formular de contact. Elementul <form> va conține cel putin controalele Windows: input type="text", input type="email", input type="submit", input type="reset" și <textarea>.

Pașii realizării proiectului

Caut un model.
Prezint aspectul.
Fac analiza structurii paginii.
Creez o pagina asemănătoare, index.html, adăugând texte și imagini cu tema propusă.

<!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>

I search for images matching the theme and add a style file.

I create the contact.html page.

<!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>