Cut and paste html codes. Navigation

Build Your Website the Easy Way
With Cut and Paste Web Page Elements!

Navigational Page Elements

A navigational html element usually lists links to other pages on the web site. Your navigational element should look the same on all of your pages and everyone of your web pages should have a navigational bar. This helps your visitors to find information on your website no matter what page they enter in on. Use any one of the following navigational elements and modify it as you see fit.

Navigation #1

<table width="100%" cellpadding="4" cellspacing="1"> <tr> <td align="middle"><a href="#">Lorem </a></td> <td align="middle"><a href="#">Ipsum </a></td> <td align="middle"><a href="#">Dolar </a></td> <td align="middle"><a href="#">Sic Amet </a></td> <td align="middle"><a href="#">Consetetur </a></td> </tr> </table>
Copy and paste the HTML code
for navigation #1 from here.

Navigation #2

<table width="100%" cellpadding="4" cellspacing="0"> <tr> <td><div align="center"><a href="#">Lorem </a></div></td> <td><div align="center">• </div></td> <td><div align="center"><a href="#">Ipsum </a></div></td> <td><div align="center">• </div></td> <td><div align="center"><a href="#">Dolar </a></div></td> <td><div align="center">• </div></td> <td><div align="center"><a href="#">Amit </a></div></td> <td><div align="center">• </div></td> <td><div align="center"><a href="#">Consetetur </a></div></td> </tr> </table>
Copy and paste the HTML code
for navigation #2 from here.

Navigation #3

<-- Lorem

Ipsum -->

<table width="100%" align="center" cellpadding="4" cellspacing="0"> <tr> <td align="right" width="50%"><a href="#"><-- Lorem </a></td> <td><a href="#">Ipsum --> </a></td> </tr> </table>
Copy and paste the HTML code
for navigation #3 from here.

Navigation #4

Lorem
1 2 3 4 5 6 7 8 9 10
Ipsum

<table width="100%" cellpadding="4" cellspacing="0"> <tr> <td align="middle" width="20%"><a href="#">Lorem </a></td> <td align="middle" width="80%"><a href="#">1 2 3 </a> 4 <a href="#">5 6 7 8 9 10 </a></td> <td align="middle" width="20%"><a href="#">Ipsum </a></td> </tr> </table>
Copy and paste the HTML code
for navigation #4 from here.

Navigation #5

Lorem Ipsum Dolar Amit

<table align="center" cellpadding="0" cellspacing="0"> <tr> <td width="20"></td> <td align="middle" width="60" bgcolor="#999999">Lorem </td> <td width="20"></td> <td align="middle" width="60"><a href="#">Ipsum </a></td> <td width="20"></td> <td align="middle" width="60"><a href="#">Dolar </a></td> <td width="20"></td> <td align="middle" width="60"><a href="#">Amit </a></td> <td width="20"></td> </tr> <tr> <td bgcolor="#cccccc" colspan="10"><table cellspacing="0" cellpadding="0"> <tr> <td></td> </tr> </table></td> </tr> </table>
Copy and paste the HTML code
for navigation #5 from here.

Navigation #6

Lorem
	Ipsum
	Dolar
Sic Amet
	Consetetur
>	Sadipscing
	Elitr

<table cellspacing="0" cellpadding="4"> <tr> <td colspan="2"><a href="#">Lorem </a></td> </tr> <tr> <td></td> <td width="100%"><a href="#">Ipsum </a></td> </tr> <tr> <td></td> <td width="100%"><a href="#">Dolar </a></td> </tr> <tr> <td colspan="2"><a href="#">Sic Amet </a></td> </tr> <tr> <td></td> <td width="100%"><a href="#">Consetetur </a></td> </tr> <tr> <td>> </td> <td width="100%">Sadipscing </td> </tr> <tr> <td></td> <td width="100%"><a href="#">Elitr </a></td> </tr> </table>
Copy and paste the HTML code
for navigation #6 from here.

Navigation #7

Lorem
Ipsum
.	Dolar
.	Sic Amet
Consetetur
.	Lorem
.	Ipsum
.	Dolar

<table cellspacing="0" cellpadding="4"> <tr> <td colspan="2">Lorem </td> </tr> <tr> <td colspan="2">Ipsum </td> </tr> <tr> <td>• </td> <td width="100%"><a href="#">Dolar </a></td> </tr> <tr> <td>• </td> <td><a href="#">Sic Amet </a></td> </tr> <tr> <td colspan="2">Consetetur </td> </tr> <tr> <td>• </td> <td><a href="#">Lorem </a></td> </tr> <tr> <td>• </td> <td><a href="#">Ipsum </a></td> </tr> <tr> <td>• </td> <td><a href="#">Dolar </a></td> </tr> </table>
Copy and paste the HTML code
for navigation #7 from here.

Navigation #8
[Title and links; with table, separate rows and colored cells]

Lorem

<table cellspacing="0" cellpadding="4"> <tr> <td bgcolor="#999999">Lorem </td> </tr> <tr> <td bgcolor="#cccccc"><a href="#">Ipsum </a></td> </tr> <tr> <td bgcolor="#cccccc"><a href="#">Dolar </a></td> </tr> <tr> <td bgcolor="#cccccc"><a href="#">Sic Amet </a></td> </tr> <tr> <td bgcolor="#cccccc"><a href="#">Consetetur </a></td> </tr> <tr> <td bgcolor="#cccccc"><a href="#">Sadipscing </a></td> </tr> </table>
Copy and paste the HTML code
for navigation #8 from here.

Navigation #9
[With table and separate rows]

Lorem

Ipsum

Dolar

Sic Amet

Consetetur

<table cellspacing="1" cellpadding="4"> <tr> <td><a href="#">Lorem </a></td> </tr> <tr> <td><a href="#">Ipsum </a></td> </tr> <tr> <td><a href="#">Dolar </a></td> </tr> <tr> <td><a href="#">Sic Amet </a></td> </tr> <tr> <td><a href="#">Consetetur </a></td> </tr> </table>
Copy and paste the HTML code
for navigation #9 from here

Navigation #10
[With one table, no rows, single vertical line]

Lorem
Ipsum
Dolar
Sic Amet
Consetetur

<table cellspacing="0" cellpadding="0"> <tr> <td width="100%"><a href="#">Lorem </a> <a href="#">Ipsum </a> <a href="#">Dolar </a> <a href="#">Sic Amet </a> <a href="#">Consetetur </a></td> <td width="1" bgcolor="#000000"><table cellspacing="0" cellpadding="0"> <tr> <td></td> </tr> </table></td> </tr> </table>
Copy and paste the HTML code
for navigation #10 from here

Navigation #11

<table width="100%" border="0" align="center" cellpadding="4" cellspacing="1" bgcolor="#FFFFFF"> <tr bgcolor="#FF6600"> <td width="20%" align="center"><a href="#">Home</a></td> <td width="20%" align="center"><a href="#">About Us </a></td> <td width="20%" align="center"><a href="#">Products</a></td> <td width="20%" align="center"><a href="#">Prices</a></td> <td width="20%" align="center"><a href="#">Contact Us </a></td> </tr> </table>
Copy and paste the HTML code
for navigation #11 from here

Need More cut and paste codes?

Web Design Mastery is a complete Internet Marketers Reference Guide.

Not only will you learn how to design a professional web site, but you'll also learn in the easiest possible fashion -- with hundreds of copy & paste codes... more information

"Finally! A Quick and Easy Way For YOU to Painlessly Set Up Your OWN Moneymaking 'Mini' Websites... Without Being a Computer Geek, Buying Expensive Software, or Paying Outrageous Fees To A Webmaster!"

Web Design Resources;

How to choose a host provider

How to choose a domain name

Free password manager

Free web design ecourse

Web safe colors chart

Color name chart

Web site optimization

Cut and paste html codes

How to create a web page (Tutorial)

Free html editors

Free Web Tools

Articles;

Audio on websites
Html basics
FTP software
Design Don'ts
Web design tips
Web design reviews
Does your website sell?
The Truth about Free Hosting
An introduction to the internet
Top 5 reasons to get a web site
Top 10 mistakes made by newbies
Build a Business, with Site Build it
Setting up your first web site
The easiest way to make money online.
Do you have what it takes to make your own website?
This Weeks Web Design Article (updated weekly)

Didn't find what you are looking for? Search Google for more information.

The information provided here is meant to be a beginning to your own research and just food for thought, I take no responsibility for your application of the information. You may come up with totally different findings as the Net is a constantly and consistently changing place. Keep learning.

Email Me!

Build Your Website the Easy Way With Cut and Paste Web Page Elements!

Navigational Page Elements

Build Your Website the Easy Way
With Cut and Paste Web Page Elements!