Planirano za čas:

1. Osnovni html tagovi:

->  <!doctype html>

->  <html> ... </html>

<html>
 <head>
   <title> Moj naslov gore </title>
   <meta charset="utf-8">
   
 </head>
 <body>
   <h1> Moj naslov </h1>
   <hr>
   <pre>
    Ja volim ...
    Ja volim ....
    Ja volim samo sebe .... &#128540;
   </pre>
   <p style="background-color:100px"> &%128540; </p>
   <img src="ovde postaviti nayiv slike iz istog foldera">  
 </body>
</html>

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. Zatim se ta slika otvori u programi Gimp. Sa leve strane odaberite alat "čarobni štapić", na slici odaberite područje oko slike ... Layer – Transparency – Color to Alpha ...". Tada će oko slike biti providno. Ako na slici ima još belih delova, ponavljajte korake po potrebi. S ačuvati fajl kao png bez boje pozadine.


2. Pregled kreirane stranice

->  koristiti web browser koji ima na računaru

3. Uređenje stranice pomoću CSS-a (inline i externi css)

 ->  ubaciti određenu boju pozadine (unutar taga za body dodati style="background-color: aqua")

-> napraviti fajl stil.css u kojem će se upisati sledeće:
body
{
   background-color: lime;
}
#slika
{
  position: absolute;
  left: 25%;
  top: 60%;
  size: 80%;
}

->Povezati taj css fajl sa postojećim html fajlom tako što će se u head deo dodati:

<link rel="stylesheet" href="stil.css">

-> Vodite računa da se primenjuje stil koji je najbliže naveden. To znači da, iako je stil unutar css fajla jedan, vidi se boja koja je definisana unutar body taga.

-> U tag sa slikom dodati stil za prikaz:

<img id="slika" src="naziv aše slike">

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

-> na kraju body dela (a pre taga za zatvaranje) ubacujemo JavaScriptu:

<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 id="slika" 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>

Za učenike koji žele da i kod kuće koriste Notepad++, u nastavku je video (oko 2 minuta) u kojem je demonstrirano skidanje i instalacija, kao i početak pravljenja html fajla u ovom alatu:


Last modified: Tuesday, 14 December 2021, 12:43 PM