Showing posts with label Windows store apps HTML5. Show all posts
HTML5 audio and video tags
HTML5 contains audio and video tags to play audio files and video files directly on the webpage without using any plugins.
Example HTML5 code with audio and video tags
<!DOCTYPE HTML>
<html>
<body>
<audio controls>
<source src="Krrish.mp3" type="audio/mpeg">
Your browser does not support this audio format.
</audio>
<video>
<source src="Krrish.mp4" type="video/mp4" />
</video>
</body>
</html>
Example HTML5 code with audio and video tags
<!DOCTYPE HTML>
<html>
<body>
<audio controls>
<source src="Krrish.mp3" type="audio/mpeg">
Your browser does not support this audio format.
</audio>
<video>
<source src="Krrish.mp4" type="video/mp4" />
</video>
</body>
</html>
HTML5 Introduction
HTML5 is used to create static webpages with 2d graphics, audio and video players which can be played without installing any flash plugins in browser.
It also have lot of new features like local storage, css3 support and so on.
Basic structure of HTML5 document
<!DOCTYPE HTML>
<html>
<body>
</body>
</html>
HTML5 contains semantic tags like header, article, nav, footer, ...
Header tag is used to hold heading tags present in html document.
article tag is used to hold multiple paragraph tags below to same article in html document.
nav tag is used to hold multiple navigation tags like anchor tags.?
footer tag is used to hold text which is displayed at the bottom of the page as footer.
<!DOCTYPE HTML>
<html>
<body>
<header>
<h1>SQL</h1>
<h>Structure Query Language</h>
</header>
<article>
<p>
This is paragraph1.
</p>
<p>
This is paragraph2.
</p>
</article>
<nav>
<a href="http://www.google.com">Click here to navigate to google</a>
<br/>
<a href="http://www.dbakings.com">Click here to navigate to dbakings website</a>
</nav>
<footer>
Copyrights goes here
</footer>
</body>
</html>
It also have lot of new features like local storage, css3 support and so on.
Basic structure of HTML5 document
<!DOCTYPE HTML>
<html>
<body>
</body>
</html>
HTML5 contains semantic tags like header, article, nav, footer, ...
Header tag is used to hold heading tags present in html document.
article tag is used to hold multiple paragraph tags below to same article in html document.
nav tag is used to hold multiple navigation tags like anchor tags.?
footer tag is used to hold text which is displayed at the bottom of the page as footer.
<!DOCTYPE HTML>
<html>
<body>
<header>
<h1>SQL</h1>
<h>Structure Query Language</h>
</header>
<article>
<p>
This is paragraph1.
</p>
<p>
This is paragraph2.
</p>
</article>
<nav>
<a href="http://www.google.com">Click here to navigate to google</a>
<br/>
<a href="http://www.dbakings.com">Click here to navigate to dbakings website</a>
</nav>
<footer>
Copyrights goes here
</footer>
</body>
</html>
Windows Store apps HTML5 Animations with CSS KeyFrames
Windows Store apps HTML5 Controls Animation with CSS
In this example a square box with paragraph text is displayed on app launch.
With a click on the box the animation starts transforming square box into ellipse with changes in the text and color inside it.
HTML CodeWith a click on the box the animation starts transforming square box into ellipse with changes in the text and color inside it.
<div class="animations">
<p class="box" id="boxAngry">Don't Click Me!<br />(makes me angry)</p>
</div>
Explanation: Paragraph tag with id as boxAngry and css class as box is inside a division tag with css class animations.
CSS Code
.animations .box {
position: relative;
text-align: center;
vertical-align: middle;
width: 300px;
width: 300px;
height: 195px;
font-size: 20pt;
background-color: lightgray;
border: solid 2px blue;
}
.animate-get-angry {
animation: get-angry 5s forwards;
}
@keyframes get-angry {
0% {box-shadow: 0 0 1px 1px #ff0000; color:yellow; border-radius: 0%;}
60% {color: #ffd800; font-size: 22pt; font-weight:400 ;}
80% {color: #ffd800; font-size: 24pt; font-weight:600 ;}
90% {color: #ff6a00; font-size: 32pt; font-weight:800 ;}
100% {color: #ff0000; font-size: 40pt; font-weight:bold ; box-shadow: 0 0 30px 15px #000000;border-color: black; text-shadow: 0 0 10px 2px #22DD22;border-radius: 50%; }
}
@keyframes drop-in {
0% {top: -100px;}
100% {top: 0px;}
}
Explanation: First css class to design div tag as square box with gray background.
Second animation class will perform animation using below keyframes.
Keyframes are used to define animation. % is used to define styles to be applied at regular intervals.
0% frame styles are applied at the starting and 100% frame styles are applied at the end in the mean while styles transformation can be defined as shown in the above css code.
Js code:
boxAngry.addEventListener("animationstart", function (arg) {
boxAngry.innerText = "Angry";
});
boxAngry.onclick = function () {
boxAngry.classList.toggle("animate-get-angry");
};
Explanation: First event fired on animationstart to change the innertext of the paragraph to Angry.
Second event fired onclick to change the css class to animate-get-angry to perform animation.