Harjoitus: Perinnön arvouttaminen tietojenkäsittelyn kursseilla
- Tuottaja
- Asociatia Perseidele
- Tekijä
- Vranceanu Catalina
Ohjeet
Suunnittele kaksi web-sivua, index.html ja contact.html, joita linkittää <a> -elementti. Ensimmäisen sivun (index.html) teemana on “Perinteinen saksilainen huonekalumaalaus – esimerkki aineettomasta kulttuuriperinnöstä”, ja voit hakea inspiraatiota haluamastasi web-sivusta, tai luo oma index.html -sivu omalla designilla. Sivulla tulee olla HTML5-elementit <header>, <main>, <article>, <aside>, <footer> sekä <nav> -elementti, jonka avulla pääsee contact.html -sivulle.
Toinen sivu, contact.html, pitää ensimmäisen sivun tyylin, ja <header>- ja <footer> -elementtien väliin tulee lisätä osio, jossa on yhteydenottolomake. <form> -elementin tulee pitää sisällään lomakkeen kentät: input type="text", input type="email", input type="submit", input type="reset" ja <textarea>.
Projektin vaiheet
- Etsi sivupohja.
- Esittele layout.
- Analysoi sivun layout.
- Luo samankaltainen sivu, index.html, johon lisätään tekstiä ja kuvia valitusta teemasta.
<!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>- Etsi kuvia, jotka sopivat teemaan, ja lisää tyylitiedoston.
- Luo contact.html-sivun.
<!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>