HTML examples including CSS and Iframes

Copy Paste this code for simple HTML based webpage
1. Used Inline,Internal and External style sheets
2. Used iframe, video, details, summary and some basic tags
Note: you will need some images (html.png), video(1.webm) just save any pic n any video with the same name you will get the output 

Save this as .html extension
<!DOCTYPE html>
<html>
<head>
<title>Examples till CSS</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css">
nav a:hover{color:green;background-color:white;}
</style>
</head>
<body>
<div id="container">
<h1 style="color:brown;font-family:verdana;">All Examples covered in this Page of HTML</h1><hr/>
<nav>
<a href="uptoch4.html">Home Page</a> | <a href="aboutus.html">About Us</a> | <a href="contactus.html">Contact Us</a> | <a href="feedback.html">Feedback</a>
</nav><hr/>
<article>
<p>The website contains the elements like the <b>html tags</b> ,<i>Javascript</i>, <u>Cascading style sheets</u></p>
</article>
<aside>
Gives some information about the article contained in a webpage.
</aside>
<figure id="image1">
<figcaption>HTML5 Logo</figcaption>
<img src="images/html.png" width="200px" height="200px" alt="HTML5"/>

</figure>
<dl>
<dt>What is HTML</dt>
<dd>HTML is a markup language providing the elements attributes for the designing of the webpages</dd>
<dt>What is CSS</dt>
<dd>CSS is used for describing the look and feel of the webpages</dd>
<dt>What is JavaScript</dt>
<dd id="cleard">JavaScript is a scripting language used for validation checks and some function like date time mathematical operation. There are 2 types of JavaScript
<ol>
<li>Client Side Java Script</li>
<li>Server Side Java Script</li>
</ol></dd>
</dl>

<video id="video1" width="420px" height="320px" controls="controls" autoplay="autoplay" loop src="C:\Users\Aqib\Documents\HTML Excercise\Practice\videos\1.webm">
Your Browser doesn't support video
</video>
<iframe src="http://google.com" width="500" height="200" frameborder="0" name="framedpage"></iframe>
<p>To Open the page click on the link <a href="new.html" target="framedpage">Transition</a></p>
<details><summary>Page consist of </summary>
<p>It is the practise of HTML5 examples.</p>
<ul>
<li>CSS</li>
<li>JavaScript</li>
<li>JQuery</li>
</ul>
</details>
</div>
</body>
<footer>
Designed by: MD AQIB FERHAN
</footer>
</html>


Save this as style.css
<style>
h1{color:red;}
p{color:blue;font-family:cambria;font-size:15pt;}
details{color:maroon;font-family:calibri;}
body{background:aliceblue;}
#image1{position:absolute;top:150px;right:100px;}
#video1{position:absolute;top:390px;right:50px;}
ul{list-style-type:square;list-style-position:outside;}
dd #cleard{clear:both;}

</style>



Save this as new.html
<HTML> 
<HEAD> 
<STYLE> 
#listed 
{ 
width:px; 
height:20px; 
background:silver;
-webkit-transition:width 4s; 
/* Chrome */
-o-transition:width 4s; 
/* Opera */ 
} 
#listed:hover 
{ 
height:40px; 
} 
#list1{
visible:no;
}
</STYLE> 
</HEAD> 
<BODY> 
<DIV>
<ul id="listed">
<li>College Affiliation</li>
<ul>
<li id="list1">The college is affiliated to the NIIT Ltd.</li>
</ul>
</ul>
</DIV> 
</BODY> 

</HTML>

Save this image as html.png

I THINK I HAVE UPLOADED ALL THE RESOURCES. SOME MORE EXAMPLE WILL BE UPLOADED SHORTLY.