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
• Step 4b: Enable navigation between views by using JavaScript to initiate view
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:
crowther2 ; then save the style sheet to the directory mentioned in the first pre-
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.
Search WWH ::

Custom Search