HTML and CSS Reference
The Debug option in Figure 1-15 refers to the way in which the compiler produces the code.
In debug mode, the binaries include additional information that allows you to set breakpoints on
specific lines of code and proceed step by step. A breakpoint is a line of code where execution will
pause. You typically use breakpoints to stop execution at a given point and investigate the state of
the application and its internal data. You can have multiple breakpoints in the program. The Release
mode is required for inished applications ready for distribution. In the topic, you'll be using the
Debug mode predominantly.
Figure 1-16 shows the application in action on the local machine.
FIGURE 1-16 The HelloWin8 app in action.
If you run the application in the simulator, then the application runs in a separate window you
can control at will. When you run it on the local machine, then the app runs full screen and it is not
immediately apparent what you need to do to get back to Visual Studio to terminate the app. Here's
how to exit the application: move the mouse towards the left border until you see a window icon to
click to return to the desktop mode. To terminate the app, you then click the Stop button that has
replaced the Play button in the Visual Studio user interface.
You're done. But it was way too simple, wasn't it? So let's make the sample application more
colorful and add a bit of action too.
Adding a bit more action
Create a new project and name it HelloWin8-Step2 . First, you'll make it more colorful by simply
adding more HTML elements and style information. Next, you will transform it into a simple but fully
functional application that generates a random number.
Adding style to the page
Open up the default.html page and edit its body tag. The body should now include title and subtitle
separated with a line. You use a couple of HTML5 elements for this. Note that in the next chapter
you'll learn a lot more about HTML5. Here's the modified body of the page: