HTML and CSS Reference
In-Depth Information
Then edit the content of
footer.html,
as shown below:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<footer>
<hr />
Dino Esposito | Francesco Esposito
</footer>
</body>
</html>
Save your changes.
The next step consists of referencing your new header and footer elements from the main page—
default.html
. So open
default.html
for editing and modify the
BODY
tag, as shown below:
<body>
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri:'/pages/header.html'}"></div>
<h1>TO-DO List</h1>
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri:'/pages/footer.html'}"></div>
</body>
The
data-win-control
attribute transforms the
DIV
into an HTML control that simply shows the
content of the referenced file, namely
header.html
. The same happens for
footer.html
.
Back in Chapter 1, “Using Visual Studio 2012 Express edition,” you added a bit of color and style to
default.css
; do the same here, and edit the
default.css
file, as shown below:
body {
background-color: #1649AD;
padding: 10px;
}
header {
font-size: x-large;
color: #ffffff;
padding-bottom: 50px;
}
footer {
padding-top: 50px;
font-size: large;
color: #eeee00;
Search WWH ::
Custom Search