23/24.3 Primenjene informacione tehnologije 3

Pravimo web stranicu na temu boravka u svemiru:

Kreirati poseban folder u svom folderu na računaru i otvoriti ga pomoću VS Code

Kreirati dva fajla: zadatak.html  i stil.css

U html fajl na što kraći način uneti osnovni html kôd.

Na Internetu pronaći sliku svemira i postaviti je u isti folder

Pomoću css-a ubaciti tu sliku u pozadinu web stranice

Zatim pronaći sliku svemirskog broda ili vanzemaljca (ili nečeg drugog) i pomoću nekog od alata na računaru je konvertovati u PNG fajl sa transparentnom pozadinom. Tu sliku postaviti na vašu web stranicu

Podzadatak: Dodati jedan blok sa pesmicom:

Zadatak br. 2

Izmeniti sadržaj stranice tako da se u njoj nalaze sledeći elementi:

 <div class="blok" id="A">
    <p>Zaba cita novine <span style="font-size: 3em;">Ali stvarno</span><br>
      u carstvu hladovine <br>  </p>
 </div>
 <div class="blok" id="B">
    <p>Zaba cita novine <span style="font-size:20px">Opet</span></p>
 </div>
 <div class="blok" id="C" style="background-color: aqua;">
    Zaba cita novine <span style="font-size: 3;">Poslednji put</span>
 </div>
 <div id="slika"></div>

... Treba postaviti da su zadovoljeni sledeći zahtevi:

• prvi blok da je gore i levo - na početku stranice, žute pozadine, sa plavim slovima, sa malo većim slovima
• drugi blok da ima bordo pozadinu (maroon) i bela slova, da se nalazi na desnoj polovini ekrana i visine do polovine ekrana
• treći blok da je na sredini ekrana,
• poslednji blok (bez sadržaja) treba da je na dnu ekrana, levo u da ima dimenzije 200x200 piksela, sa belom pozadinom
•  
• svi blokovi da imaju postavljeno rastojanje između svoje ivice i teksta unutra

#A {
    color: blue;
    background-color: yellow;
    max-width: 40vw;
    font-size: 15px;
}
#B {
    color: white;
    background-color: maroon;
    position: absolute;
    top: 10px;
    right: 0;
    width: 30%;
    height: 30%;
    font-size: 3em;
}
#C {
    position: absolute;
    top: 50%;
    left: 30%;
    width: 40%;
    margin: auto;
    height: 40%;
    font-size: 30px;
}
.blok {
    padding: 2em;
}
#slika {
    background-color: white;
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: 0%;
}