Category Archives: HTML5

HTML5- Pjesa 3

Për t’i ekzekutuar këto shembuj, duhet t’i ruani në një editor me prapashtesën .HTML

 

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Zhvendose http://www.krokodili.com në drejtkëndëshin:</p>

<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
<br>
<img id=”drag1″ src=”img_logo.gif” draggable=”true” ondragstart=”drag(event)” width=”336″ height=”69″>

</body>
</html>

Zhvendose http://www.krokodili.com në drejtkëndëshin

krokodili

<!DOCTYPE html>
<html>
<body>
<p id=”demo”>Kliko mbi këtë buton për të treguar koordinatat:</p>
<button onclick=”getLocation()”>Try It</button>
<script>
var x=document.getElementById(“demo”);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML=”Geolocation is not supported by this browser.”;}
}
function showPosition(position)
{
x.innerHTML=”Latitude: ” + position.coords.latitude +
“<br>Longitude: ” + position.coords.longitude;
}
</script>
</body>
</html>

Kliko mbi këtë buton për të treguar koordinatat:

Try It

<!DOCTYPE html>
<html>
<body><form action=”demo_form.asp”>
Zgjidh ngjyren e preferuar: <input type=”color” name=”favcolor”><br>
<input type=”submit”>
</form></body>
</html> 

 

Advertisements

HTML5- Pjesa 2

Për t’i ekzekutuar këto shembuj, duhet t’i ruani në një editor me prapashtesën .HTML

<!DOCTYPE html>
<html>
<body>

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #000000;”>

</canvas>

</body>
</html>

Çfarë është Canvas?
Elementi <canvas> HTML5 është përdorur për të nxjerrë grafika zakonisht nëpërmjet scripting (JavaScript).
Elementi <canvas> është vetëm një enë për grafikë. Ju duhet të përdorni një skenar të vërtetë të nxjerrë graphics.
Canvas ka disa metoda për shtigjet vizatim, kuti, qarqet, karaktere, dhe imazhe të shtuar.
<!DOCTYPE html>
<html>
<body><canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #c3c3c3;”>
</canvas><script>var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75); 

</script>

</body>
</html>

html55 Do të shfaqet ky imazh
<!DOCTYPE html>
<html>
<body>

<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″ height=”190″>
<polygon points=”100,10 40,180 190,60 10,60 160,180″
style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;”>
</svg>

</body>
</html>

HTML5 – Pjesa 1

Për t’i ekzekutuar këto shembuj, duhet t’i ruani në një editor me prapashtesën .HTML

 

<!DOCTYPE html>
<html>
<body><video width=”320″ height=”240″ controls autoplay>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
<source src=”movie.webm” type=”video/webm”></video></body>
</html>

Me anë të këtij kodi ju do të shikoni videon

Elementet e reja Semantic / Strukturore
1.<article>
2.<aside>
3.<bdi>
4.<command>
5.<details>
6.<dialog>
7.<summary>
8.<figure>
9.<figcaption>
10.<footer>
11.<header>
12.<mark>
13.<meter>
14.<nav>
15.<progress>
16.<rt>
17.<rp>
18.<section>
19.<time>
1. Përcakton një artikull
2. Përcakton përmbajtjen mënjanë nga përmbajtjen e faqes
3. izolon një pjesë të tekstit që mund të jetë i formatuar në një drejtim të ndryshëm nga teksti tjetër jashtë saj
4. Përcakton një buton komande që një përdorues mund të thirret
5. Përcakton detaje shtesë që përdoruesi mund të shikoni ose fshi
6. Përcakton një kuti dialogu apo dritare
7. Përcakton një kre të dukshme për një element <details>
8. Specifikon vetë-përmbante përmbajtje, si ilustrime, diagrame, fotografi, listings kod, etj
9. Përcakton një tekst i shkruar për një element <figure>
10. Përcakton një futboll për një dokument ose seksion
11. Përcakton një kokë për një dokument ose seksion
12. Përcakton tekstin shënuar / nënvizoi
13. Përcakton një matje skalar brenda një gamë të njohur (një matës)
14. Përcakton Navigation Links
15. Përfaqëson përparimin e një detyre të mos funksionojnë, përcakton një annotation ruby (për tipografi Azisë Lindore)
16. Përcakton një shpjegim / shqiptim të karaktereve (për tipografi Azisë Lindore)
17. përcakton se çfarë për të treguar në shfletues që nuk e mbështesin Annotations rubin
18. Përcakton një seksion në një dokument
19. përcakton një datë / kohë
Elementet Media
1.<audio>
2.<video>
3<source>
4.