HTML and CSS Reference
In-Depth Information
Exploring the default.html File
he
default.html
file is the one that Windows 8 loads when the Metro app is started. You can
change the start file by opening the
package.appxmanifest
file and changing the value for the
Start Page
setting, but I am going to stick with the default. (Don't worry about the rest of
the
package.appxmanifest
file; I'll come back to that in later chapters.) Metro HTML files are
just like regular HTML files, and all of the HTML5 features and support available in Internet
Explorer 10 is available for use in your Metro apps. Listing 1-2 shows the contents of
default.
html
. I have highlighted the additions I made to put some basic structure in place.
Listing 1-2.
The Contents of the default.html File
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MetroGrocer</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<!-- MetroGrocer references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js"></script>
</head>
<body>
<div id="contentGrid">
<div id="leftContainer" class="gridLeft">
<h1 class="win-type-xx-large">Left Container</h1>
</div>
<div id="topRightContainer" class="gridRight">
<h1 class="win-type-xx-large">Top Right Container</h1>
</div>
<div id="bottomRightContainer" class="gridRight">
<h1 class="win-type-xx-large">Bottom Right Container</h1>
</div>
</div>
</body>
</html>
As the listing shows,
default.html
is a regular HTML5 document, but with a few key differ-
ences. For example, there are
link
and
script
elements that use nonstandard URLs:
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
he
base.js
and
ui.js
files contain the JavaScript code for the
WinJS
API, which you use
to create JavaScript Metro apps. I'll introduce some of the most useful parts of WinJS in later
chapters.
Search WWH ::
Custom Search