HTML and CSS Reference
In-Depth Information
From generic blocks to semantic elements
A large share of websites out there have a common layout that includes header and footer, as well as
a navigation bar on the left of the page. More often than not, these results are achieved by using
DIV
elements styled to align to the left or the right.
Let's add a new HTML page to the project: right-click the project node in Solution Explorer and
choose Add | New Item from the subsequent flyout menu. What you get next is the window shown in
Figure 2-3. From that window, you then choose a new HTML page and save it as
multi.html
.
FIGURE 2-3
Creating a new HTML page in Visual Studio.
Next, from within Visual Studio double-click the newly created HTML page and replace the content
with the following markup.
<!DOCTYPE html>
<html>
<head>
<title>MULTI-COLUMN LAYOUT</title>
</head>
<body>
<a href="/default.html">Back</a>
<hr />
<div id="page">
<div id="header">
Header of the page
<hr />
</div>
<div id="navigation-bar">
Search WWH ::
Custom Search