An HTML Tutorial for Adding Left Navigation
The ability to navigate to a previous Web page exists within all Web browsers by default. However, by providing a section that allows access to multiple pages throughout a website from one convenient menu, a web designer can simplify navigation for users.
Other People Are Reading
Instructions
-
-
1
Open Notepad, and set up the HTML file with the following code:
<html>
<head></style>
</head><body>
<div id="navigation">
<a href="">Navigation item 1</a>
<a href="">Navigation item 2</a>
<a href="">Navigation item 3</a>
<a href="">Navigation item 4</a>
</div>
</body></html>
The <div id="navigation"></div> tags separate the navigation items as special content that will fall into the navigation pane.
-
2
Add style sheet code between the <head></head> tags, like the following:
<style rel="stylesheet" type="text/css">
div#navigation {
float: left;
width: 100px;
height: 100%;
color: #ffffff;
background-color: #666;
padding: 5px;
}
</style>The style sheet information dictates how the information in the navigation <div></div> tags will appear. Essentially, the style sheet code creates a "box" that will contain anything in the navigation tags. So, any information within those tags will conform to the style the style sheet information lays out. The "float" attribute in the style sheet tells the browser that the navigation section will "float" to the left of any other content. The "width" attribute makes sure that the box around the navigation items will stay at 100-pixels wide.
-
-
3
Save the file as an HTML file by selecting "File," then "Save As..." In the file name text box, type the name of the file with the .html extension. The file should look like this:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div#navigation {
float: left;
width: 100px;
height: 100%;
color: #ffffff;
background-color: #666;
padding: 5px;
}</style>
</head><body>
<div id="navigation">
<a href="">Navigation item 1</a>
<a href="">Navigation item 2</a>
<a href="">Navigation item 3</a>
<a href="">Navigation item 4</a>
</div>
</body></html>
-
4
Open the file in a Web browser. The navigation items should align to the left side. The navigation <div> tags now serve as the left-navigation panel.
-
1
References
Resources
- Photo Credit internet - eingabefeld internet http://www image by pmphoto from Fotolia.com
