HTML and CSS Reference
In-Depth Information
• Step 2: Write HTML code for the navigation bar.
• Step 3: Create views with
<section>
elements.
• Step 4a: Enable navigation between views by using CSS to define section visibility
rules.
• Step 4b: Enable navigation between views by using JavaScript to initiate view
changes.
Prerequisites
Before you create the application, you need to handle a few prerequisites:
• Create a new directory on your web server. When the chapter tells you to create or
edit a file, save it to this directory.
• You won't be creating the CSS style sheet. Instead copy the CSS style sheet
for
chapter 5
from the code package at the topic's website:
www.manning.com/
requisite.
Note that all files for this chapter and the topic are available at the Manning website:
Enough chatter about what you're going to build, let's get building!
5.1.1. Defining the HTML document structure
In this section, the index.html file will define a very basic
<head>
and
<body>
frame-
work for the application. The index.html file will contain a title and font for the application,
as well as a
<script>
element to tell the application where the JavaScript file is located.
Near the end of index.html, a
<body>
element will be added to hold the HTML markup
coming in subsequent sections.
Step 1: Define the top-level HTML structure
Create a file named index.html and include the contents of the following listing. This code
defines the basic layout of the page and loads external CSS and JavaScript files.
