B1
html----------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="izgled.css" type="text/css" rel="stylesheet">
<title>Pocetna</title>
</head>
<body>
<h1>Foto Galerija</h1>
<div class="nav">
<ul>
<a href="pocetna.html"><li>Pocetna</li></a>
<a href="oAutoru.html"><li>O Autoru</li></a>
<a href="uputstvo.html"><li>Uputstvo</li></a>
<li class="zavrsni">Zavrsni ispit</li>
</ul>
</div>
<div class="glavni">
<div class="tekst">
<p id="tekst22">ACU POCET VRISTAT</p>
<img src="Slike/prva.jpg" class="slika1" id="prikazanaSlika">
</div>
<div>
<img src="Slike/prva.jpg" class="slika2" onclick="prikaziSliku1('Slike/prva.jpg')">
<img src="Slike/druga.jpg" class="slika2" onclick="prikaziSliku2('Slike/druga.jpg')">
<img src="Slike/treca.jpg" class="slika2" onclick="prikaziSliku3('Slike/treca.jpg')">
<img src="Slike/cetvrta.jpg" class="slika2" onclick="prikaziSliku4('Slike/cetvrta.jpg')">
<img src="Slike/peta.jpg" class="slika2" onclick="prikaziSliku5('Slike/peta.jpg')">
<img src="Slike/sesta.jpg" class="slika2" onclick="prikaziSliku6('Slike/sesta.jpg')">
<img src="Slike/sedma.jpg" class="slika2" onclick="prikaziSliku7('Slike/sedma.jpg')">
<img src="Slike/osma.jpg" class="slika2" onclick="prikaziSliku8('Slike/osma.jpg')">
<img src="Slike/deveta.jpg" class="slika2" onclick="prikaziSliku9('Slike/deveta.jpg')">
<img src="Slike/deseta.jpg" class="slika2" onclick="prikaziSliku10('Slike/deseta.jpg')">
</div>
</div>
<script src="skripta.js"></script>
</body>
</html>
----------------csssssssss
*{
margin:0;
padding:0;
}
body{
background-color:lightblue ;
color:rgb(0, 75, 166);
}
ul {
list-style-type: none;
text-decoration: none;
border-collapse:separate;
}
li{
list-style-type: none;
text-decoration: none;
float:left;
padding: 5px;
border:1px white solid;
color:white;
}
.nav
{
margin-top: 10px;
width:100%;
height:30px;
background-color:rgb(0, 75, 166); ;
}
.zavrsni
{
float:right;
border:none;
}
h1{
margin-top: 10px;
margin-left:10px;
}
.tekst
{
width: 640px;
height:120px;
background-color:rgb(0, 75, 166); ;
color:white;
}
.glavni
{
margin:auto;
margin-top: 30px;
width:640px;
height:640px;
background-color: white;
border:black 1px solid;
}
.slika1
{
width:640px;
height:480px;
margin-top:101px;
}
.slika2
{
margin-left:0px;
margin-top:480px;
width:64px;
height:40px;
float:left;
}
-------------------------------js
function prikaziSliku1(src) {
document.getElementById('prikazanaSlika').src = src;
document.getElementById('tekst22').innerHTML = "POPUSIS MI KURAC";
}
function prikaziSliku2(src) {
document.getElementById('prikazanaSlika').src = src;
document.getElementById('tekst22').innerHTML = "POPUSIS MI KURAC 2";
}
function prikaziSliku3(src) {
document.getElementById('prikazanaSlika').src = src;
document.getElementById('tekst22').innerHTML = "POPUSIS MI KURAC 3";
}
function prikaziSliku4(src) {
document.getElementById('prikazanaSlika').src = src;
document.getElementById('tekst22').innerHTML = "POPUSIS MI KURAC 4";
}
function prikaziSliku5(src) {
document.getElementById('prikazanaSlika').src = src;
document.getElementById('tekst22').innerHTML = "POPUSIS MI KURAC 5";
}
function prikaziSliku6(src) {
document.getElementById('prikazanaSlika').src = src;
document.getElementById('tekst22').innerHTML = "POPUSIS MI KURAC 6";
}
function prikaziSliku7(src) {
document.getElementById('prikazanaSlika').src = src;
document.getElementById('tekst22').innerHTML = "POPUSIS MI KURAC 7";
}
function prikaziSliku8(src) {
document.getElementById('prikazanaSlika').src = src;
document.getElementById('tekst22').innerHTML = "POPUSIS MI KURAC 8";
}
function prikaziSliku9(src) {
document.getElementById('prikazanaSlika').src = src;
document.getElementById('tekst22').innerHTML = "POPUSIS MI KURAC 9";
}
function prikaziSliku10(src) {
document.getElementById('prikazanaSlika').src = src;
document.getElementById('tekst22').innerHTML = "POPUSIS MI KURAC 10";
}
B1
B2
hyml----------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="izgled.css" type="text/css">
</head>
<body>
<h1>DOMACE ZIVOTINJE</h1>
<div class="nav">
<ul>
<a href="Pocetna.html"><li>Pocetna</li></a>
<a href="OAutoru.html"><li>O autoru</li></a>
<a href="Uputstvo.html"><li>Uputstvo</li></a>
</ul>
</div>
<div>
<img src="Slike/Kokoska.jpg" class="slike slike1" onmouseover="kokoska.play()" onmouseout="kokoska.pause()" onclick="kokoska1()"kokoska.currentTime=0>
<img src="Slike/konj.jpg"class="slike"onmouseover="konj.play()" onmouseout="konj.stop()" onclick="konj1()">
<img src="Slike/Koza.jpg"class="slike"onmouseover="koza.play()" onmouseout="koza.stop()" onclick="koza1()">
<img src="Slike/Krava.jpg"class="slike"onmouseover="krava.play()" onmouseout="krava.stop()" onclick="krava1()">
<img src="Slike/Ovca.jpg"class="slike"onmouseover="ovca.play()" onmouseout="ovca.stop()" onclick="ovca1()">
</div>
<div class="futer">Copyright @Predskolska Ustanova "Srecno dete"</div>
<script src="skripta.js"></script>
<audio src="Zvuk/Kokodakanje kokotke, snela koka jaje.mp3" id="kokoska" ></audio>
<audio src="Zvuk/Konj zvuk.mp3" id="konj"></audio>
<audio src="Zvuk/zvuk koza.mp3" id="koza"></audio>
<audio src="Zvuk/Zvuk Krave.mp3" id="krava"></audio>
<audio src="Zvuk/zvuk ovce.mp3" id="ovca"></audio>
</body>
</html>
--------------------------------------------css
*
{
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
body{
background-image:url("pozadina.jpg") ;
background-repeat: no-repeat;
background-size: 100%;
color:white;
}
.nav
{
display: flex;
justify-content: center;
background-color:rgb(41, 0, 0);
width:44.5%;
margin-left:27%;
}
h1{
margin-top:10px;
margin-bottom:10px;
color:yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
text-align: center;
font-size:20px;
}
ul{
text-decoration: none;
list-style-type:none;
}
li{
text-decoration: none;
list-style-type:none;
color:rgb(41, 0, 0);;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.5px;
display:inline;
float:left;
padding-left:25px;
padding-right:25px;
padding-top:5px;
padding-bottom:5px;
background: yellow;
border:black solid 1px;
}
.futer
{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:20px;
background-color: rgb(41, 0, 0);
text-align: center;
padding-top:10px;
color:yellow;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.5px;
font-size:10px;
}
li:hover{
color:yellow;
background-color: rgb(41, 0, 0);
}
.slike
{
width:100px;
height:100px;
border-radius: 50%;
border:1px yellow solid;
}
.slike1
{
margin-top:20px;
margin-left:115px;
}
------------------------js
function playkokoska()
{
var kokoska = document.getElementById("kokoska");
kokoska.play();
}
function stopkokoska()
{
var kokoska = document.getElementById("kokoska");
kokoska.pause();
}
function playkonj() {
var konj = document.getElementById("konj");
konj.play();
}
function stopkonj() {
var konj = document.getElementById("konj");
konj.pause();
}
function playkoza() {
var koza = document.getElementById("koza");
koza.play();
}
function stopkoza() {
var koza = document.getElementById("koza");
koza.pause();
}
function playkrava() {
var krava = document.getElementById("krava");
krava.play();
}
function stopkrava() {
var krava = document.getElementById("krava");
krava.pause();
}
function playovca() {
var ovca = document.getElementById("ovca");
ovca.play();
}
function stopovca() {
var ovca = document.getElementById("ovca");
ovca.pause();
}
function kokoska1() {
var kokoska1 = window.open("", "MsgWindow", "width=200,height=100");
kokoska1.document.write("<p>Kokoska daje jaja.</p>");
}
function konj1() {
var konj1 = window.open("", "MsgWindow", "width=200,height=100");
konj1.document.write("<p>Konj se jase.</p>");
}
function koza1() {
var koza1 = window.open("", "MsgWindow", "width=200,height=100");
koza1.document.write("<p>Koza kaze be.</p>");
}
function krava1() {
var krava1 = window.open("", "MsgWindow", "width=200,height=100");
krava1.document.write("<p>Krava daje mleko.</p>");
}
function ovca1() {
var ovca1 = window.open("", "MsgWindow", "width=200,height=100");
ovca1.document.write("<p>Ovca daje vunu.</p>");
}B2
B3
hyml---------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="izgled.css" rel="stylesheet" type="text/css">
<title>Document</title>
</head>
<body>
<h1>OSNOVNA SKOLA "SONJA MARINKOVIC"</h1>
<div class="nav">
<ul>
<a href="pocetna.html"><li>Pocetna</li></a>
<a href="Autor.html"><li>O autoru</li></a>
<a href="Uputstvo.html"><li>Uputstvo</li></a>
</ul>
</div>
<h2>Srbija i njeni susedi</h2>
<div class="levo">
<p class="geografija">G<br>E<br>O<br>G<br>R<br>A<br>F<br>I<br>J<br>A</p>
</div>
<div class="desno">
<img src="Slike/Srbija.png" width="600px" height="900px" class="glavna Srbija">
<img src="Slike/Madjarska.png" class="slike madjarska" onmouseover="Madjarska.play()" onmouseout="Madjarska.pause()">
<p class="tekst madjarskaTekst" onclick="madjarskaInfo()">Madjarska</p>
<img src="Slike/rumunija.jpg" class="slike rumunija" onmouseover="Rumunija.play()" onmousedown="Rumunija.stop()">
<p class="tekst rumunijaTekst" onclick="rumunijaInfo()">Rumunija</p>
<img src="Slike/hrvatska.jpg" class="slike hrvatska" onmouseover="Hrvatska.play()" onmousedown="Hrvatska.stop()">
<p class="tekst hrvatskaTekst" onclick="hrvatskaInfo()">Hrvatska</p>
<img src="Slike/bosna.jpg" class="slike bosna"onmouseover="Bosna.play()" onmousedown="Bosna.stop()">
<p class="tekst bosnaTekst" onclick="bosnaInfo()">Bosna</p>
<img src="Slike/srbija.jpg" class="slike srbija"onmouseover="Srbija.play()" onmouseout="Srbija.pause()" >
<p class="tekst srbijaTekst" onclick="srbijaInfo()">Srbija</p>
<img src="Slike/cg.jpg" class="slike cg"onmouseover="CrnaGora.play()" onmousedown="CrnaGora.stop()">
<p class="tekst crnagoraTekst" onclick="cgInfo()">Crna Gora</p>
<img src="Slike/bugarska.jpg" class="slike bugarska"onmouseover="Bugarska.play()" onmousedown="Bugarska.stop()" >
<p class="tekst bugarskaTekst" onclick="bugarskaInfo()">Bugarska</p>
<img src="Slike/albanija.png" class="slike albanija" onmouseover="Srbija.play()" onmousedown="Srbija.stop()">
<p class="tekst albanijaTekst" onclick="albanijaInfo()">Albanija</p>
<img src="Slike/makedonija.jpg" class="slike makedonija"onmouseover="Makedonija.play()" onmousedown="Makedonija.stop()">
<p class="tekst makedonijaTekst" onclick="makedonijaInfo()">Makedonija</p>
</div>
<div class="futer">Copyright @Osnovna skola "Sonja Marinkovic"</div>
<script src="skripta.js"></script>
<audio src="Zvuk/Himna Srbije - Boºe pravde.mp3" id="Srbija"></audio>
<audio src="Zvuk/Madjarska.mp3" id="Madjarska"></audio>
<audio src="Zvuk/Hrvatska.mp3" id="Hrvatska"></audio>
<audio src="Zvuk/Rumunija.mp3" id="Rumunija"></audio>
<audio src="Zvuk/Bugarska.mp3" id="Bugarska"></audio>
<audio src="Zvuk/Bosna.mp3" id="Bosna"></audio>
<audio src="Zvuk/Makedonija.mp3" id="Makedonija"></audio>
<audio src="Zvuk/Crna Gora.mp3" id="CrnaGora"></audio>
<audio src="Zvuk/Himna Srbije - Boºe pravde.mp3" id="Albanija"></audio>
</body>
</html>
--------------------------------css
*
{
MARGIN:0;
padding:0;
}
.nav
{
width:100%;
background-color: lightgreen;
height:30px;
display:flex;
justify-content: center;
}
ul{
text-decoration: none;
list-style-type: none;
}
li{
display:inline;
text-decoration: none;
list-style-type: none;
float:left;
padding: 5px 70px 5px 70px;
color:green;
background-color:lightgreen;
}
body{
background-color: rgb(255, 255, 148);
}
.levo
{
float:left;
width:0px;
padding-right:0px;
}
h1{
color:green;
text-align:center;
padding-top:10px;
}
h2{
text-align:center;
color:green;
margin-top:20px;
margin-bottom:20px;
font-size: 30px;
}
.geografija
{
margin-top:100px;
margin-left:200px;
color:green;
font-size: 60px;
text-align:center;
}
.Srbija
{
margin-left:380px;
}
.futer
{
margin-top:50px;
position: fixed;
left:0px;
bottom:0px;
width:100%;
padding-top:10px;
text-align:center;
height:30px;
background-color: green;
z-index: 2;
color:rgb(255, 255, 148);
}
.desno
{
display:flex;
}
li:hover
{
color:rgb(255, 255, 148);
background-color: darkgreen;
}
.glavna
{
position:relative;
z-index:0;
}
.slike
{
width:40px;
height:40px;
position:absolute;
}
.makedonija
{
position:absolute;
z-index: 1;
top:940px;
left:830px;
}
.makedonijaTekst{
z-index: 1;
top:980px;
left:812px;
}
.albanija
{
position:absolute;
z-index: 1;
top:940px;
left:570px;
}
.albanijaTekst{
z-index: 1;
top:980px;
left:563px;
}
.bugarska
{
position:absolute;
z-index: 1;
top:850px;
left:930px;
}
.bugarskaTekst{
z-index: 1;
top:890px;
left:920px;
}
.cg
{
position:absolute;
z-index: 1;
top:770px;
left:480px;
}
.crnagoraTekst{
z-index: 1;
top:810px;
left:466px;
}
.srbija{
position:absolute;
z-index: 1;
top:500px;
left:670px;
}
.srbijaTekst{
z-index: 1;
top:540px;
left:670px;
}
.bosna
{
position:absolute;
z-index: 1;
top:520px;
left:410px;
}
.bosnaTekst{
z-index: 1;
top:560px;
left:410px;
}
.hrvatska
{
position:absolute;
z-index: 1;
top:290px;
left:400px;
}
.hrvatskaTekst{
z-index: 1;
top:330px;
left:393px;
}
.rumunija
{
position:absolute;
z-index: 1;
top:250px;
left:850px;
}
.rumunijaTekst{
z-index: 1;
top:290px;
left:840px;
}
.madjarska{
position:absolute;
z-index: 1;
top:160px;
left:400px;
}
.madjarskaTekst{
z-index: 1;
top:200px;
left:388px;
}
.tekst
{
color:green;
position:absolute;
}
------------------------js
function madjarskaInfo()
{
var madjarcine=window.open("","MsgWindow","width=200px,height=200px");
madjarcine.document.write("<p>Madjari:<br>broj stanovnika</p>");
}
function srbijaInfo()
{
var madjarcine=window.open("","MsgWindow","width=200px,height=200px");
madjarcine.document.write("<p>Srbija:<br>broj stanovnika</p>");
}
function hrvatskaInfo()
{
var madjarcine=window.open("","MsgWindow","width=200px,height=200px");
madjarcine.document.write("<p>hrvatska:<br>broj stanovnika</p>");
}
function cgInfo()
{
var madjarcine=window.open("","MsgWindow","width=200px,height=200px");
madjarcine.document.write("<p>Crna Gora:<br>broj stanovnika</p>");
}
function albanijaInfo()
{
var madjarcine=window.open("","MsgWindow","width=200px,height=200px");
madjarcine.document.write("<p>Albanija:<br>broj stanovnika</p>");
}
function bugarskaInfo()
{
var madjarcine=window.open("","MsgWindow","width=200px,height=200px");
madjarcine.document.write("<p>Bugarska:<br>broj stanovnika</p>");
}
function bosnaInfo()
{
var madjarcine=window.open("","MsgWindow","width=200px,height=200px");
madjarcine.document.write("<p>Bosna:<br>broj stanovnika</p>");
}
function rumunijaInfo()
{
var madjarcine=window.open("","MsgWindow","width=200px,height=200px");
madjarcine.document.write("<p>Rumunija:<br>broj stanovnika</p>");
}B3
B4
------------------html
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pocetna.aspx.cs" Inherits="WebApplication1.pocetna" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="izgled.css" rel="stylesheet" />
</head>
<body onload="Slide()">
<form id="form1" runat="server">
<script src="skripta.js"></script>
<h1>OSNOVNA SKOLA "SONJA MARINKOVIC"</h1>
<div class="nav">
<ul>
<a href="#"><li>Pocetna</li></a>
<a href="#"><li>O Autoru</li></a>
<a href="#"><li>Uputstvo</li></a>
</ul>
</div>
<div class="levi">
<p class="tekst">P<br />I<br />K<br />A<br />S<br />O</p>
</div>
<div id="slike">
<img src="slike/001.png"/>
<img src="slike/002.png"/>
<img src="slike/003.png"/>
<img src="slike/004.png"/>
<img src="slike/005.png"/>
</div>
<div id="podaci">
<p id="opis">Opis slika 1</p>
</div>
<div id="Kvadratici">
<div class="kvadrati"></div>
<div class="kvadrati"></div>
<div class="kvadrati"></div>
<div class="kvadrati"></div>
<div class="kvadrati"></div>
</div>
</form>
</body>
</html>
-------------------------css
body {
color:green;
background-color:lightyellow;
}
h1{
text-align:center;
font-size:30px;
}
ul{
list-style-type:none;
text-decoration:none;
}
li{
float:left;
padding:5px 45px 5px 45px;
}
.nav{
width:100%;
height:30px;
color:darkgreen;
background-color:lightgreen;
}
#slike{
position:absolute;
left:300px;
top:140px;
}
.prvi{
margin-left:33%;
}
.tekst{
font-size:30px;
color:darkgreen;
margin-left:200px;
}
img{
position:absolute;
width:300px;
height:300px;
opacity:0;
transition: opacity linear 1s;
}
img.unfade{
opacity:1;
}
#podaci{
width:300px;
height:300px;
position:absolute;
left:700px;
top:130px;
background-color:white;
padding:5px;
}
.kvadrati{
border-radius:50%;
height:17px;
width:17px;
margin:3px;
background-color:gray;
float:left;
}
#Kvadratici{
position:absolute;
left:450px;
top:500px;
}
---------------------------js
var i = 0;
var opisi = [
"slika opis 1",
"slika opis 2",
"slika opis 3",
"slika opis 4",
"slika opis 5",
]
function Slide() {
var x = document.getElementById('Kvadratici').querySelectorAll(".kvadrati");
var y = document.getElementById('slike').querySelectorAll("img");
var opis = document.getElementById('opis');
for (var j = 0; j < x.length; j++) {
x[j].style.backgroundColor = "gray";
y[j].classList.remove('unfade');
}
x[i].style.backgroundColor = "lightblue";
y[i].classList.add('unfade');
opis.innerHTML = opisi[i];
i++;
if (i == 5) {
i = 0;
}
setTimeout(Slide, 3000);
}B4
B5
html---------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="izgled.css">
<title>Document</title>
</head>
<body>
<h1>OSNOVNA SKOLA "SONJA MARINKOVIC"</h1>
<div class="nav">
<ul>
<a href="pocetna.html"><li>Pocetna</li></a>
<a href="Autor.html"><li>Autor</li></a>
<a href="Uputstvo.html"><li>Uputstvo</li></a>
</ul>
</div>
<h2>Zvuci instrumenata</h2>
<div class="levo">
<p class="muzickaKultura">M K <br>U U <br> Z L <br> I T <br> C U <br> K R <br> A A </p>
</div>
<div class="desno">
<table border="solid black 1px">
<tr class="gornji"> <td>Naziv instrumenta</td><td>Slika instrumenta</td><td>Zvuk instrumenta</td></tr>
<tr><td>Gitara</td><td class="sl"><a target="_blank" href="https://sr.wikipedia.org/wiki/%D0%93%D0%B8%D1%82%D0%B0%D1%80%D0%B0"><img src="slike/gitara.jpg" width="40px;"></a></td><td><img src="slike/zvucnik.png" width="40px" onmouseover="gitara.play()" onmousedown="gitara.stop()"><br> <p onclick="gitaraInfo()">Saznaj vise</p></td></tr>
<tr><td>Violina</td><td class="sl"><a target="_blank"href="https://sr.wikipedia.org/sr-ec/%D0%92%D0%B8%D0%BE%D0%BB%D0%B8%D0%BD%D0%B0"><img src="slike/violina.jpg" width="40px;"></a></td><td><img src="slike/zvucnik.png" width="40px" onmouseover="violina.play()" onmousedown="violina.stop()"><br> <p onclick="violinaInfo()">Saznaj vise</p></td></tr>
<tr><td>Klavir</td><td class="sl"><a target="_blank" href="https://sr.wikipedia.org/sr-ec/%D0%9A%D0%BB%D0%B0%D0%B2%D0%B8%D1%80"><img src="slike/klavir.jpg" width="40px;"></a></td><td><img src="slike/zvucnik.png" width="40px" onmouseover="klavir.play()" onmousedown="klavir.stop()"><br> <p onclick="klavirInfo()">Saznaj vise</p></td></tr>
<tr><td>Harfa</td><td class="sl"><a target="_blank" href="https://sr.wikipedia.org/sr-ec/%D0%A5%D0%B0%D1%80%D1%84%D0%B0"><img src="slike/harfa.jpg" width="40px;"></a></td><td><img src="slike/zvucnik.png" width="40px"onmouseover="harfa.play()" onmousedown="harfa.stop()"><br> <p onclick="harfaInfo()">Saznaj vise</p></td></tr>
<tr><td>Harmonika</td><td class="sl"><a target="_blank" href="https://sr.wikipedia.org/sr-ec/%D0%A5%D0%B0%D1%80%D0%BC%D0%BE%D0%BD%D0%B8%D0%BA%D0%B0"><img src="slike/harmonika.jpg" width="40px;"></a></td><td><img src="slike/zvucnik.png" width="40px" onmouseover="harmonika.play()" onmousedown="harmonika.stop()"><br> <p onclick="harmonikaInfo()">Saznaj vise</p></td></tr>
<tr><td>Flauta</td><td class="sl"><a target="_blank" href="https://sr.wikipedia.org/sr-ec/%D0%A4%D0%BB%D0%B0%D1%83%D1%82%D0%B0"><img src="slike/flauta.jpg" width="40px;"></a></td><td><img src="slike/zvucnik.png" width="40px"onmouseover="flauta.play()" onmousedown="flauta.stop()"><br> <p onclick="flautaInfo()">Saznaj vise</p></td></tr>
</table>
</div>
<div class="futer">Copyright @Osnovna skola "Sonja Marinkovic"</div>
<script src="skripta.js"></script>
<audio src="zvuk/gitara.mp3" id="gitara"></audio>
<audio src="zvuk/violina.mp3" id="violina"></audio>
<audio src="zvuk/klavir.mp3" id="klavir"></audio>
<audio src="zvuk/harfa.mp3" id="harfa"></audio>
<audio src="zvuk/harmonika.mp3" id="harmonika"></audio>
<audio src="zvuk/flauta.mp3" id="flauta"></audio>
</body>
</html>
-------------------------css
*{
margin:0;
padding:0;
}
body{
background-color: rgb(255, 255, 171);
color:green;
height:1000px;
}
.nav
{
width:100%;
height:30px;
background-color:lightgreen;
display:flex;
justify-content: center;
}
ul{
text-decoration: none;
list-style-type: none;
}
li{
float:left;
text-decoration: none;
list-style-type: none;
color:green;
padding:5px 50px 5px 50px;
}
li:hover
{
color: rgb(255, 255, 171);
background-color: darkgreen;
}
h1{
text-align:center;
margin-top:20px;
margin-bottom:20px;
}
h2{
margin-top:20px;
margin-bottom:20px;
text-align:center;
}
.futer{
position:fixed;
bottom:0px;
background-color:darkgreen;
color:rgb(255, 255, 171);
width:100%;
text-align:center;
height:30px;
padding-top:10px;
}
.muzickaKultura
{
color:green;
padding-left:80px;
font-size:60px;
}
.levo{
width:200px;
float:left;
}
.desno{
float:left;
margin-left:100px;
}
td{
text-align:center;
padding:10px;
}
.gornji{
background-color:darkgreen;
color:rgb(255, 255, 171);
}
table{
border:1px solid black;
}
.sl{
padding:0px;
}
--------------------------js
function gitaraInfo()
{
var nesto=window.open("","MsgWindow","width=500px,height=500px");
nesto.document.write("<p> Гитара је жичани инструмент. Најчешће има 6 жица [e - h - g - d- a - e], које звуче октаву ниже. Звук се постиже окидањем жица прстима или трзалицом (плектроном, плектрумом). Најчешћи систем квартно-терцног штимовања (италијански штим) користи за три дубље - басове жице тонове: велико Е и А и мало d, а за три тање, мелодијске струне: мало g и h и e. Музичка нотна литература за гитару записана је за октаву више него што стварно звучи. Као изузетно подесан хармонски инструмент гитара има велику примену у камерној музици, где до изражаја долази њена пратећа (корепетитивна улога), али ништа мање није заступљена ни у солистичком - уметничком музицирању. Музички инструмент гитара глобално је данас један од најзаступљенијих и најпопуларнијих кордофона, са запаженом позицијом и у музичком животу Балкана.</p>");
}
function violinaInfo()
{
var nesto=window.open("","MsgWindow","width=500px,height=500px");
nesto.document.write('Violina Виолина је ушла у употребу у раном 16. веку на Апенинском полуострву. До неких додатних измена је дошло у током 18. и 19. века. Она је у Европи служила као основа за жичане инструменте који се користе у западној класичној музици, као што је виола.');
}
function klavirInfo()
{
var nesto=window.open("","MsgWindow","width=500px,height=500px");
nesto.document.write('Клавир (Piano), је акустични, жичани музички инструмент са диркама код којег се тон производи ударом филцем прекривеним чекићем о металну жицу.[1] Због својих великих техничких и изражајних могућности клавир је један од инструмената са најбогатијом музичком литературом. Опсег клавира обухвата тонове од субконтра A (2A) до c5. Музика за клавир најчешће се пише у два линијска система. Горњи систем се углавном изводи десном руком, и најчешће се записује у виолинском кључу док се доњи систем углавном изводи левом руком и записује у бас-кључу.[2] Извођач чији је инструмент клавир зове се пијаниста.');
}
function harfaInfo()
{
var nesto=window.open("","MsgWindow","width=500px,height=500px");
nesto.document.write(' Харфа, педална харфа или велика харфа[1] је највећи и најсложенији савремени музички инструмент са жицама које се трзају. Жице су разапете вертикално у великом тространом оквиру, који чине усправан стуб на постољу, укосо постављен широки резонатор и на горњој страни карактеристично извијен „врат“ инструмента. У постољу се налази седам педала, који преко полуга у стубу дејствују на механизам покретних точкића на врату и прештимавају жице, скраћујући или продужавајући њихову дужину. Са својих 46 до 48 жица, харфа захвата (после оргуља и клавира највећи) тонски распон од шест и по октава. Жице се трзају прстима обе руке, док се резонатор наслања надесно раме свирача, а обе ноге управљају педалама. Зарад лакшег сналажења међу великим бројем жица, свака C-жица (Do) је црвене, а свака F-жица (Ef) је плаве или црне боје.');
}
function harmonikaInfo()
{
var nesto=window.open("","MsgWindow","width=500px,height=500px");
nesto.document.write(' Хармоника је полифони и аерофонски музички инструмент са клавијатуром или округлим типкама. Музичар на хармоници (хармоникаш) рукама шири и скупља мех чија ваздушна струја пролази кроз вентиле. Ове вентиле контролишу хармоникашеви прсти притиском на дирке. Дирке су повезане на клапне које се подижу приликом притиска дирке које допуштају проток ваздуха. Тело хармонике се састоји из две дрвене кутије повезане мехом. Величина и маса хармонике варира у зависности од њеног типа, броја регистара и басова. Сам притисак на дирке се не користи као изражајно средство, нити се њиме контролише јачина звука, већ се за то користи искључиво пумпање меха. Разликују се три основне врсте хармоника: клавирска хармоника, хроматска са дугметима и дијатонска хармоника.');
}
function flautaInfo()
{
var nesto=window.open("","MsgWindow","width=500px,height=500px");
nesto.document.write('Usna harmonika Усна хармоника је, почетком XIX века, настала у Немачкој. Направљена од метала и дрвета, а најмањи је музички инструмент који је веома једноставан за руковање. Тонови различитих висина, код усне хармонике се добијају издисајем и удисајем ваздуха кроз њену унутрашњост, а преклапањем шаке преко инструмента се добија ефекат вибрирања и неке врсте еха.');
}B5
B1-B5
By its4
B1-B5
- 136
