Exercițiu: Patrimoniul digital

Acest exercițiu continuă din unitatea Valorificarea patrimoniului în clasele de informatică. În această unitate veți învăța să utilizați noi elemente HTML (pentru a crea imagini și liste) și veți învăța despre stilizarea conținutului cu ajutorul foilor de stil în cascadă (CSS).

Creați fișierul mobilier.html folosind Sublime Text sau un alt editor de text. Începeți cu conținutul minim al unui fișier HTML5:

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

Efectuați modificări succesive la fișierul mobilier.html astfel încât acesta să producă următorul conținut:

Imaginile și informațiile au fost preluate de pe site-ul www.mobilapictata.ro. Titlul („Mobilă săsească ”) va fi definit ca un link către acest site.

Adăugați un subdirectoriu la proiect și denumiți-l /css. În acest subdirectoriu adăugați un fișier numit style.css. Faceți legătura cu acest fișier din recipe.html prin adăugarea următoarei linii în secțiunea <head>:

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

Mergeți la Google Fonts și selectați fontul Bad Script.

Introduceți în secțiunea <head> a paginii completate linia care integrează noul font, conform metodei din pasul anterior:

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

Modificați fișierul style.css astfel încât cele două liste de pe pagină să utilizeze fontul Bad Script.

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

Adăugați la fișierul style.css liniile necesare pentru a declara două clase suplimentare numite introduction și about. Cele două clase vor diferi în ceea ce privește dimensiunea și culoarea fontului.

Variante posibile:

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

Atașați elementele <ul> și <ol> la stilurile astfel definite:

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

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

Pentru a vă aprofunda cunoștințele, vă invităm să faceți următorul exercițiu:

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;
}

aplică o culoare de fundal elementului body
restrângeți conținutul paginii prin utilizarea unui selector ID a cărui proprietate este width: 80%;. Restul proprietăților din blocul de descriere a selectorului ID pot fi definite în funcție de preferințele dvs.
stilizați diferit cele 2 liste
stilizați link-ul care indică sursa utilizată, utilizând regulile pseudoclasei

Soluții pentru exerciții

Fișierul mobilier.html are următorul conținut:

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

Fișierul style.css are următorul conținut:

@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;
}