Code not working as expected plz help

Code not working as expected plz help

I am following a book on jquery mobile, the code does not work as expected, for instance I have following code, the book is perhaps following some iPhone emulator that displays the Logout and Settings properly
inside the title bar, but when I try this in my browser on my PC, it shows the Logout on top, then the page
title, then the setting link, I have tried to preview on my mobile device as well, same issue. Please help
me. I have also attached the image where my files are located, this file is: Toolbar.html

  1. <!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <title>Up and Running with jQuery Mobile</title>
    <link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
    <script src="jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.0.min.js">
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>








  2. <div data-role="page" data-fullscreen="true">
    <div data-role="header">
    <a href="logout">Log out</a>
    <h1>Title</h1>
    <a href="settings" data-icon="gear">Settings</a>
    </div>
    <div data-role="content">
    </div>
    <div data-role="footer" data-position="fixed">
    </div>
    </div></body>
    </html>