When we build a SharePoint hosted app, all pages and other resources are served by SharePoint from within the app web. For this reason, SharePoint hosted apps automatically inherit the look and feel of the host web and present custom functionality within the familiar SharePoint environment.

This inheritance is not automatic when we create a remote hosted app because the remote web is served from outside the SharePoint environment. There is no requirement to ensure that your remote web looks like the host web but a similar look and feel reassures users, positions familiar links and controls where users expect them, and can ease the adoption of your apptime.
Steps to add host webmaster page to app pages
  1.  To use the Chrome Control, copy the sp.ui.controls.js JavaScript library into your remote web project.
  2. Ensure each page in app includes <script> element to the above JavaScript file.
    <script type="text/javascript" src="../Scripts/sp.ui.controls.js"></script>
  3. Add ChromeLoader.js to appweb project and provide the reference to each page in app
    <script type="text/javascript" src="../ChromeLoader.js"></script>
  4. Add following div element to .aspx page
Best Practice
Use the Chrome Control whenever you want your app to blend with the host web's look and feel.
You cannot be sure that the host web will always use the familiar SharePoint look and feel so, if you hard-code the usual SharePoint design into your app, the app may not look like the customer's host web. The Chrome Control avoids this problem by downloading the style sheet and headers elements from the host web at run time.

Code: ChromeLoader.js

001.var hostweburl;
002.
003.//load the SharePoint resources
004.
005.$(document).ready(function () {
006.
007.    //Get the URI decoded URL.
008.
009.    hostweburl =
010.
011.        decodeURIComponent(
012.
013.            getQueryStringParameter("SPHostUrl")
014.
015.    );
016.
017.    // The SharePoint js files URL are in the form:
018.
019.    // web_url/_layouts/15/resource
020.
021.    var scriptbase = hostweburl + "/_layouts/15/";
022.
023.    // Load the js file and continue to the
024.
025.    //   success handler
026.
027.    $.getScript(scriptbase + "SP.UI.Controls.js", renderChrome)
028.
029.});
030.
031.//Function to prepare the options and render the control
032.
033.function renderChrome() {
034.
035.    // The Help, Account and Contact pages receive the
036.
037.    //   same query string parameters as the main page
038.
039.    var options = {
040.
041.        "appIconUrl": "siteicon.png",
042.
043.        "appTitle": "My Reports",     
044.
045.        //"settingsLinks": [
046.
047.        //    {
048.
049.        //        "linkUrl": "Account.html?"
050.
051.        //            + document.URL.split("?")[1],
052.
053.        //        "displayName": "Account settings"
054.
055.        //    },
056.
057.        //    {
058.
059.        //        "linkUrl": "Contact.html?"
060.
061.        //            + document.URL.split("?")[1],
062.
063.        //        "displayName": "Contact us"
064.
065.        //    }
066.
067.        //]
068.
069.    };
070.
071.    var nav = new SP.UI.Controls.Navigation(
072.
073.                            "chrome_ctrl_placeholder",
074.
075.                            options
076.
077.                        );
078.
079.    nav.setVisible(true);
080.
081.}
082.
083.// Function to retrieve a query string value.
084.
085.// For production purposes you may want to use
086.
087.//  a library to handle the query string.
088.
089.function getQueryStringParameter(paramToRetrieve) {
090.
091.    var params =
092.
093.        document.URL.split("?")[1].split("&");
094.
095.    var strParams = "";
096.
097.    for (var i = 0; i < params.length; i = i + 1) {
098.
099.        var singleParam = params[i].split("=");
100.
101.        if (singleParam[0] == paramToRetrieve)
102.
103.            return singleParam[1];
104.
105.    }
106.
107.}
HTML

01.<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AppWeb.Default" %>
02.
03.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
05.
06.<head runat="server">
07.
08.    <title>Home</title>
09.
10.      <script
11.
13.
14.        type="text/javascript">
15.
16.    </script>
17.
18.    <script
19.
20.        type="text/javascript"
21.
22.        src="../Scripts/jquery-1.9.1.min.js">
23.
24.    </script>    
25.
26.      <script
27.
28.        type="text/javascript"
29.
30.        src="../Scripts/sp.ui.controls.js">
31.
32.    </script>
33.
34.    <script
35.
36.        type="text/javascript"
37.
38.        src="../ChromeLoader.js">
39.
40.    </script>
41.
42.</head>
43.
44.<body>
45.
46.    <form id="form1" runat="server">
47.
48.         <div id="chrome_ctrl_placeholder"></div>
49.
50.    <!-- The chrome control also makes the SharePoint
51.
52.          Website stylesheet available to your page -->
53.
54.        <div style="padding-left:100px">
55.
56.    <h1 class="ms-accentText">My Reports</h1>
57.
58.    <h2 class="ms-accentText"> </h2>
59.
60.    <div id="MainContent">     
61.
62.    <div>
63.
64.        <h2>  </h2>
65.
66.    <hr />
67.
68.        <div>
69.
70.    </div></div></div>
71.
72.    </form>
73.
74.</body>
75.
76.</html>