1. Kreirati u svom folderu na računaru podfolder pod nazivom webStrana1

2. preuzmiite slike koje ćemo koristiti: pozadinska slika (pozadina2.jpg), slika na stranici (pas3.jpg);

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

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.

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


7. Umesto pozadinske boje postaviti neku sliku kao pozadinu :

izmeniti u css fajlu deo koji se odnosi na Body:

body {
  background-image: url("pozadina2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
Poslednja izmena: понедељак, 10. март 2025, 23:14