Tuesday, July 30, 2013

NAVIGATION BAR (w/ free download)

What is navigation bar? How to create horizontal navigation bar?

  • The bar that has several links to navigate the website.
  • The navigation bar provides an easy navigation of webpage in a website.
  • A collection of link that is formatted (to be a bar).
  • Usually it looks vertical or horizontal depending to website.

Kinds of navigation bar.

Text Format navigation bar – Accepted by all browser, simple and easy to create navigation bar. Combination of link or <a> element and formatted horizontally or vertically. Text Format navigation bar contribute, to reduce the loading time of website, but very boring or static to the eyes of its user. Example of text formatted navigation bar:
CSS navigation bar – Accepted by all browser depending to the CSS declared property (some CSS property are not compatible in user’s browser). Popularize because of CSS :hover selector. CSS navigation bar are fancy and eye catchy, in terms of loading time it depends to type of CSS used.
Graphics navigation bar – Focus on using image, choice of right icon contribute to the description and usability of the bar. The disadvantage of graphics navigation bar; it loads longer, because it compose many picture. If the picture failed to load, the link must have alt attribute/tag, serves as text alternative display.

Let’s create CSS horizontal navigation bar

In creating a navigation bar HTML was used as base, the CSS is also needed to provide the formatting and some website programmer add graphics to make it more eye catchy. But in our navigation bar we just use HTML and CSS. Then let’s start:
Essentially navigation bar is listing of links, so the <ul> and <li> elements will be the perfect bone for the navigation bar. We will start by making nested <ul> and <li>.
<ul id='navigate'>

Then, when done in the code above you should have this following output:
Then make an External Style sheet, the filename of the style sheet should match the name declared in the <link> tag. Example "<link rel="stylesheet" type="text/css" href="THE FILENAME MUST BE MATCH">".
Inside the external style sheet, declaration of right property and value is the key to transform the list link into, fancy and eye catchy navigation bar. The first step is, format the parent element of <li> and that is <ul>, I decide to put ID attribute in <ul> because the CSS property of <ul> is unique. The CSS declaration of <ul> :
#navigate li{

By correct typing this declaration into your external style sheet, you should have this output:
EXPLANATION: The symbol "#", meaning it's an ID, and the word after #, is the ID name (navigate). I’ve decided to remove the bullet decoration of each list items, so use the property list-style and assign the value none. Float property makes the block element go to the next block element, the value of float property is left, meaning the entire element that is inside of the parent element <ul>, should align left.
The float explanation:
Then I set the font to arial by using font-family property.
My next step is, declaring the width of each <li>:
#navigate li{

I set the value to 10%, I use % unit so that, in any screen resolution, my navigation item/tab should always be 10%. I should look like this after applying the width:10% (image bellow):
Then after the declaration of width of each tab, let’s now transform it to navigation bar with background color and design. Before you can accomplish that you should add this CSS declaration first.
#navigate a{

With this CSS declaration above, "#navigate a" meaning that all element <a> inside the parent element <ul> with the id name navigate, should be formatted depending to the declaration of property and value that we put inside of paired curly braces ({ }).
Then set the background color of each link tab by using background-color:#fff000, and remove the underline of the text using text-decoration, with the value of none. Also I make the font bold by using font-weight:bold, and change its color with the use of color:#1c8114, and align to the center of their tab,by using text-align:center. Lastly I put spacing on top and bottom of the text inside our navigation tabs, then I use this property and value padding:30px.
Your navigation bar should look like this:
The missing part of our navigation bar is the hover effect, then add this CSS declaration bellow.
#navigate a:hover{

When the user tries to select from the five(5) navigation tabs, tabs will eventual change its background color and text color accordingly to the declared property and style inside the #navigate a:hover, and it look like this(image bellow).
the user move the mouse cursor over the product tab
That’s a simple and easy instruction on how to create a navigation bar and explanation what is navigation bar.

- Source code formatter

Friday, July 26, 2013

What is css and how to implement?

CSS (Cascading Style Sheets) – define the looks of html element, server as the solution in HTML 3.2 where the web developer use styling tags like tags, using those style tags like tags was a straggle to the part of web developer in which it was add line by line into the html document.

Three ways of implementing CSS into HTML page:

  • Internal Style Sheet
  • External Style Sheet
  • Inline Style

Internal Style Sheet

From its title internal style, literally this type of CSS was embedded inside your HTML page. This was place inside your <head> section, and you must use the <style> tag to declare and recognize it by the HTML page as internal CSS. Example of internal CSS:
  <title>Internal Style</title>
  <p>DRESS ME UP</p>

In example bellow I place the internal CSS inside the <body> section, placing it to the <body> section is improper. But still it dresses the <p> element. Remember styles are always place on the <head> section of HTML.
  <title>Internal Style</title>
  <p>DRESS ME UP</p>

What is the reason of applying and not applying internal style sheet?

The main reason of applying the internal style sheet is when the HTML page has unique design or appearance. It’s not advisable to apply inline CSS if the page is common, why? Imagine there are hundreds of HTML page, suddenly modification of font is needed, and internal CSS method was applied. Can you imagine how long it takes before you modify it all?

External Style Sheet

The External style contradicted to the idea of internal style. Internal CSS focus on unique page design, while external CSS apply for several html pages. Changing one property’s value inside the external CSS can result of changing the entire website. But before doing that, all of HTML page must have <link> tag in order to locate the external CSS and to define that the style source is external and again it must be place inside the <head> section. Example of link tag:
 <title>External style</title>
 <link rel="stylesheet" type="text/css" href="external_style.css">     

"external_style.css" notice the “.css” file extension, meaning it is CSS. Remember external CSS should not have html code or tags inside. Any text editor can be used in writing external CSS, and always save the file with “.css” extension name. Example of external style sheet:
p {margin-top:40px;}

Advantage of External style sheet

By using External CSS the bandwidth requirement cost is dramatically reduce, and the modification is easy. Internal CSS, the webserver download the style every time it loads / reloads, while in external CSS the downloading of the style is done only once, the reason is, you just link the same CSS with many HTML pages. In that case external CSS contributes to decrease website loading time.

Inline Stye

Combine the CSS into the html tag. The inline style inserted into an html tag with the use of ‘style’ attributes. The value of ‘style’ tag, is the CSS declaration of property and value, it must be separated or terminated by semicolon. Example:
<span style=’margin-top:40px;color:#cccccc’>Inline style</span>

Advantage and disadvantage of inline style

One of the advantages using inline style is when quick fix is needed, meaning there’s no need to create or to trace external or internal CSS, just locate the html tag that requires modifications and put the ‘style’ attribute, then define the property and value of the style and that’s it. Another reason, it helps the user and the service provider of the small website that has limited number of web pages (example the blog sites). Lastly many website designer use inline CSS for testing, because it is more convenient rather than open a new or existing external CSS file, or scrolling up the page until they reach the head where in the <style> tag place.
If inline style has advantage then let’s faces the inline style disadvantage. One of these is overriding the styles that you declare in external or internal CSS. Lastly the most important, Pseudo-elements is impossible to apply.


Avoid putting spaces into the property value’s unit (margin-top:40 px;), the property is margin-top, the value is 40px, and the value’s unit is px (pixel). Removing space between the value and unit is the correct way (margin-top:40px). Remember in each declaration of property and value it must be terminated by semicolon. Lastly don’t forget to close your open curly brace.
I hope I answer the question What is css and how to implement?, thank you for reading and Good luck for you web programming journey!


What is website programming?

Web programming creates reliable and effective websites for internet (WORLD WIDE WEB) or private network (intranet). Mostly focus on the usability of the website rather than design. The website mainly focuses on design, called static website while the interactive one is dynamic website. It takes a minimum one web programmer to develop a static website, while the dynamic website such as business website sometimes in consist hundreds of programmers. Web programmers are the person dedicated generally on the server-side scripting. The server-side scripting is a process of interpreting the user/client request to the web server, also it manipulates and limit the user access, in other words it serve as a security in a web server.
Tools and website technologies contribute to the rapid evolution of web programming. As a traditional process of executing code from local computer, the web programming gives the privilege to run the program online. This process opens a new door in the communication world and allows many opportunities to user/client. E-commerce had remarkable changes as the result of communication led by web programming and web development. One of the best examples is the online bidding site such as eBay, it change the ways on how consumer purchase good and service. E-commerce is one of the reasons why website programming grows rapidly. The other factor that can be considered in lifting the web programming to its popularity is the open source software’s, An example of open source tool is LAMP, a software bundle of Linux, Apache, MySQL and PHP. Another factor is the easy to use web programming software such as Adobe Dream Weaver, Microsoft Expression Studio and WebDev. Anyone can develop a basic website using that software, but still basic knowledge in HTML (HyperText Markup Language) is required.


For beginners this is very common question, sometimes use as introduction on a class, anyway answer me “no, it is not required” if you are in this situation:
  • I have a best friend, brother or sister that, I can rely in checking my HTML code.
  • I have powerful software that has Intelli-senses and template generator so I don’t need to mess up my fingers with html code.
  • Internet is my bed, so basically I have a collection of website that offer free html download.
But if you are serious and have an ambition to be a great website programmer you should hug the basic building block of that website, and you should answer this question as ”I love you html”.


You should create a normal html page and insert or embed some script, like example below
  <title>Web Programming</title>
  <p>the current date is <?php  date(“M-d-Y H:i”); ?></p>

Your HTML page will parse or read line by line by the web server, this process will engage when the html page was access through browser. Always remember that the execution of web site is hierarchical or from top to bottom. When the web server across the programming language code (that is the line with <?php ), it will execute the code. Thus the example given has line of PHP (Hypertext Preprocessor) code has a function of showing the current date with the format of Month - day – year hours : minutes. The current date and time will wrote in the web page, then it send back to the user’s browser.
How it becomes dynamic? By your observation, it is just a normal web page, but when this web page reloads in different time or date, you’ll notice the date and time will change without any code modification, that how it becomes dynamic.


Website programming is like a fairy god mother that transforms static html to dynamic. Static website, users are only viewing it or in other words, what you see is what you get. While dynamic website allows the user to interact with it, for example the social networking website and the website embed with games. Also web programming is responsible for online transactions; it cut the miles of distance of sellers and the buyers.


Static website programming languages

-Enhance the front-user usability. The goal of Static website programming languages is to make the website user friendly and attach more visitors. In other words it is more on design, rather than algorithm.
  • HTML – HyperText Markup Language.
  • CSS - Cascading Style Sheet – serve as the dress of html, it define the style or how the html should display.
  • XML - Extensible Markup Language is a markup language, xml document is readable by human and machine because xml define series of policy for encoding the documents. Over the internet is the emphasize simplicity, generality, and usability and that is the goal of XML.
  • JAVASCRIPT – A website scripting language that is inserted into HTML. The C language influences the syntax of javascript. Originally javascript was implement as part of web browser, in which it helps the interaction of user to the client-side scripting.

Server side script

-A method use in web design and also connected to the HTML source code embedding of script. Server side script is responsible in answering the request of the user (client) into the web server, in other words it serves like a bride between the user and web server. Some Example of server-side scripting language are:
  • PHP - Hypertext Preprocessor is a open source server side scripting language use for interactive website, almost 244 million website are using it, very competent to Microsoft's ASP.
  • ASP – Active Server Page other term is Classic ASP or ASP Classic. The first server side script engine of Microsoft.
  • JSP – Java server page, release by Sun Microsystems in 1999, it help the software developer to create dynamically web page base on HTML and XML.


First of all you should have XAMPP install into your pc, it is consist Apache HTTP Server, MySQL database, and it interprets and compile the script written PERL and PHP, XAMPP allow the web programmer to have localhost to test their program to their own computer. I don’t recommend using the WYSIWYG, rather use notepad++ to help you to familiarize the syntax and codes.
Thank you for reading my simple introduction of web programming