HOME
            About US
            Contact Us
            Fun Games

HTML Menu Bars
HTML Menu BarsHTML Menu Bars

Exercise - 25.1 (HTML Menu Bars) :


As explained above, for a navigational bar we have to insert command in both the file i.e. 'html' and 'css'

a) Create an image for link of size 240px * 30px and place in images folder.
b) Open the 'style.css' and place the following command (to define the navigational bar button style)

ul {list-style-type:none;
margin:10px;
padding:0px;}
li {background-image:url('images/link.gif');
width:1240x;
height:30px;
margin:6px;}


c) Open the 'index.html' file and place the following command in between <div id='left'> and </div> tag
<br />
<font color='red' size='5'>& nbsp; & nbsp; & nbsp; <u><i>Quick Link</i></u></font><br /> <br />
<ul>
<li>       <a href='HTML Menu Bars'>Home</a></li>
<li>       <a href='HTML Menu Bars'>Our Products</a></li>
<li>       <a href='HTML Menu Bars'>Our Team</a></li>
<li>       <a href='sample.html'>Contact Us</a></li>
<li>      <a href='HTML Menu Bars'>About Us</a></li>
</ul>


Output: The left portion of index.html will look like Fig- 25.5



Congratulation your 2 web pages are ready. .





© funandhobby.com (HTML Menu Bars)