2020. április 20., hétfő

HTML szerkesztés gyakorlása

 Így kellene kinéznie




Forrás

<!DOCTYPE HTML>
<html>
<head>
<title>Búbos banka</title>
  <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="bubos.css">  <!Figyelem itt hivatkozunk a css-re>
</head>

<body>
<h1>Búbos banka</h1>
<img id="balkep" src="upuepo_01.png" alt="Köny-rajz" title="Köny-rajz">
    <h2>Leírás és életmód</h2>

<p>Hosszútávú vonuló, a telet Afrikában tölti. Főként rovarokat, férgeket, hernyókat, tücsköket, bogarakat, sáskát, vagyis csak állati eredetű táplálékot fogyaszt. Röpte lepkeszerűen hullámzó. Táplálékkeresés közben sokat mozog a talajon, ilyenkor kevésbé feltűnő. Az állattartó telepek körül találkozhatunk vele leggyakrabban, mert a szerves trágyában előforduló rovarokat, férgeket előszeretettel fogyasztja. A mezőgazdaság intenzívvé válása kedvezőtlenül hat az állomány nagyságára. A kisparcellás, extenzív mezőgazdaság növelésével pozitív hatást érhetünk el a faj elterjedésében.</p>

                                 <h2>Élőhelye, költése</h2>

<p>Hazánkban a sűrű, zárt erdők kivételével mindenütt előfordulhat, de leginkább a mozaikos mezőgazdasági területeket, gyümölcsösöket, szőlősöket, puhafás ligeterdőket kedveli. Kisebb településeken, falvakban is sokszor látni, akár költhet is az épületek (fészerek, ólak, istállók) kisebb üregeiben. Harkályok odúit szívesen elfoglalja, de kidőlt, korhadt fák üregeiben, kőrakásokban, üregekben bárhol költhet, akár a talajszintben is. Az 5-10 piszkosfehér tojáson kizárólag a tojó kotlik, a hím a táplálékot hordja, a fiókák etetésében viszont mindkét szülő részt vesz. A népnyelv büdös bankának, vagy szurtos dudunak is hívja, mivel a fiókák veszélyérzet esetén bűzös ürüléket juttatnak vélt, vagy valós támadójukra. Ezen kívül maga a költőüreg is elég sok ürüléket tartalmaz, melyet a fiókák ürítenek ki magukból.</p>

                                <h2>Adatok</h2>
    <img id="jobbkep" src="upuepo_02.png" alt="Éhes fiókák" title="Éhes fiókák">
<table>
  <tr>
    <td style="text-align: center;" class="fejsor" colspan="2">Elnevezés</td>
  </tr>
  <tr>
    <td>Magyar név</td>
    <td>Búbos banka</td>
  </tr>
  <tr>
    <td>Tudományos név</td>
    <td>Upupa epops</td>
  </tr>
  <tr>
    <td>Angol név</td>
    <td>Eurasian Hoopoe</td>
  </tr>
  <tr>
    <td style="text-align: center;" class="fejsor" colspan="2">Rendszertan</td>
  </tr>
  <tr>
    <td>Rend</td>
    <td>Szalakótaalakúak<br> Coraciiformes</td>
  </tr>
  <tr>
    <td>Család</td>
    <td>Bankafélék<br> Upupidae</td>
  </tr>
  <tr>
    <td style="text-align: center;" class="fejsor" colspan="2">Védelem</td>
  </tr>
     <tr>
    <td>Védelmi státusz </td>
    <td>védett</td>
  </tr>
     <tr>
    <td>Természetvédelmi érték</td>
    <td>50000 Ft</td>
  </tr>
 </table>

  
   

<p class="forras">Forrás: <a href="http://www.mme.hu/magyarorszagmadarai/madaradatbazis-upuepo" target="_blank">http://www.mme.hu/magyarorszagmadarai/madaradatbazis-upuepo</a></p>

</body>

</html>

Attributum változtatása a Bubos.css-ben

body{
  padding: 15px;
    background-color: #e7e7ff;
    color: #1d1d4e;
   
}

h1{
  text-align: center;
}


p{
  margin: 5px;
  text-align: justify;
}

#balkep{
  float: left;
    width: 200px;
  margin-right: 15px;
}

#jobbkep{
  float: right;
  width: 400px;
  margin: 10px;
}

table{
  box-shadow: 5px 5px 7px #1D1D4E;
}

td{
  border: 1px dotted #1D1D4E;
  padding:  2px 16px 2px;
}

td:first-child {
  font-weight: bold;
  text-align: right;
}

td:nth-child(2) {
  font-style: italic;
  text-align: left;
}

.fejsor{
  text-align: center;
  background-color:  #1D1D4E;
  color: #E7E7FF;
}

.forras{
  margin: 15px 75px 0px;
  padding-top: 5px;
  border-top: 1px solid #1D1D4E;
  font-style: italic;
    text-align: center;
}

img{
  box-shadow: 5px 5px 7px #1D1D4E;
     border: 1px solid #1d1d4e;

Nincsenek megjegyzések:

Megjegyzés küldése