An HTML Tutorial for Adding Left Navigation

104 17
    • 1). Open Notepad, and set up the HTML file with the following code:

      <html>
      <head>

      </style>
      </head>

      <body>
      <div>
      <a href="/links/?u=">Navigation item 1</a>
      <a href="/links/?u=">Navigation item 2</a>
      <a href="/links/?u=">Navigation item 3</a>
      <a href="/links/?u=">Navigation item 4</a>
      </div>
      </body>

      </html>

      The <div></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>
      <a href="/links/?u=">Navigation item 1</a>
      <a href="/links/?u=">Navigation item 2</a>
      <a href="/links/?u=">Navigation item 3</a>
      <a href="/links/?u=">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.

Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time

Leave A Reply

Your email address will not be published.

"Technology" MOST POPULAR

How to Reset Word 2007 to Default

libxclass0

LI

How to Create a Book in Indesign

gnomermind

What Is MS Office Word?