HTML 5.txt

<div data-role="page" id="page1">
    <div data-role="header">
         <h1> Web In One </h1>

    </div>
    <div data-role="content"> <a href="#Images"><button>Images</button></a>
 <a href="#Videos"><button>Videos</button></a>
 <a href="#Music"><button>Music</button></a>
 <a href="#Location"><button>Location</button></a>
         

    </div>
</div>
<div data-role="page" id="Images">
    <div data-role="header">
         <h1> Images </h1>
 <a data-rel="back" data-icon="home">Home</a>
    </div>
    <br>
    <br>
    <br> <a href="#UMKC" data-rel="popup">
             <center><img src="http://www.komu.com/images/news/2012-05/umkc.jpg"  width="200" height="100"/></center>
             <p><center>UMKC</center></p>
         </a>
        
        <div data-role="popup" id="UMKC" >
<iframe src="http://photobucket.com/images/umkc?page=1" width="497" height="398"
 seamless></iframe>
        </div>
            
 <a href="#Kansas" data-rel="popup">
     
             <center><img src="http://therecoveringpolitician.com/wp-content/uploads/2012/05/KansasCity.jpg" width="200" height="100"/></center>             
             <p><center>Kansas city</center></p>
         </a>
        <a href="https://www.google.com/imghp?hl=en&tab=wi&ei=XX7uUrG0B4bR8wGFmIKQCA&ved=0CAQQqi4oAg" target="_blank">For more visit: here</a>

        <div data-role="popup" id="Kansas" >
<iframe src="http://photobucket.com/images/Kansas%20city?page=1" width="497" height="398"
 seamless></iframe>
        </div>
        
</div>
        
<div data-role="page" id="Videos">
    <div data-role="header">
         <h1> Videos </h1>
        <a data-rel="back" data-icon="home">Home</a>
    </div>


    <p>1.HTML Tutorial
        <br/>
    </p>
    <video width="300" height="200" controls>
        <source src="http://media.w3.org/2011/11/conf/HTML5_Divide.mp4" type="video/mp4"/>
    </video>
    <p>1.JavaScript Tutorial
        <br/>
    </p>
    <video width="300" height="200" controls>
        <source src="http://media.w3.org/2011/11/w3c-described.webm" type="video/webm"/>
    </video>
    <br>
    <a href="https://www.youtube.com" target="_blank">For more visit: here</a>
</div>

<div data-role="page" id="Music">
    <div data-role="header">
         <h1> Music </h1>

       <a data-rel="back" data-icon="home">Home</a>
    </div>
    <p>a) Audio 1
        <br/>
    </p>
    <audio controls>
        <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="audio/mp4"/>
    </audio>
    <p>b) Audio 2
        <br/>
    </p>
    <audio id="audio">
        <source src="http://media.w3.org/2010/05/sound/sound_5.mp4" type="audio/mp4"/>
    </audio>
    <button id="play"  data-mini="true" data-inline="true">Play</button>
    <button id="pause" data-mini="true" data-inline="true">Pause</button>
  <br><br>
    <a href="http://www.jango.com/" target="_blank">For more visit: here</a>
</div>
</div>
<div data-role="page" id="Location">
    <div data-role="header">
         <h1> Location </h1>

        <a data-rel="back" data-icon="home">Home</a>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script> 
<p>1. Current Location</p>
<div id="map1"></div> 
    

    <p>2. Direction Service</p>
   
From: <input type="text"  id="from"><br>
  To  : <input type="text" id="to"><br>
        
<button id="button" data-mini="true" data-inline="true">Show Direction</button><br><br>
<div id="map_canvas" style="height: 400px; width: 400px"></div>
    
 </div>