Educational References

How to create basic navigation menus using html and css?

Navigation Bar is very important for any website especially for the web designer how it looks the website is. However, simple html code cannot provide beautiful navigation bars without the help of Cascading Style Sheet (CSS). With that, a tedious html code can transform into attractive or good looking and easy-to-use navigation menus. Exploring CSS can help a lot in designing a website, the position of text, alignment, border, color, images, etc. Unfortunately, avoid using excessive CSS because there are other browsers does not support the compatibility features of CSS.

Now, navigation bar needs standard HTML syntax.

<html>

<head>

<body>

<ul>

<li><a href=”#”>Product</a></li>

<li><a href=”#”>Service</a></li>

<li><a href=”#”>About</a></li>

</ul>

</div>

</body>

</html>

When you noticed between the opening and closing tag of head, there’s include <link rel=StyleSheet href=”navStyleSheet.css” type=”text/css” media=screen> because we import CSS from external source into our HTML tag in order to use CSS script to control our navigation menus.

Fig. 1

Above is the sample output html code, its very simple. Now, we are going to put some CSS script so that it looks well.

Fig. 2

#navigation-menu{

float:left;

background-color:#333;

}

That’s how it looks when it put css script. Don’t worry, that’s not the end with our tutorials, lets work further.

Fig. 3

#navigation-menu ul{

padding: 0;

margin: 0;

}

when you saved and press F5, it looks like sample shown in figure 3.

Fig. 4

#navigation-menu ul li{

list-style-type:none;

display:inline;

}

We now created simple navigation bar, when you notice the id navigational-menu ul li, because of the css script list-style:none we omit bullets in every list item and it diplay inline. If you change it inline into block, it returns to the normal view like in figure 3.

Fig. 5

#navigation-menu ul li a{

display:block;

padding: 5px 10px;

float:left;

color:#fff;

text-decoration:none;

border-right: 1px #fff dotted;

}

At the beginning, we created a non – sense navigation bar. Now, noticed how powerful CSS? It is more appreciatable and it looks beautiful when they applied. That’s the essence of CSS!

Visit w3schools.com for more information about HTML and CSS.

Start with Dropbox? Sign up

Want to view your Personal Web Page that available through online for free?

Dropbox offers free storage of files online that stores 2G for the minimum storage, also it increase the size of your storage every referrals you sent to your friends. One good thing about dropbox, you can host your personal home page with simple HTML files, CSS, scripts, etc. that available online. However, only standard HTML files with client side scripting is allowed. Server side scripting like PHP or ASP.NET will not work. In addition, directory indexing does not work so the index.html part is required or it will trigger a 404 error. What we aim for, the visibility of your personal page online that anyone can view anywhere in the place. Now, where to get your personal domain for free? It’s not the problem, there are other sites offers free hosting that meets our needs such as co.cc, co.nr, and dot.tk. In this sample, I choose dot.tk for free hosting domain name, when you notice, its look more professional and easy to remember.

Now, go to dropbox.com to sign up your account, after that, you are going to download dropbox to easy upload files. Just simply create your folder name and paste it where do you want.

Dropbox is easy to learn!

Consider you’ve already created html files. Take note that Dropbox files in the ‘Public’ folder each have a link that you can share with the world. But did you know this can be used in many clever ways, including hosting your very own website.

Open the public folder to store your html file, make sure you’ve already create index.html. Also, you can create a folder inside a public folder where all file saves in one folder.

This is the sample screenshot:

The name of my folder name inside public folder is web.

Right click on index and Copy pubic link. After that, dialog box will appear to copy the link. In copying the link, you can shorten you link. By the way, htm or html was the same function.

After copied the link of your index.html, its time to create a domain name in order to shorten the name once it type. Now, go to dot.tk and paste the copied url from index.html to the TK Domain name and click GO to continue registration.

Note: make sure your domain name is readable; you can’t modify it unless you delete first the registered domain and create a new one.

Now, you may able to view your domain name anywhere you are online.