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

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


7. Kreiranje jednostavnog JavaScripta ( za klik mišem i za audio)

-> na kraju body dela (a pre taga za zatvaranje) ubacujemo JavaScriptu za puštanje zvuka prilikom prelaska miša preko slike:

<script>
 var Poruka = "Aeeeee";
 function zvukPraseta()
 {
    var grok = new Audio("pig.mp4");
    grok.play();
  }
</script>

-> U tag sa slikom dodati i akciju, tako da sada taj tag izgleda ovako:

<img src="slika.png" onMouseOver="zvukPraseta()">

-> druga akcija može biti da se klikom na neki element prikaže poruka. Koristićemo akciju alert i primeniti je na npr naslov:

<h1 onClick="alert(Poruka);"> Moj naslov </h1>

Vodite računa da je bitno da li koristite velika ili mala slova ( Java Script je CASE SENSITIVE ! )

8. Promeniti gde se nalazi slika na stranici-> U tag sa slikom dodati stil za prikaz:

<img id="slika" src="slika1.png" onMouseOver="zvukPraseta()">

a u css dodati:

#slika
{
  position: absolute;
  left: 25%;
  top: 60%;
  size: 80%;
}
pa sada tag za sliku treba da izgleda ovako:
<img id="slika" src="slika.png" onMouseOver="zvukPraseta()">

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;
}
Fajlove koji su korišćeni u zadatku (audio fajl za prase i pozadina) možete preuzeti kao zip arhivu: fajloviZaZadatak.zip)
Last modified: Thursday, 19 January 2023, 2:06 PM