Tutorials / Creating an Event Planning Application / Step 2 of 4: Creating the Application's Web Forms / d. Creating the Home Folder Elements
d. Creating the Home Folder Elements

In this step, you'll create the application elements found in the Home folder.

  1. From the Home folder, double-click the About file to open it. Replace the existing markup with the following:

    To write code in Source View

    <div data-role="appviewpage" data-title="About">
           <div data-role="header"><h2>About</h2></div>
           <div data-role="content">
                  <article>
                         <p>
                               Use this area to provide additional information.
                         </p>
                  </article>
                  <aside>
                         <h3>Aside Title</h3>
                         <p>
                               Use this area to provide additional information.
                         </p>
                         <ul>
                               <li><a href="Index.aspx">Home</a></li>
                               <li><a href="About.aspx">About</a></li>
                               <li><a href="Contact.aspx">Contact</a></li>
                         </ul>
                  </aside>
           </div>
    </div>
  2. From the Home folder, double-click the Contact file to open it. Replace the existing markup with the following:

    To write code in Source View

    <div data-role="appviewpage" data-title="Contact">
           <div data-role="header"><h2>Contact</h2></div>
           <div data-role="content">
                  <h3>Phone</h3>
                  <span>425.555.0100</span>
     
                  <h3>Email</h3>
                  <span><a href="mailto:General@example.com">General@example.com</a></span>
           </div>
    </div>
  3. From the Home folder, double-click the Index file to open it. Replace the existing markup with the following:

    To write code in Source View

    <div data-role="appviewpage" data-title="Index">
           <div data-role="header"><h2>Home Page</h2></div>
           <div data-role="content">
                  <p>
                         This application was built with Wijmo, jQuery Mobile. Learn more about Wijmo at <a href="http://wijmo.com">http://wijmo.com</a>.
                  </p>
           </div>
    </div>