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