HTML and CSS Reference
In-Depth Information
<aside id="sidebar">
<section id="titles">
<article class="book">
<header>
</header>
</article>
<article class="book">
<header>
</header>
</article>
<article class="book">
<header>
</header>
</article>
<article class="book">
<header>
</header>
</article>
<article class="book">
<header>
</header>
</article>
</section>
</aside>
</div>
<footer>
</footer>
</body>
</html>
This is just basic HTML structure that you could have inferred from the diagram shown in Figure
4-2
. he
article
elements have the
class
attribute assigned as you will use this for styling purposes. I assigned the
id
attribute to a few of the top-level elements. I also added an anchor element
(<a id="feature"></a>)
to each of
the main content articles. You will setup navigation links to these in the
nav
element.
Adding the Content
There's nothing particularly special about the content. It's a lot of text (mostly Lorem ipsum), a few images, and
some links.
In the Navigation pane, right-click the Chapter
4
project and select the New Folder link. Enter
Images
for the
folder name. An
Images.zip
file is included with the downloadable source code. Copy the images from this file to
the new Images folder in your project.
I recommend downloading the content rather than entering it manually. There is a
Default_content.cshtml
file available in the source code. Replace your current implementation of this with the code in this file. It contains
only the content of this page without any styles defined. If you want to enter the content manually, it is shown in
Appendix A.
