Exercise: Digital heritage

This exercise continues from the unit Valorization of heritage in computer classes. In this unit you will learn to use new HTML elements (to create pictures and lists) and learn about styling content with Cascading Style Sheets (CSS).

Create the file mobilier.html using Sublime Text or another text editor. Start with the minimal contents of an HTML5 file:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Page title</title>
   </head>
   <body>
      <h1>First HTML page</h1>
      <p>This paragraph also contains characters with diacritics.</p>
      <!-- And this is a comment. -->
   </body>
</html>

Make successive changes to the mobilier.html file so that it produces the following content:

The images and information have been taken from the website www.mobilapictata.ro. The title ('Saxon furniture') will be defined as a link to this site.

Add a subdirectory to the project and name it /css. In this subdirectory add a file named style.css. Link to this file from recipe.html by adding the following line in the <head> section:

<link href="css/style.css" rel="stylesheet">

Go to Google Fonts and select the Bad Script font.

Insert in the <head> section of the completed page the line that integrates the new font, according to the method in the previous step:

  <link href="https://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet">

Change the style.css file so that the two lists on the page use the Bad Script font.

ul, ol {
  font-family: 'Bad Script', cursive;
}

Add to the style.css file the lines needed to declare two additional classes called introduction and about. The two classes will differ in font size and color.

Possible variants:

ul.introducere {
   color: #880000;
   font-size: 14px;
}
 
ol.despre {
   color: #0000CC;
   font-size: 12px;
}

Attach <ul> and <ol> elements to the styles so defined:

<ul class="introducere"><li> …

<ol class="despre"><li> …

To deepen your knowledge, we invite you to do the following exercise:

body{
  background-color:#e0f0c6;
}
 
.source, a:link, a:visited, a:hover{
  color:#9bbb59;
  text-decoration: none;
  text-align: right;
  font-family: 'Courgette', cursive;
  font-size: 12px;
  padding-right: 18px;
}

apply a background colour to the body element
Restrict the page content by using an ID selector whose property is width: 80%;. The rest of the properties in the ID selector description block can be defined according to your preferences.
style the 2 lists differently
stylise the link indicating the source used, using the pseudo-class rules

Exercise solutions

The file mobilier.html has the following content:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mobilier săsesc</title>
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
 <div id="container">
  <h1><a href="https://www.mobilapictata.ro/ro/" target="_blank">Mobilier săsesc</a></h1>
  <center>
   <a href="https://www.mobilapictata.ro/ro/" target="_blank"><img src="imagini/scaun.jpg"></a>
 </center>
 <h2 class="introducere">MOBILIER PICTAT TRADIŢIONAL</h2>
 <ul class="introducere">
  <li>Mobila tradițională săsească este chintesenţa unui mod natural de a trăi.</li>
  <li>Modelul este natura şi de aceea piesele nu vor fi niciodată demodate</li>
  <li>Folosind meşteşuguri vechi de secole piesele de mobilier au o valoare adevarată </li>
</ul>
<h2 class="despre">UN MEȘTEȘUG VECHI CE A RENĂSCUT ÎN ARTĂ</h2>
<p class="despre"> Mobila pictată manual a fost populară vreme de secole datorită metodelor tradiționale de realizare, a formelor și poveștilor pe care le poartă. Ele s-au transmis peste generații .</p>
<h2 class="despre">Produse</h2>
<ol class="despre">
  <li>Scaune </li>
  <li>Mese </li>
  <li>Bănci</li>
  <li>Birouri</li>
  <li>Comode </li>
  <li>Ceasuri </li>
  <li>Cuiere</li>
  <li>Dulapuri de bucătărie </li>
  <li>Dulapuri de haine</li>
  <li>Paturi</li>
</ol>
<center>
   <a href="https://www.mobilapictata.ro/ro/" target="_blank"><img src="imagini/mobilier.jpg"></a>
 </center>
<p class="sursa">*sursa  <a href="https://www.mobilapictata.ro/ro/" target="_blank">https://www.mobilapictata.ro/ro/ </p>
<br>
</div>
</body>
</html>

The style.css file has the following content:

@import url('https://fonts.googleapis.com/css?family=Courgette|Roboto+Condensed');
 
body{
  background-color:#e0f0c6;
}
 
#container{
  width: 80%;
  margin: 0 auto;
  border:1px dotted #006666;
  background-color: #fff;
}
 
h1{
  font-family: 'Roboto Condensed', sans-serif;
  text-align: center;
  color: #880000;
}

h1 a:hover{
  color: #880000;
  text-decoration: none;
}
 
img{
  border:1px solid #9bbb59;
  border-radius: 7px;
}

h2.introducere{
  font-family: 'Roboto Condensed', sans-serif;
  color: #880000;
  font-size: 20px;
  text-align: center;
  font-weight:bold;
}
  
h2.despre{
  font-family: 'Roboto Condensed', sans-serif;
  color: #0000CC;
  font-size: 20px;
  text-align: center;
  font-weight:bold;
}
  
p.despre{
  font-family: 'Roboto Condensed', sans-serif;  
  font-size: 15px;
  text-align: center;
  font-weight:italic;
}
 
ul, ol {
  margin: 40px;
  padding-left: 80px;
  font-family: 'Courgette', cursive;
}

ul.despre {  /*sau simplu, .despre */
  color: #880000;
  font-size: 14px;
}
 
ol.despre {
  color: #0000CC;
  font-size: 12px;
}
 
.sursa{
  text-align: right;
  font-family: 'Courgette', cursive;
  font-size: 12px;
  padding-right: 18px;
}

.sursa, a:hover, a:visited, a:link{
  color:#9bbb59;
  text-decoration: none;
}