Harjoitus: Digitaalinen perintö

Tuottaja
Asociatia Perseidele
Tekijä
Vranceanu Catalina

Tämä harjoitus on jatkoa Perinnön hyödyntämiselle tietojenkäsittelyn tunneilla. Tässä harjoituksessa opetellaan käyttämään uusia HTML-elementtejä (kuvia ja listoja varten) ja opitaan sisällön muotoilusta porrastetuilla tyyliarkeilla (CSS).

Luo tiedosto mobilier.html Sublime Textillä tai jollain muulla tekstieditorilla. Aloita HTML5-tiedoston minimisisällöllä:

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

Tee muutoksia mobilier.html -tiedostoon, jotta sen sisältä on seuraava:

Kuvat ja tiedot on otettu verkkosivulta www.mobilapictata.ro. Otsikko “Saksilaiset huonekalut” määritellään linkiksi tälle sivustolle.

Lisää projektiin alikansio ja anna sille nimeksi /css. Lisää tähän alikansioon tiedosto nimeltä style.css. Linkitä tiedosto recipe.html-tiedostoon lisäämällä seuraava rivi <head>-osioon:

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

Mene Google Fontsiin ja valitse Bad Script -fontti.

Lisää valmiin sivun <head>-osioon rivi, joka integroi uuden fontin edellisessä vaiheessa määritellyllä menetelmällä:

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

Muokkaa style.css-tiedostoa niin, että että sivun kaksi listaa käyttävät Bad Script -fonttia.

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

Lisää style.css -tiedostoon rivit, joita tarvitaan määrittelemään kaksi lisäluokkaa: johdanto ja tietoa. Luokkien tulee erota fonttikoon ja värin osalta.

Mahdollisia variantteja:

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

Liitä <ul> ja<ol> -elementit tyyleihin:

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

Syventääksesi oppimistasi, suosittelemme seuraavaa harjoitusta:

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;
}
  • lisää body-elementtiin taustaväri
  • Rajoita sivun sisältöä käyttämällä ID selectoria, jonka arvo on width: 80%;. Loput ID selectorin kuvauksen arvot voit määritellä mieltymystesi mukaan.
  • Anna kahdelle listalle eri tyylit
  • Anna linkille tyyli, joka kertoo käytetystä lähteestä käyttämällä pseudo-class-sääntöjä.

Harjoituksen ratkaisut

Tiedostossa mobilier.html on seuraava sisältö:

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

Tiedostossa style.css on seuraava sisältö:

@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;
}
Co-funded by the European Union

Euroopan unionin rahoittama. Sivuilla ilmaistut näkemykset ja mielipiteet ovat tekijöiden omia, eivätkä ne välttämättä heijasta Euroopan unionin tai Euroopan koulutuksen ja kulttuurin toimeenpanoviraston (EACEA) näkemyksiä tai mielipiteitä. Euroopan unioni tai EACEA eivät ole niistä vastuussa.

  • Kansalaisfoorumi
  • Asociatia Perseidele
  • Blue Beehive
  • Oideas Gael
  • University of Eastern Finland

© HEART 2024

heart@oideasgael.ie