Ceacht: An oidhreacht dhigiteach

Tá an ceacht seo ag leanacht ón aonad An oidhreacht a chur chun cinn i ranganna ríomhaireachta. San aonad seo, cuirfidh tú eolas ar eilimintí HTML nua (chun pictiúir agus liostaí a chruthú) agus foghlaimeoidh tú maidir le stíliú a dhéanamh ar an ábhar trí Stílbhileoga Cascáideacha (CSS) a úsáid.

Cruthaigh an comhad mobilier.html ag úsáid ríomhchlár eagarthóireachta téacs ar nós Sublime Text. Cuir isteach na buneilimintí a bhaineann le comhad HTML ar dtús:

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

Cuir leis an chomhad mobilier.html go dtí go mbeidh an t-ábhar seo a leanas ann:

Tógadh na híomhánna agus an t-eolas ón tsuíomh gréasáin www.mobilapictata.ro. Bíodh nasc chuig an tsuíomh seo i gceist leis an teideal ('Saxon furniture').

Cuir fochomhadlann dar teideal /css leis an togra. Cuir comhad dar teideal style.css leis an fhochomhadlann. Is féidir nasc a chruthú leis an chomhad nua ón leathanach recipe.html ach an líne seo a leanas a chur faoin eilimint <head>:

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

Téigh chuig Google Fonts agus roghnaigh an chlófhoireann Bad Script.

Cuir an líne seo leis an eilimint <head> ar an leathanach chríochnaithe, d'fhonn an chlófhoireann nua a cheadú ar an leathanach:

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

Athraigh an comhad style.css sa chaoi is go n-úsáidfear an chlófhoireann Bad Script i gcás an dá liosta ar an leathanach.

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

Cuir dhá aicme (class) dar teideal introduction agus about leis an chomhad style.css. Beidh difear idir an dá aicme i dtaca le méid agus dath an chló.

Seo cúpla leagan malartach:

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

Cuir na haicmí leis na heilimintí <ul> agus <ol> a sainmhíníodh ar ball:

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

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

Chun cur le do chuid eolais, tugtar cuireadh duit an ceacht seo a leanas a chur i gcrích:

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

Cuir dath cúlra leis an eilimint <body>.
Cuir srian le leithne ábhar an leathanaigh trí úsáid a bhaint as roghnóir ID a mbaineann an t-airí width: 80%; leis. Is féidir na hairíonna eile a bhaineann leis an roghnóir ID a shainiú de réir do bhlas féin.
Cuir dhá stíl éagsúla ar an dá liosta.
Cuir stíl ar an nasc a léiríonn an fhoinse a úsáideadh, ag baint leasa as bréagaicme (pseudo-class).

Freagraí an cheachta

Beidh an t-ábhar seo a leanas sa chomhad mobilier.html:

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

Beidh an t-ábhar seo a leanas sa chomhad style.css:

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