Web Programming with html5, css, and JavaScript

FIGUre 6.27 
microgrid’s 
index.html
 file that redirects to microgrid2’s 
index.html
 file
262
Chapter 6
 
Links and Images
/* Rules for interpage navigation */
nav u1 {
list-style-type: none;
text-align: center;
padding-left: 0px;
}
nav li {
display: inline-block;
padding: 0px 4px 2px 4px;
margin: 2px 4px 2px 4px;
background-color: lightgoldenrodyellow;
border: outset;
border-color: lightgreen;
}
nav a {text-decoration: none;}

---

Now when a user employs a browser to search for 
microgrid
, instead of getting what you see 
in Figure 6.23, the user gets what you see in Figure 6.24. The latter is a more attractive home page. 
When this home page appears, a user can explore the website by clicking one of the ten raised but-
tons under the website title. Clicking one of the last four buttons—Collector Performance, Electric 
Power Services, Downtown Properties, and Solar Shadowing—doesn’t do anything because those 
web pages do not yet exist. (The four instances of 
href="#"
in Figure 6.25 are dummy references.) 
The 
strong
“Area Description” text in the third button suggests that this button corresponds to 
the (currently displayed) home page. Clicking this Area Description button refreshes this page. 
Clicking either the first, second, fourth, fifth, or sixth button causes the user to jump to a 
page containing material identified by the words on that button. For example, if you click the 
Electric Power History button, the browser jumps to the Electric Power History page. Notice that 
elements in Figure 6.25 do not have 
target
attributes. So, where will a referenced page display? 
It will display on the current web page, completely replacing it, and the website title and naviga-
tion buttons will be gone. It’s not a disaster, because the user can use the back arrow in the upper 
left corner of the browser window to return to the home page and go to other pages from there.