Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1

Lesson 1: Visual Studio 2012 CHAPTER 1 9


special instruction. In HTML5, this special instruction must be the first thing the browser reads
on the page. This instruction is not mandatory, but it is considered a best practice to have it.
Next is the <html> element that consists of the starting tag at the top and ending tag,
</ html>, at the bottom. This is considered the root element of the page, and all other ele-
ments are contained within the html element.
Inside the html element are the head and body elements. The head element typically
contains metadata and page-related instructions. The body element contains content that
will be displayed to the user. In this example, the head element contains a meta element that
describes the character set being used (utf-8), a title that will be displayed in the browser title
bar, links tags that reference CSS files, and script tags that reference JavaScript files. These
references are instructions to the browser to load these files when the page loads. The body
element contains a paragraph element with the message “Content goes here.” This message
appears when the application is executed.
The References folder contains a folder called Windows Library for JavaScript 1.0, which
contains subdirectories that Microsoft provides and maintains. You should not modify files
in this directory structure, but you should explore the files in this folder structure and learn
as much as possible about these files. Of particular importance is the css folder that contains
the ui-dark.css and ui-light.css files. These files set the primary theme for your application to
either a light or dark theme.

MORE INFO LIGHT AND DARK BACKGROUNDS
The default.html file has a reference to the ui-dark.css file. If you run the application, the
application displays the “Content goes here” message on a screen that has a dark back-
ground. If you change the reference to the ui-light.css file, you’ll see a light background.

The css folder contains cascading style sheets for your application. Currently, the
default. html file references a single file called default.css. The CSS file contains instructions for
presenting your HTML file and will be covered in more detail in Chapter 4, “Getting started
with CSS3.”
The images folder contains blank images that are set to the best size for presentation to
the user. You would typically edit these files as part of your finished application.
In the root directory of your application is a file with a .pfx extension that provides a secu-
rity key for deployment and an appmanifest file that contains deployment metadata.

Exploring Visual Studio Express 2012 for Web


When you start Visual Studio Express 2012 for Web, the same Start Page screen is displayed
as shown in Figure 1-1 and described in the previous section. In the installed templates,
you’ll find that they are divided according to .NET programming language, Visual Basic and
Visual C#. Figure 1-4 shows the templates that are installed for Visual Basic.
Free download pdf