1. Kreirati jednu sliku koja ima transparentnu pozadinu i sačuvajte je u png formatu pod nazivom slika1.png

Kako kreirati sliku sa providnom pozadinom:

Slika koju koristimo je neka slika sa Interneta, koja je promenjena tako da ima transparentnu pozadinu.

To se radi tako što se prvo pronađe slika sa jednobojnom pozadinom.

Postavite je u vaš folder na računaru.

Zatim se ta slika otvori u programu Gimp. 

     (možete koristiti i neke druge alate, ali će ovde biti objašnjeno za jedan beaplatan alat koji vaša nastavnica koristi umesti Photoshopa)

Sa leve strane odaberite alat "čarobni štapić", na slici odaberite područje oko slike i

  1. način ... Layer – Transparency – Color to Alpha ...". Tada će oko slike biti providno.
  2. način ... samo pritisnite taster Delete
  • Ako na slici ima još obojenih delova, ponavljajte korake po potrebi.

Napomena: Sačuvati fajl kao .png bez boje pozadine. (jer na primer tip jpg ne podržava providne pozadine)


2. U svom folderu kreirati poseban folder u kojem radimo (zadatakABC) i u njega ubaciti sliku.

3. Otvoriti folder u VS Code ("prevucite" folder na ikonicu VS Code ako je imate na Desktopu - time ćete ujedno pokrenuti VS Code i otvoriti taj folder u njemu) - i dalje radimo u VS Code i u tom folderu

- primetićete sa desne strane da se u tom folderu nalazi ona slika koju ste prethodno kreirali
 

4. New file - kreirati dva nova fajla: index.html i stil.css

5. Korišćenjem šablona uneti osnovni html kod u index.html (! i Enter),

i promeniti title u nešto tipa: "Moja WEB stranica",

uneti naslov i podnaslov

a zatim uneti link ka css fajlu (kao na prethodnom času)

  • Proverite da li u instaliranim ekstenzijama imate Live Server (u učionici 17 u školi ima):
    • U donjem desnom delu odaberite Go Live (time će vam se u podrazumevanom web Browseru otvoriti vaša web stranica)
    • postavite na desnu polovinu ekrana prikaz vaše web stranice, a na levu polovinu ekrana postavite prozor sa VS Code - ono gde pišete kodove

Zatim unesite sliku: samo počnite da kucate img i pritisnite Enter - da se unese šablon u koji samo unesete naziv slike koja se nalazi u istom folderu (slika1.png)

Prilikom kucanja ćete primetiti da se svaka promena odražava direktno na Live Server prikazu vaše web stranice - to je zato što je Live Server u stvari nešto kao simulacija WEB servera unutar VS Code-a i radi LIVE!

6 -> napraviti fajl stil.css u kojem će se upisati sledeće, da bi pozadina bila zelena:

body
{
   background-color: lime;
}

 

*** obrisan deo za JS ***

 

9. Umesto pozadinske boje postaviti neku sliku kao pozadinu :

izmeniti u css fajlu deo koji se odnosi na Body:

body {
  background-image: url("pozadina.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
Poslednja izmena: недеља, 2. новембар 2025, 16:19