The user interface of Windows Store applications - Build Windows 8 Apps with HTML5 and JavaScript - page 125

<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
In this case, /css and /js refer to the physical folders in your current project.
Adding fixed user interface blocks
The sample application you get from the Blank App template has a dark background and simply
displays some placeholder text. You might want to customize your application in a number of ways—
for example, by adding a header and footer bar. Here are the header and footer that you used in
previous examples:
<header>
Start Here! Build <b>Windows 8</b> Applications with <b>HTML5</b> and
<b>JavaScript</b>
<hr />
</header>
<footer>
<hr />
Dino Esposito | Francesco Esposito
</footer>
As an exercise, let's make these components reusable so that you can save them in a page and
reference the page wherever needed without worrying about the internal details.
The first step consists of creating a new custom folder in the project. You right-click the project
node (named TodoList ) and from the subsequent menu select the Add | New Folder option. Name the
new folder Pages.
Note When creating a new folder, if you accidentally miss editing the folder name, then
you likely find a new folder in the project named “New Folder.” No worries; you just click
it for a while (sort of a long click where you hold the mouse button down for about a
second). That will switch the project item into edit mode again, at which point just type
Pages, and click outside the text box to save your change.
To add a reusable block of HTML, you now right-click the Pages node in the Visual Studio Solution
Explorer and select Add | New Item from the context menu. From the window shown in Figure 6-3,
you then select HTML Page and name it header.html . Next, repeat the steps and create a second
HTML Page named footer.html.