HTML Menu Bars
HTML 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)