HTML + CSS to create navigation bar for website

1. Webdesigning
</>
HTML+CSS
{ }
Navigation Bar
By:
Vijay Kumar Verma (VJY)
Roll No-1326910
4-March-2014
1

2. Purpose
What is Navigation
Lists tag
Some CSS Property
Create Navbar
BY: VJY
3/4/2014
2

3. What is Navigation Bar
Navigation Bar = List of Links
It is a section of a website or online page
intended to aide visitors in travelling through
the online document.
| It may be set of buttons and graphics typically
in row or column
| It is used as the central point that link the
pages.
| Drop Down: A menu of options that appears
below the item when the computer user clicks
on it.
|
|
BY: VJY
3/4/2014
3

4. Example
Navigation bar
BY: VJY
3/4/2014
4

5. Now
What is Navigation
Lists tag
Some CSS Property
Create Navbar
BY: VJY
3/4/2014
5

6. Lists Tag
A number of connected items or names
written or printed consecutively, typically one
below the other.
 Formatting Tags
 Lists and the items within them are blocklevel elements.
 Types:

1.
2.
3.
BY: VJY
Numbered lists (called ordered lists)
Bulleted lists (called unordered lists),
Definition lists,
3/4/2014
6

7. Example
<ol>
<li>Adobe Photoshop</li>
<li>Adobe Illustrator</li>
<li>Adobe After Effect</li>
</ol>
Adobe Photoshop
Adobe Illustrator
Adobe After Effect
BY: VJY
3/4/2014
7

8. Now
What is Navigation
Lists tag
Some CSS Property
Create Navbar
BY: VJY
3/4/2014
8

9. CSS Properties
|
Display
|
Background
|
Clear
|
Border
|
Float
|
Text-decoration
|
Position
|
List style
|
Margin
|
Content
|
Width
|
Color
BY: VJY
3/4/2014
9

10. Now
What is Navigation
Lists tag
Some CSS Property
Create Navbar
BY: VJY
3/4/2014
10

11. Want to create it?
BY: VJY
3/4/2014
11

12. Have Any Question?
Just Ask!
Post Query On
facebook.com/groups/sviet.mca
Email@
vjy.softworx@gmail.com

13. Thank You!