Pages

Monday 20 May 2013

BEGINNERS WEBSITE DESIGN

Web Design Tutorial for Beginners | Learn Website Designing

 

All adults are become in such manner from the stage of Kid, likewise all expert computer programmers are become in such manner from a beginner.


First of all I would like to appreciate you, for take a time to look into by Website Designing Tutorial. I am writing this blog from my few years of experience in cyber world especially in the field of website designing. If you are a beginner in web development, you will be the next expert/web programmer. All experts programmers are come from the situation where your are now, but he/she is become an expert now, because they are submitted thyself for their dreams. We should have a aim before start anything, that aim brings us into higher positions, That why we say "AIM AT STARS THEN WE CAN REACH AT THE TOP OF A TREE". But i recommend you that, If you Aim at stars and believe in God, God will take you into higher positions, Then you will reach not in the top of a tree you will reach at the point where you are expected, over the stars. We will become and expert through experience. We say he is an expert Pilot, means he have years of experience in flying flights, So if you want to be an expert in website designing/web programming, you need to spend your time for that also. in one words when you interact with it, you will get more experience, then you will become more expert.

Before all you need to understand who are you ?


Now no shrub had yet appeared on the earth and no plant had yet sprung up, for the Lord God had not sent rain on the earth and there was no one to work the ground, but streams came up from the earth and watered the whole surface of the ground. Then the Lord God formed a man from the dust of the ground and breathed into his nostrils the breath of life, and the man became a living being.(Genesis 2:5).

Did you understand the life in you was the GIFT OF GOD and you are the creature of God ?. If you are the creature of God, you are person having great abilities, don't think what others say about you good or bad, but God have a good plan about you, that you are. We have great abilities but, it should be known only , when we start to believe in the our Heavenly father Jesus Christ.

How to begin? Where to start ?


First of all we need to pray before starting our every work. Then God will give the wisdom to do the things more successfully, moreover we will get the opportunity to study the new things when we do something. God will make our losses are our success and success as our victory.

Now its the time to go and look into our real subject how become a good web designer. First we need a tool or application to develop our website, There are lot of applications available in market, but i would like to recommend Macromedia Dreamweaver for beginners, it provides a lot facilities to study new things in web design.Dream weaver provides some additional theme support which help the beginners to build website easily an can understand the things more frequently.

First we need understand what is a web page and it consists of what/ in which logic it is developed. A webpage is a HTML page, which is processed by server side scripting languages like PHP ASP.NET etc.. OR it is statically developed as same as in HTML. It is the part of an intermediate or expert programmer to look the server side scripting languages like PHP, ASP.net and more. So we can go through basic HTML page. According to my principle i am classifying an HTML pages as 3. Which is

Header - Header is defined using head tag called (opening tag) </head> (closing tag). Header consist of Title, Meta Data, External style sheet files, External JavaScript files and more. In header we includes the contents that should be loaded or cached first, when the web page loads. Suppose if we call a style sheet (css file) in footer, it loads only after loading all other contents of web page, In style sheet we define the structure and layout of website, then the webpage will fix the layout and alignment of content only after loading the whole webpage, it will provide a bad look on the website if the content is not loaded fully in slow internet connections.

Body - We define a body section of webpage by using body tag called (opening tag)</body> (closing tag). This the section where, real design and coding must adopted by a developer/designer. We can put the width of our body in either pixel or percentage., but i will recommend pixel, because it stays same in all screen resolutions. It is more complicated if we use percentage as width, because we can't assure that is there any overflow of layers occur in different screen resolutions. But i strongly insist one important thing that is, millions of users are now surfing internet through their handsets, you should keep a mobile version of your website also, that we will discuss later. The minimum width of a website (or body wrapper) is normally taken as 970px- 974px, which is the recommended standard. Taking beyond more or less than that is not at all a good idea,and in such circumstances we need to keep different designs for different screen resolutions, that subject will be understand when you are a intermediate.

Footer- There is nothing with footer in a webpage with defining tags like head or body, but if it is web page we must design a footer inside the body by giving some navigational links, contact details, and copyright notice.

Header of a webpage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Website Designing Tutorial | Learn Website Designing</title>
<meta name="description" content="A Good website designing tutorial to learn basic of web development"/>    
<meta name="keywords" content="Web designing Tutorials, Tutorials for Web development, Learn Website Designing"/>   
<meta name="keyphrases" content=""/>  <meta name="robots" content="index,follow"/>   
<meta name="copyright" content="youdomainname.ed"/>    
<meta name="document-distribution" content="Global"/>    
<meta name = "author" content="Your company Name"/> 
<link rel="SHORTCUT ICON" href="http://youdomainname.ed/iamges/favicon.ico" /> 
<link href="http://youdomainname.ed/css/mystyle.css"type="text/css" rel="stylesheet"/> 
<script type="text/javascript" src="http://youdomainname.ed/js/myjavascript.js"></script>  
</head>  


This is a header of a webpage. Which refers all major parts required in a website. For detailed explanations, please refer the following.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 
Website Designing Tutorial | Learn Website Designing
</title>
Title is important on your webpage, it is displayed in search result with blue colored and with big font size.

<meta name="description" content="A Good website designing tutorial to learn basic of web development"/>
Meta Description Should be related to your Title, which is displayed as description text in search results.
<meta name="keywords" content="Web designing Tutorials, Tutorials for Web development, Learn Website Designing"/>
Meta Key words should also be related to your Title. and description, which merely defines in which keywords your site should appear.
<meta name="keyphrases" content=""/>
Meta Key phrases is not important in my point of view, it doesn't give any priority in my experience, if you want you can add it by combining Keywords, Description and Title.
<meta name="robots" content="index,follow"/> 
We have three options -
"index,follow" If you set index,follow the crawler of search engines will crawl and follow all the links in the current page and put it in search results.
"index,nofollow" The crawler will only look at this page and will NOT crawl or access the links or sub pages in this page.
"noindex, nofollow" The crawler will NOT crawl this page and will NOT crawl or access the links or sub pages in this page.

<meta name="copyright" content="youdomainname.ed"/>
You can put your the name of your domain in this part.
<meta name="document-distribution" content="Global"/>
There are three forms of distributions 1. Global - accessible to all (everyone) 2. Local - distribution of document 3. IU - for internal use not for public distribution

.
<meta name= "author" content="Your company Name"/>
You can put name of the author who written the meta content, your name/company name.
<link rel="SHORTCUT ICON" href="http://youdomainname.ed/iamges/favicon.ico" />
The above code refers an icon for your webpage, you can save your icon file using the extension .ICO
<link href="http://youdomainname.ed/css/mystyle.css"type="text/css" rel="stylesheet"/>
The above code refers calling a external cascade style sheet called "mystyle.css" you must give the correct location or path of your style sheet document correctly in domain name.
<script type="text/javascript" src="http://youdomainname.ed/js/myjavascript.js"></script>
The above code refers calling an external java script file myjavscript.js.
</head>
Body of a webpage

We define a body section of webpage by using body tag called <body>(opening tag)</body> (closing tag). This the section where, real design and coding must adopted by a developer/designer. First of all we must create layer wrapping all our contents, there is only wrapper layer in a webpage, so we can give it as ID instead of CLASS. following are the examples for giving id and class in a layer .

<div id="wrapper"></div> Giving ID for layer
<div class = "wrapper"></div> Giving Class for layer.
The important thing you should consider is you can use only one id wrapper one time in a webpage, but if you are defined it in class you can use class my-class  in different parts of webpage.

Following refers true 
For ID
<div id="wrapper1"></div>
<div id ="wrapper2"></div>

For class
<div class="my-class"></div>
<div class ="my-class"></div>

Following refers False
For ID
<div id="wrapper1"></div>
<div id ="wrapper1"></div>

Hope this will understand how to use id and class in a webpage, there is no limit for adding classes and ids in webpage, but you should keep the above rule in mind. Then we called the id "wrapper" and class "my-class' in our webpage. Then where the id wrapper is and class my-class in coded. For that we must create a cascade style sheet document  called (CSS) in webpage.

For creating a style sheet you can read the post CSS styling techniques.

First we need to create a folder in our hard drive for our webpage

Open the your E drive of your system and create a new folder by right clicking New ->folder and rename it as My site.

Open the dream weaver and click File -> New -> Basic page -> HTML. Again click File -> New -> Basic page -> CSS.

Click File -> Save Us -> mystyle as (File name) & Save as type as Style Sheets (CSS)

Now save your style sheet file in the folder we created "my site"

Now we need to go our webpage on tab Untitled-1.html then click View -> code.

Next step is we need to call our style sheet file on our webpage by using following code in our header in between <head></head> (if any doubt look above coding of header). 
<link href="mystyle.css"type="text/css rel="stylesheet"/>

Up to this we are created a style sheet and a webpage (HTML page) and we called the style sheet on our webpage by using above command

Next we create a root layer in between <body> </body> tags with an ID name wrapper.as HTML coding <div id="wrapper"> </div> Remember we only called the ID wrapper  in the layer(div), but the properties of id is not yet defined in style sheet, if its property is not defined in style sheet it displays nothing.

Then our next step is to define the properties of id wrapper in our style sheet.  As we studied already an id is created by using # as #wrapper. Our id wrapper is the root  id support all sub layers. We can create an id as follows. (CSS coding). along with the wrapper we are creating a layer #header for our site with its content is in h1 tag.


CSS Coding for Wrapper, Header and H1



#container { clear:both; overflow:auto;}

#menu {float:left;width:300px; border-right: 1px solid #D2D2D2;background:#F4F4F4;min-height:400px;}

#wrapper { width:970px; overflow:auto; border:1px solid #EAEAEA; margin:0px auto; background-color:#FFFFFF }

#header { border-bottom:1px solid #EAEAEA;; }

h1 { font-family: Arial, Helvetica, sans-serif; font-size:21px; padding-left:18px; color:orange; }



We created the properties of our id wrapper, header and h1 as above in our mystyle.css file.
Now we want to create the root layer called wrapper in HTML page as follows.Additonally we want a header in our web page. we need to create a sub layer for header inside the wrapper layer as follows(#header). Header of our website should be defined in h1(heading 1 tags), it gives more priority in search result for the keyword we added in between <h1> </h1> in our tutorial the word "My site".

HTML Coding for Wrapper, Header and H1




following is the structure of the wrapper and header of webpage, #wrapper refers the black border, #header refers the pink border

<div id="wrapper">
<div id="header"><h1>My Site</h1></div> <!-- closing header --->
</div> <!-- closing wrapper --->


Now its time to create the parent layer for our menu and description of website called #container as follows.



#container { clear:both; overflow:auto;}

#menu {float:left;width:300px; border-right: 1px solid #D2D2D2;background:#F4F4F4;min-height:400px;}

#description {float:left;width:620px; min-height:400px;font-family:Arial, Helvetica, sans-serif;font-size:12px; color:#555555; line-height:20px;padding:20px; text-align:justify;}

h2{font-family:Arial, Helvetica, sans-serif;color: #737373;font-size:18px; border-bottom: 1px solid red;padding-bottom:8px;}



HTML Coding for Container, menu, description and heading 2



following is the structure of our webpage when #container refers the red border , #menu refers the green border and #decrption refers the blue border.


<div id="container">

<div id="menu"></div> <!-- closing menu --->

<div id="description">

<h2> My Website </h2>

Header is defined using head tag called <head>(opening tag) </head>(closing tag). Header consist of Title, Meta Data, External style sheet files, External JavaScript files and more. In header we includes the contents that should be loaded or cached first, when the web page loads. Suppose if we call a style sheet (css file) in footer, it loads only after loading all other contents of web page, In style sheet we define the structure and layout of website, then the webpage will fix the layout and alignment of content only after loading the whole webpage, it will provide a bad look on the website if the content is not loaded fully in slow internet connections.

Body - We define a body section of webpage by using body tag called <body>(opening tag)< (closing tag). This the section where, real design and coding must adopted by a developer/designer. We can put the width of our body in either pixel or percentage., but i will recommend pixel, because it stays same in all screen resolutions. It is more complicated if we use percentage as width, because we can't assure that is there any overflow of layers occur in different screen resolutions. But i strongly insist one important thing that is, millions of users are now surfing internet through their handsets, you should keep a mobile version of your website also, that we will discuss later. The minimum width of a website (or body wrapper) is normally taken as 970px- 974px, which is the recommended standard. Taking beyond more or less than that is not at all a good idea,and in such circumstances we need to keep different designs for different screen resolutions, that subject will be understand when you are a intermediate.

</div> <!-- closing description --->

</div> <!-- closing container --->



Please note the above HTML code must put inside the layer wrapper(As wrapper is the root layer), which is put after the closing tag #header. For more information check the HTML coding of wrapper.


Footer of a webpage
Footer is created as the part of body and there is not tag defintions for footer.as head and body have. Designing a Footer provides the facility to add contact details, important links, Copyright information and more about the website under every page.




CSS Coding for Footer





#footer{border-top :1px solid #EAEAEA;; min-height:50px; background-color:#F2F2F2; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding-left:10px; padding-top:10px;}


HTML Coding for Footer




following is the structure of the footer of webpage, #footer refers the yellow border



<div id="footer"> &copy All Rights reserved by My First Webpage <BR /><BR /> Home | About Me | Contact Me</div>
Our final output for HTML and CSS, while we integrate this whole coding, we get the following output . Additionally we applied a background-color for our body of webpage in bold


Final Coding of Stylesheet(CSS)mystyle.css



body{background-color:#0A5989;}
#wrapper { width:970px; overflow:auto; border:1px solid #EAEAEA; margin:0px auto; background-color:#FFFFFF }

#header { border-bottom:1px solid #EAEAEA; }

h1 { font-family: Arial, Helvetica, sans-serif; font-size:21px; padding-left:18px; color:orange; }

#container { clear:both; overflow:auto;}

#menu {float:left;width:300px; border-right: 1px solid #D2D2D2;background:#F4F4F4;min-height:400px;}

#description {float:left;width:620px; min-height:400px;font-family:Arial, Helvetica, sans-serif;font-size:12px; color:#555555; line-height:20px;padding:20px; text-align:justify;}

#footer{border-top :1px solid #EAEAEA;; min-height:50px; background-color:#F2F2F2; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding-left:10px; padding-top:10px;}



Final Coding of our HTML page



<div id="wrapper">
<div id="header"><h1>My Site</h1></div> <!-- closing header --->
<div id="container">

<div id="menu"></div> <!-- closing menu --->


<div id="description">

<h2> My Website </h2>

Header is defined using head tag called <head>(opening tag) </head>(closing tag). Header consist of Title, Meta Data, External style sheet files, External JavaScript files and more. In header we includes the contents that should be loaded or cached first, when the web page loads. Suppose if we call a style sheet (css file) in footer, it loads only after loading all other contents of web page, In style sheet we define the structure and layout of website, then the webpage will fix the layout and alignment of content only after loading the whole webpage, it will provide a bad look on the website if the content is not loaded fully in slow internet connections.

Body - We define a body section of webpage by using body tag called <body>(opening tag)< (closing tag). This the section where, real design and coding must adopted by a developer/designer. We can put the width of our body in either pixel or percentage., but i will recommend pixel, because it stays same in all screen resolutions. It is more complicated if we use percentage as width, because we can't assure that is there any overflow of layers occur in different screen resolutions. But i strongly insist one important thing that is, millions of users are now surfing internet through their handsets, you should keep a mobile version of your website also, that we will discuss later. The minimum width of a website (or body wrapper) is normally taken as 970px- 974px, which is the recommended standard. Taking beyond more or less than that is not at all a good idea,and in such circumstances we need to keep different designs for different screen resolutions, that subject will be understand when you are a intermediate.

</div> <!-- closing description --->

</div> <!-- closing container --->


<div id="footer"> &copy All Rights reserved by My First Webpage <BR /><BR /> Home | About Me | Contact Me</div><!-- closing footer --->


</div> <!-- closing wrapper --->




Save your webpage



  • After copying the above code to the body section of your webpage and save it as file name index.htm OR html
  • We save the landing page or Home page of our webpage as index.html because when we type a URL www.yourwebsite.ed it automatically redirects to the index.htm file as first page.
  • Next step is to copy the Final Coding of Stylesheet(CSS)mystyle.css on your file mystyle.css and save it as mystyle.css.
  • Back to your webpage(index.html) on dreamweaver and press F12 button on your keyboard to see the preview of your webpage. 



Screen Shot of our webpage




Sunday 19 May 2013

CSS STYLING TECHNIQUES

TECHNIQUES FOR CREATING STYLE SHEETS (MYSTYLE.CSS)


What is a style sheet?
We call CSS called Cascade Style Sheet is an important part of webpage, what will be the effect if we wear some dirty clothes and moves in front of public, the same effect will bring if we are not added style sheet to our webpage. It fixes the width, height, alignment , color, border, background etc of our webpage.as well texts, There are two types of style sheets external and internal style sheets.

Internal style sheets are written inside the webpage in between <head></head> or <body></body>. We can prepare an internal style sheet by using following code inside your HTML page.

   
   <style>

   #wrapper {
   width:970px;
   overflow:auto; 
   border: 1px solid #EAEAEA; 
   background-color: #F2F2F2;
   }
   .my-class
   font-family:Arial, Helvetica, sans-serif; 
   font-size:12px; color:#5E5E5E; 
   line-height:21px; 
   padding:5px;
   }
   </style>



External style sheets are written outside the webpage by creating a file called mystyle.css/or anything else with extension .css and calling it in the header part of webpage using following HTML code.
 
  <link href="http://youdomainname.ed/css/mystyle.css" 
  type="text/css" rel="stylesheet"/>
 

We can create an external style sheet as follows. Open Dreamweaver click File -> NEW and click on css, it will open an empty css file , there you can write the following code.
 
   
   #wrapper {
   width:970px;
   overflow:auto; 
   border: 1px solid #EAEAEA; 
   background-color: #F2F2F2;
   }
  .my-class
   font-family:Arial, Helvetica, sans-serif; 
   font-size:12px; color:#5E5E5E; 
   line-height:21px; 
   padding:5px;
   } 



An ID is created using putting # before the name.
A Class is created using putting . before the name.

FYI All webpages using external style sheet and call it in webpage using above code. Internal style sheets are written in certain circumstances only. 

We can call a ID or class in a tags <DIV> , <SPAN> , <P>, <TABLE> <BODY> and more. The important thing we should consider is we can use only one id wrapper one time in a webpage, but if we are defined it in class we can use class my-class  in different parts of webpage.

 Following refers true


For ID

<div id="wrapper1">True/different id are used in same page 
</div>
    
<div id="wrapper2">True/different id are used in same page  
</div>

For class 

<div class="my-class"> My Content </div> 
<div class ="my-class">My Content </div>


Following refers False

     
<div id="wrapper1"> 
Wrong content/same id used more than once in same page      
</div>
   
<div id ="wrapper1">
Wrong content/same id used more than once in same page 
</div>

There are  lot of properties available with style sheets commonly used and important properties are listed below.


background-color - set background color
background-image -set background image
background position - set starting position of background image
background-repeat - sets how a background image will be repeated.
border - set border  of layer - Eg - border : 1px solid  #EAEAEA;
border-(top,left,right) - setting border on left only Eg - border-left: 1px solid #EAEAEA
color-  color of fonts (letters or write ups)
display -it defines how an element is displayed .
float - float a layer
font-size - defines the size of font
font-family - defines which font family
font-style - specify the font-style ofa text
font-weight - defines the font weight, bold or not
height - defines height of a layer
letter spacing - defines spacing between letters
line height - this property refers the line-height of  text in a paragraph
list style - type of list item marker in a list
margin - margin refers how much margin we must keep between layers
margin-(top,bottom,left,right)
max -width - refers maximum width of  a layer
min-width - refers minimum width of layer
max-height - refers maximum height of layer.
min-height  - refers minimum height of a layer
overflow - overflow adjust the height of a layer according to the content
width - refers width of a layer
padding - padding property refers the spaces between element border and content.
padding-(left,right,top, bottom)
text-align - text-align refers alignment of a text
text-transform- text transform adjust and text into upper case ,lower case.


A class or ID  can be created with any of the above properties. Suppose we want to create a class with yellow background color, red foreground, with font-family Arial, we create as following


      
.myclass  { background-color :yellow;   color ; red;font-family : Arial, Helvetica, sans-serif;  width:200px;  height:200px;     }
  
Calling the class in layer by using following HTML code
<div class="myclass"> My Site </div> 
  



Friday 17 May 2013

LEARN JAVASCRIPT

 

 Javscript Tutorials | Learn Javscript



JavaScript the Client Side scripting



JavaScript a name which is some what related to comprehensive language Java ?
Yes it is, but the fact is like,  two unknown persons have the name Tom and Tomy, but they are neither cousins,  nor friends or relatives and they didn't know each other. That's only we can say about these two languages Java and. Java script.

Javascript is a client side scripting (refers which is run in browser of the user). Keep in mind if the browser is not supporting javascript, the functions of JavaScript we provided in  our website will not work. But all most modern browsers are supporting JavaScript includes Internet Explorer 6 + , Google Chrome, Opera, Mozilla, Safari and more. But these browsers are also providing the option for users to active and inactive javscripts.

What can we do with Javascript ? Why ?


Through JavaScript we can produce interactive web pages which is user friendly in all sense . The era of touch panel devices increases the chances of using  JavaScript in web page. In now a days all websites are using JavaScript for different purposes. Social networking giants like youtube, twitter and facebook are using javscript, an simple example in facebook for java script is, when we press the Like button , Like will change to Unlike and in reverse  order. Using javscript we can   validate a form, display slide show animations, interact with server (through Ajax a technology used in javscript) and more.

Some of the studies suggests that using JavaScript in  web pages reduces the bandwidth usage of clients to a certain extent. There we use a technology called Ajax in java script called Asynchronous JavaScript and XML which loads the data without refreshing the web page or web content. For Example if we want to submit a form through Ajax, we input the data  in form and press the submit button, which produces a result "Your feedback is submitted"  without refreshing the web page. Ajax is not a single technology but a combination of technology, javascript, css, DHTML and more which is embedded in <script></script> tags.

Ajax is a different section but i refereed Ajax here is  because Ajax technology is used with JavaScript.

Following is the simple JavaScript which displays a text  "Hello world" in a  layer called #mylayer


<html>
<head>

<title>My Javascript</title>

<script>

function change()
{
var text = "Hello world";

x=document.getElementById("mylayer"); 

x.innerHTML = text;    // Change the content

}
</script>

</head>

<body> 


<h1>Changing the text</h1>

<div id="mylayer">Testing My Javascript Code</div>

<BR/>

<input type="button" onclick="change()" value="Display Hello World"/>

</body>


</html>




Code Explanation - Normally we write the java script under head tag, but in certain instances we write it in body tag also, but it should be recommended to write java scripts in between head tags except certain conditions. In our above java script we create a function called write(),
write function in java script do as follows
  1. Storing the text "Hello world" in a variable text.
  2. Selecting the layer #mylayer  using x=document.getElementById("mylayer");
  3. Putting value inside the layer using  x.innerHTML = text;
  4. We already defined the value of text in var text.
  5. Calling the function when the button is clicked, onclick="change()" 
  6. Final Output is When user click on the button  the text "Testing My Javascript Code" will be replaced as "Hello world".
  7. You can copy the above code in a html file and running that html file in your browser will output the result.
From the above code we studied the initial part of JavaScript. Our next step is to study how to display a simple pop up window in javascript. 

<html>
<head>

<title>My Javascript</title>

<script>

function popupmsg()
{
alert('Hello Friend');

}
</script>

</head>

<body> 

<input type="button" onclick=" popupmsg()" value="Display Hello World"/>

</body>


</html>

The above code displays a popup message Hello Friend when we click the button "Display Hello World" . I put the coding of alert in a function (look popupmsg() ) and called that function in button "onclick", 

Here in the section of "onclick" users can change the event to some other like onDblClick, onMouseOver etc instead of onclick. Then the popup message "Hello World" will display only when we double click the button or moving mouse over the button.

Another method is simply calling alert in the event instead of calling it in function. That is as follows.


<html>
<head>

<title>My Javascript</title>


</head>

<body> 

<input type="button" onclick="alert('Hello Friend')" value="Display Hello World"/>

</body>

</html>

Then next problem is how can we change the popup message by our own. 
Following code allows you to enter a value in text box,  the same value (the value entered by you) is displayed in popup message instead of "Hello Friend"

<html>

<head>

<title>My Javascript</title>

<script>

function popupmsg()

{
var dom = document.getElementById('kol').value;
alert(dom);

}

</script>

</head>

<body>

<input type="text" name="text" size="30" id="kol">

<input type="button" onMouseOver="popupmsg()" value="Display Hello World"/>

</body>

</html>

Explanation of above code as follows.
  1. Creating a function popupmsg()
  2. Creating a variable "dom" to store the input value from textbox id "kol".
  3. document.getElementById('kol').value; takes the value entered from textbox.
  4. alert function displays value stored in variable "dom" using alert(dom);

HOW TO TREAT YOUR CLIENTS

My first Experience

In the first time i worried a lot to get a single project in website designing, At that time I am trying to capture the clients by flushing  emails regularly.. But it doesn't made an effect as i think. I failed because of pumping emails for requesting to design their website. But in my point of view  I am sincerely advising you that if you are a beginner in website designing and have a website designing agency, never pump emails to clients by requesting to design their website, because it will make a bad reputation for you as well your website designing agency (company). Look an Example that , doctors will not search for patients in any way, but patients will search for doctors and wait for a long time by booking a ticket. At same way if you are a web designer., you are also a web programmer, in other words we say a computer programmer. I am finalizing one that, people will not address us with Dr. But we are thinking, memorizing and doing things in such a manner how a doctor thinks, the only difference is they are thinking and providing things for medical world. But our contributions are for the wide IT industry..

Avoid Cheap Services

There is a standard rate for anything, giving a service at cheap rate will make your skills and abilities as cheap.  For example , there are two doctors in our area, one charges $50 and other charges $10, some people must go to doctor who is charging $10, but you cannot assure why he is charging  $10, may be he is charging $10 because his syringes were not properly sterilized, then what will be the whole effect ? if you say cheap rate, some people must think in such a way, that you services are corrupted like $10 doctor .. but i cannot predict, some times his syringes and services is better than the doctor who is charging $50, that is a may be or may not be condition....  ,

So i would like to give a right advice to you that being a professional computer programmer/web programmer do not render your services for cheap rates.I say being professional means, before you taking any  project understand the whole behavior and aspects of that problem/project, and think what solutions you can apply for that,  and think yourself that,  i am worthy to do it as myself, if not i will consult to whom for help/ for my work group, at this point you can take the final decision whether you want to confirm the project with client or not. If you are proceeding with the project say a feasible rate that should not be changed (you fees must includes your margin, your expense and the expected loss if any thing happens related to project). Then submit the proposal to client. Frankly, if you are not suffered any loss over that project you should give that margin back to client. It is the business ethics all professional and talented  programmers must keep. But different people have different attitudes in their business plan, so they can choose their own way for the success, but we must keep the ethics in business, that is we must render what we are confirmed, if you are not able to finish one module, reduce that percentage and give it back to client. Moreover once you fixed the rate with client it should not be changed. Never say a cheap rate to take the business from competitor and proposing a new rate in the midst of the project after confirmation. It is unethical, if any body is doing business in such a standard , you must inform and talk about  his business logic to our other co-workers/web programmers/developers also. They are in this field for making bad reputation to we /web developers/programmers.


Friday 10 May 2013

BEST COLOR COMBINATIONS

Colors and Human Psychology

When we design a website we think, which color to be used / which color is more friendly related to the contents of the website. Checking different colors from color palette and  re-working under graphics and images is truly time consuming and makes double effort.

From my study i found using colors other than , Blue, Red, Green, silver, white, black, pink , Orange will provide a nasty look for the website. These proper combination of these colors pay a good attention, make a feeling of happiness in the mind. The things we consider is the color we are using on the web page should not pierce into the eyes of visitors. For example i have bad attitude towards web pages using black as background and white as foreground, which utilizes our eyes more. I think if the visitor of that website is a web developer and he is a senior citizen, some times he will say some ***** in mind and close it out frequently. The main concept is, the colors we choose should not be a hard one,  and should not be a soft one. I say in my view if the color is hard we are overruling the visitors, but it is too soft, it makes an attitude that  we are not confident in the things we are doing .

To avoid the color dissimilarity, we can use a hard color in body background, but  80% of  it should be covered by a layer wrapper (root layer of website) and it should be in any soft matching colors.

Background color of Webpage - Using a combined background color using white at bottom with any matching color vertically would make a nice feeling in the web page, then you can set the exact background color of body to white, with out repeating the background image vertically or horizontally. You may not understand this,  while you are reading,  but when you do it accordingly as stated, you will get the idea.

Background color of root layer(wrapper) - It is better to do the wrapper with white, but you can increase the darkness of white a little.

Foreground color - Font color should be black or reduced darkness of black,  merely the color code #525252 in white background. But if the background color is not white, selecting pure white for font would be nice.

Navigational Links - Hyperlinks are normally set in blue in white background. and changing color to a different one when mouse over the link.  For deep background colors we use white foreground colors for navigational links.

Background color for Navigational Bars ; It would be nice, using a combined color with hard and light background in navigational bar, which express a right feeling for visitors.

Borders - Light borders of Orange, Green, Pink. Blue feels good for the layers that have black or white background, other wise using a border color related to  #B4B4B4 less or higher the darkness would be nice.

Footer - Normally the background color of footer is little dark version of root layer.