Ceacht: An oidhreacht a chur chun cinn i ranganna ríomhaireachta

Treoracha

Tá ort dhá leathanach gréasáin a dhearadh, index.html agus contact.html, arna nascadh leis an eilimint <a>. Úsaidfidh tú an téama 'Troscán péinteáilte traidisiúnta na Sacsanach — gné den oidhreacht dholáimhsithe' don chéad leathanach, index.html. Féach ar shuíomh gréasáin a thaitníonn leat i gcomhair inspioráide nó cuir dearadh de chuid féin ar an leathnach. Beidh na heilimintí séimeantacha HTML5 seo a leanas ar an leathanach <header>, <main>, <article>, <aside>, <footer> agus ní mór an nasc leis an leathanach contact.html a chur faoin eilimint <nav>.

Beidh an stíl chéanna i gceist ar an dara leathanach, contact.html, agus a bhí ar an chéad leathanach. Idir na heilimintí <header> agus <footer> cuirfidh tú foirm teagmhála isteach. Faoin eilmint <form>, beidh na rialtáin seo a leanas ann: input type="text", input type="email", input type="submit", input type="reset" agus <textarea>.

Céimeanna

Cuardaím le haghaidh teimpléad cuí.
Cuirim an leagan amach i láthair.
Déanaim anailís ar leagan amach an leathanaigh.
Cruthaím leathanach de mo chuid féin, index.html, ag cur téacs agus íomhánna isteach atá ag teacht leis an téama a moladh.

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

Cuardaím íomhánna a thagann leis an téama agus cuirim comhad stíle leis an leathanach.

Cruthaím an leathanach 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>