How to put images in HTML text and password fields?

How to put images in HTML text and password fields?

You can easily place images inside text fields in HTML. To explain this, I am making a registration form in which I have text and password fields like name, email, password and confirm password. I want to put user image inside name text field, email image inside email field and so on. I have kept images(32*32 png icons) of user, email and password in images folder.

HTML file

<form action="register.php" name="register" id="register" method="post">

     

  <input type="text" name="name" id="name" placeholder="Your name" autocomplete="off" tabindex="1" class="txtinput">

  <input type="email" name="email" id="email" placeholder="Your e-mail address" autocomplete="off" tabindex="3" class="txtinput">

  <input type="password" name="password" id="password" placeholder="Your password" autocomplete="off" tabindex="5" class="txtinput">

 <input type="password" name="confirmpassword" id="confirmpassword" placeholder="Confirm password" autocomplete="off" tabindex="6" class="txtinput">

   <input type="submit">     

</form>

CSS file

#register input#name 

{

  background: #fff url('../images/user.png') 5px 4px no-repeat;

}

#register input#email 

{

  background: #fff url('../images/email.png') 5px 4px no-repeat;

}

#register input#password 

{

  background: #fff url('../images/password.png') 5px 4px no-repeat;

}

#register input#confirmpassword 

{

  background: #fff url('../images/password.png') 5px 4px no-repeat;

}

How to make stylish Submit and Reset HTML buttons with CSS3?

How to make stylish Submit and Reset HTML buttons with CSS3?

Recently, I had to create a registration form which had submit and reset buttons. I wrote some CSS3 code to look submit and reset html buttons stylish. I thought of sharing this code with all you guys so that it might help someone. If you have any better CSS tips to make these submit and reset buttons more stylish, do share it.

My HTML file:

<div id="buttons">

    <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">

    <input type="submit" name="submit" id="submitbtn" class="submitbtn" value="Register">

</div>

My CSS file:

#buttons 

{ 

  display: block; padding-top: 10px; 

}

#buttons #resetbtn 

{

  display: block;

  float: left;

  color: #515151;

  text-shadow: -1px 1px 0px #fff;

  margin-right: 20px;

  height: 3em;

  padding: 0 1em;

  outline: 0;

  font-weight: bold;

  font-size: 1.3em;

  white-space: nowrap;

  word-wrap: normal;

  vertical-align: middle;

  cursor: pointer;

  -moz-border-radius: 2px;

  -webkit-border-radius: 2px;

  border-radius: 2px;

  background-color: #fff;

 background-image: -moz-linear-gradient(top,  rgb(255,255,255) 2%, rgb(240,240,240) 2%, rgb(222,222,222) 100%);

 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(240,240,240)), color-stop(100%,rgb(222,222,222)));

  background-image: -webkit-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);

  background-image: -o-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);    background-image: -ms-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);

  background-image: linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%); 

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 );

  border: 1px solid #969696;

  box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);

  -moz-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);

  -webkit-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);

  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

}

#buttons #resetbtn:hover 

{

  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

  color: #818181;

  background-color: #fff;

  background-image: -moz-linear-gradient(top,  rgb(255,255,255) 2%, rgb(244,244,244) 2%, rgb(229,229,229) 100%);

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(244,244,244)), color-stop(100%,rgb(229,229,229)));

  background-image: -webkit-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);background-image: -o-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: -ms-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); 

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );

  border-color: #aeaeae;

  box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

}

#buttons #submitbtn 

{

  display: block;

  float: left;

  height: 3em;

  padding: 0 1em;

  border: 1px solid;

  outline: 0;

  font-weight: bold;

  font-size: 1.3em;

  color:  #fff;

  text-shadow: 0px 1px 0px #222;

  white-space: nowrap;

  word-wrap: normal;

  vertical-align: middle;

  cursor: pointer;

  -moz-border-radius: 2px;

  -webkit-border-radius: 2px;

  border-radius: 2px;

  border-color: #5e890a #5e890a #000;

  -moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);

  -ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);

  -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);

  box-shadow: inset 0 1px 0 rgba(256,256,256, .35);

  background-color: rgb(226,238,175);

  background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%);

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38))); 

  background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);

  background-image: -o-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);

  background-image: -ms-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);

  background-image: linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%); 

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2eeaf', endColorstr='#90b026',GradientType=0 );

}

#buttons #submitbtn:hover, #buttons #submitbtn:active 

{

  border-color: #7c9826 #7c9826 #000;

  color: #fff;

  -moz-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

  -ms-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

  -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

  box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

  background: rgb(228,237,189);

  background: -moz-linear-gradient(top, rgb(228,237,189) 2%, rgb(207,219,120) 3%, rgb(149,175,54) 100%); 

  background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(228,237,189)), color-stop(3%,rgb(207,219,120)), color-stop(100%,rgb(149,175,54))); 

  background: -webkit-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); 

  background: -o-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: -ms-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); 

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4edbd', endColorstr='#95af36',GradientType=0 );

}

How to pause javascript setInterval method for sometime and restart again?

How to pause javascript setInterval method for sometime and restart again?

I was using javascript setInterval method to display different divs after a regular interval of time. In between, I fell into the requirement of pausing the javascript setInterval method for sometime, do some stuff and restart it again. So, I repeatedly used setInterval and clearInterval to acheive my functionality. 

I have 3 divs: div0 (green), div1 (yellow), div2 (red). All are overlapping each other. I am using setInterval to hide and show div1 and div2 after every second. if index = 4 or 6, I am showing red div else yellow div. 

My requirement is that, When index becomes 8, I want to pause the setInterval for 5 seconds and till then show div0 (green) and afterwards resume the loop of setInterval until clearInterval is called.

Below is the code snippet for pausing and restarting setInterval method which is self explanatory.

<!DOCTYPE html>

<html lang="en">

  <head>

    <title>Sample Application</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">

    var index=0;    

    var auto_refresh = 0;

    $(document).ready(function(){

    hideDiv();

    auto_refresh = setInterval(function(){myTimer()}, 1000);

    });

    function myTimer() 

    {

            index+=1;

            if(index == 4 || index==6)

            {

              showDiv2();

            }   

            else if (index == 8) 

            {

              clearInterval(auto_refresh);

              showDiv0();

              auto_refresh = setInterval(function(){myTimer()}, 5000);  //Now run after 5 seconds

            }

            else if (index > 12) 

            {

              clearInterval(auto_refresh);

            }       

            else

            {

              showDiv1();

            }

        }

    function hideDiv()

    {

      document.getElementById("div0").style.visibility="hidden";

      document.getElementById("div1").style.visibility="hidden";

      document.getElementById("div2").style.visibility="hidden";

    }

    function showDiv0()

    {

      document.getElementById("div0").style.visibility="visible";

      document.getElementById("div1").style.visibility="hidden";

      document.getElementById("div2").style.visibility="hidden";

    }

    function showDiv1()

    {

      document.getElementById("div1").style.visibility="visible";

      document.getElementById("div0").style.visibility="hidden";

      document.getElementById("div2").style.visibility="hidden";

      document.getElementById("div1").innerHTML=index;

    }

    function showDiv2()

    {

      document.getElementById("div2").style.visibility="visible";

      document.getElementById("div0").style.visibility="hidden";

      document.getElementById("div1").style.visibility="hidden";

      document.getElementById("div2").innerHTML=index;

    }

    </script>

  </head>

  <body>

    <div id="container" style="position:relative;">

<div id="div0"     style="background:green;height:200px;width:200px;margin:0;position:absolute">

Relaxing for 5 seconds

</div>

         

<div id="div1" style="background:yellow;height:200px;width:200px;margin:0;position:absolute">

This is div1

</div>

<div id="div2" 

style="background:red;height:200px;width:200px;margin:0;position:absolute">

This is div2</div>

</div>

</body>

</html>

Note: I had discussed this problem on stackoverflow and written the conclusion of the discussion here in this post.

How to show / hide images randomly at regular intervals in javascript by shuffling the array?

How to show / hide images randomly at regular intervals in javascript by shuffling the array?

I had one requirement in one of my projects that I had an image which I had to show randomly in 4 places (div) in my webpage at regular intervals using javascript. I had asked this problem in stackoverflow. I got good help from a guy named "Hiral" there. With his/her help, I was able to implement this functionality. For implementing my functionality, I am shuffling an array and using javascript setInterval() and clearInterval() methods. Let me explain you my requirement and solution. Maybe you encounter similar requirement in future, then it might be helpful to you!

I have following 4 divs (bulb1, bulb2, bulb3, bulb4) and the image bulb.png in images folder of my project.

<div id="bulb1" class="lightbulb"><img src=".\images\bulb.png" /></div>

<div id="bulb2" class="lightbulb"><img src=".\images\bulb.png" /></div>

<div id="bulb3" class="lightbulb"><img src=".\images\bulb.png" /></div>

<div id="bulb4" class="lightbulb"><img src=".\images\bulb.png" /></div>

Initially, I will hide all these divs by calling my following function:

function hideBulbImages()

{

        document.getElementById('bulb1').style.visibility = "hidden";

        document.getElementById('bulb2').style.visibility = "hidden";

        document.getElementById('bulb3').style.visibility = "hidden";

        document.getElementById('bulb4').style.visibility = "hidden";

}

Now lets say I have an html button on the click of which I am calling below function showBulbImages. As I said I have 4 divs (places in html page) where I have to light the bulb randomly, so I am shuffling the array "myArray" in the below function so that array gets randomized by calling the function "shuffleArray". When array gets shuffled or randomized, I use javascript setInterval() method to turn on the visibility of bulbs randomly at regular intervals, 1 second in my case. When setInterval() method runs 4 times, I call clearInterval() to stop the show.

function showBulbImages()

    { 

        var blink_count = 0;

        var myArray = ['1', '2', '3', '4'];

        var randomArray = shuffleArray(myArray)

        var blink_the_bulbs = setInterval(function() {      

            var blinking_bulb = "bulb" + randomArray[blink_count];

            document.getElementById(blinking_bulb).style.visibility = "visible";

            blink_count+=1;

            if (blink_count > 3) 

            {

                 clearInterval(blink_the_bulbs);

            }

        }, 1000);

    }

    function shuffleArray(array) 

    {

        for (var i = array.length - 1; i > 0; i--) 

        {

            var j = Math.floor(Math.random() * (i + 1));

            var temp = array[i];

            array[i] = array[j];

            array[j] = temp;

        }

        return array;

    }

CSS3 Basic Interview Questions and Answers for Web Designers and Developers

CSS3 Basic Interview Questions and Answers for Web Designers and Developers

Below is the list of CSS3 basic interview questions and answers. These CSS3 interview questions and answers are meant for freshers as well as for experienced web designers and developers. So, If you going for an interview on CSS3,  I suggest you to must give a look at following CSS3 interview questions. These CSS3 interview questions are based on basic introduction to CSS3, why we need CSS3, difference between CSS and CSS3, CSS3 modules, CSS3 browser support, rounded corners in CSS3, borders and shadows in CSS3, CSS3 animation and opacity etc. So lets have a look on following basic CSS3 interview questions and answers.

1. What is the difference between CSS and CSS3?

CSS3 is upgreaded version of CSS with new future like Selectors,Box Model, Backgrounds and Borders, Text Effects,2D/3D Transformations, Animations, Multiple Column Layout, User Interface etc

   

2. List out CSS3 modules.

Below are the listed major modules:

Selectors

Box Model

Backgrounds and Borders

Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

User Interface

   

3. What new futures added in CSS3 for Borders and how Browser Support it?

Following border futures added:

border-radius

box-shadow

border-image

and all modern Browser Support it like below:

Internet Explorer 9 supports border-radius and box-shadow

Firefox requires the prefix -moz- for border-image.

Chrome and Safari requires the prefix -webkit- for border-image.

Opera requires the prefix -o- for border-image.

   

4. How you will create Rounded Corners using CSS3?

We have to creat a class like below:

<style>

.roundc{

border:2px solid #ff0000;

border-radius:25px;

background:#dddddd;

width:300px;

-moz-border-radius:25px; /* Firefox */

-webkit-border-radius:25px; /* Chrome and Safari */

-o-border-radius:25px; /* Opera */

}

</style>

and we have to add this class where we want the round corner like in below div

<div class="roundc" > this is the round corner by css3 </div>

   

5. How we create border using images by CSS3?

By using border-image: property of css3 we can create a border using images like below

.roundpcds

{

border-image:url(borderpcds.png) 30 30 round;

-moz-border-image:url(borderpcds.png) 30 30 round; /* Firefox */

-webkit-border-image:url(borderpcds.png) 30 30 round; /* Safari and Chrome */

-o-border-image:url(borderpcds.png) 30 30 round; /* Opera */

}

.stretchPcds

{

-moz-border-image:url(borderpcds.png) 30 30 stretch; /* Firefox */

-webkit-border-image:url(borderpcds.png) 30 30 stretch; /* Safari and Chrome */

-o-border-image:url(borderpcds.png) 30 30 stretch; /* Opera */

border-image:url(borderpcds.png) 30 30 stretch;

}

   

6. How you will create Box Shadow and text Shadow using CSS3?

Like below we can create Box Shadow using CSS3 .boxshadowabc

{

box-shadow: 10px 10px 5px #ccccc;

} 

.textshadowabc

{

text-shadow: 5px 5px 5px #FF0000;

} 

and then need to use these class boxshadownabc ,textshadowabc

   

7. What is the CSS3 The background size Property?

The background-size property specifies the size of the background image.

As we know Before CSS3, the background image size was find out by the real size of the image. In CSS3 it is possible to specify the size of the background image, which allows you to re-use background images in different ways.

.abcbp1

{

background:url(background.gif);

-moz-background-size:80px 60px; /* Firefox 3.6 */

background-size:80px 60px; /* or we can do background-size:100% 100%;*/

background-repeat:no-repeat;

}

   

8. What is the word wrap / word wrapping in CSS3?

To Allow long words to be able to break and wrap onto the next line in css3 we used word-wrap property like below class 

.wordwrappcds{word-wrap:break-word;}

   

9. What is the CSS3 animation?

When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector by specifying at least these two CSS3 animation properties:

A) Specify the name of the animation

B) Specify the duration of the animation   

10. What is Opacity in CSS3?

Opacity is used to show or hide the html element For example 0 for hide and 1 for show.

11. What is the other name of combined selector in CSS3 and what is it used for?

The other name of combined selector in CSS3 is known as Grouping

12. How is multiple background images handled in CSS3?

If you want to use the multiple background ,we can insert as follows...

background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg); also we can mention the position of the image either percentage value or top left, left center like this

13. What is wrapping in CSS3?

Wrapping is a vital property for proper display of contents in web pages. If wrapping is disabled then the user could not display and view long lines that goes outside the window boundary and thus becomes useless.

Definition:

The wrap() method wraps specified HTML element(s) around each selected element.

Syntax

$(selector).wrap(wrappingElement,function(index))

where wrapping element specifies what HTML element(s) to wrap around each selected element.It's compulsory.

Possible values:

HTML elements

jQuery objects 

DOM elements

function(index) is Optional. Specifies a function that returns the wrapping element 

index - Returns the index position of the element in the set

14. What is the syntax of opacity in CSS3?

Firefox uses the property opacity:x

Ex:style="opacity:0.4;

IE uses filter:alpha (opacity=x)

Ex:filter:alpha(opacity=40)"

15. What is CSS rule 'ruleset'? 

There are two types of CSS rules: ruleset and at-rule.

Ruleset identifies selector or selectors and declares style which is to be attached to that selector or selectors. For example P {text-indent: 10pt} is a CSS rule. CSS rulesets consist of two parts: selector, e.g. P and declaration, e.g. {text-indent: 10pt}.

P {text-indent: 10pt} - CSS rule (ruleset)

{text-indent: 10pt} - CSS declaration

text-indent - CSS property

10pt - CSS value

16. What are the various style sheets?  

Inline, external, imported and embedded are the different types of style sheets.

17. What are style sheet properties?

CSS Background

CSS Text

CSS Font

CSS Border

CSS Outline

CSS Margin

CSS Padding

CSS List

CSS Table

18. List various font attributes used in style sheet?

font-style

font-variant

font-weight

font-size/line-height

font-family

caption

icon

menu

message-box

small-caption

status-bar  

19. What are the five possible values for “position”? 

Values for position: static, relative, absolute, fixed, inherit 

20. What does isNaN function do? 

Return true if the argument is not a number.       

21. What is a CSS File? It is used for what purpose?

CSS stands for "Cascading Style Sheets", and are used to control and manage font styles, font sizes, and web site color combinations that are used in a web page. In order to retain continuity of "look and feel" throughout a website, all pages within a website will often refer to a single CSS file. The CSS file is typically contained in a separate file from the website, and the various web pages retrieve the CSS file each time a web page is displayed. CSS files 

make global appearance changes easy -- a single change in a CSS file will mean that any pages using that CSS file will automatically display the changes .

22. How do I make a picture as a background on my web pages?

Point the body background to the name of your image you wish to use as the background as shown below. This body line should be the first line after your < / head> tag.

<body background="picture.gif">

You can also have the background image fixed, so it does not move when using the scroll bar in the browser. To do this add the BGPROPERTIES tag as shown below. 

<body background="picture.gif" bgproperties="fixed"> 

23. How do I add scrolling text to my page? 

Keep in mind not all browsers support scrolling text. however to do this add a tag similar to the below example:

<marquee >THIS WOULD SCROLL< /marquee> 

The above example would create the below scrolling text. If your browser supports scrolling text the below example should be scrolling. More examples can be found on our main HTML page that lists most of the HTML commands. 

24. How do I make it so that someone can mail me by just clicking on text with subject?

Use the mailto command in your A HREF link tag as shown below:

<a href="mailto:support@computerhope.com?Subject=Enquiry">Click here to mail</ a> . 

25. How do I align pictures so that one may be higher or lower than the other?

Use the align statement in your IMG SRC tag as shown below. 

<img src="http://www.computerhope.com/chguy.gif" align=top> 

Also, instead of align=top you can do align=middle, and align=bottom.  

26. What is external Style Sheet? How to link?

External Style Sheet is a template/document/file containing style information which can be linked with any number of HTML documents. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file. The file is linked with HTML documents via the LINK element inside the HEAD element. Files containing style information must have extension .css, e.g. style.css. 

<HEAD> 

<LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> 

</ HEAD>   

27. Is CSS case sensitive? 

Cascading Style Sheets (CSS) is not case sensitive. However, font families, URLs to images, and other direct references with the style sheet may be. The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers. It is a good idea to avoid naming classes where the only difference is the case, for example: div.myclass { ...} div.myClass { ... } If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake, the last instance of the style will be used, regardless of case.   

Basic Tips for Professional Webpage Designers

Basic Tips for Professional Webpage Designers

Are you a professional webpage designer? or
Are you new to webpage design and going to learn it?

Does not matter!!

Following are some basic tips which each webpage designer must follow. Webpage designing is very easy and interesting. You can learn webpage designing in no time if you take interest in it. You don't have to learn any complex algorithm or diagrams for this. Learning web design online is very easy. There are a lot of websites which will teach you web design from the scratch.

You will have to learn HTML, CSS and Javascript for web design. Flash, Photoshop will be a plus. Today, HTML5 has eliminated the need of Flash. CSS3 has now lot of advanced features which are provided by Photoshop like gradient effects, animations, rounding the corners of images etc.

You can get a lot of web design templates online. There are a lot of free editors available for HTML, CSS and Javascript which will help you in learning web designing.

For now, I have listed some basic points which each web designer must have in mind before designing any webpage.

1. Include Doctype in your webpages

The DOCTYPE defines which version of HTML you are using, and gives important information to your browser so it can render your page faster and more consistently.

The DOCTYPE declaration also allows validating software to check the syntax of your page.

<!DOCTYPE html>

2. Include Title in your webpages

The <title> element is one of the most important HTML elements. Its main function is to describe the content of a web page. It is important to the quality of your web site because it will be visible in search engine lists, the browser's title bar and user's bookmark.

The title should be as short and descriptive as possible.

 

When a user searches for a web site, most search engines will display the title of your web site in the search result. Make sure the title matches the content the user is looking for. Then it is more likely the user will click on the link to visit your web site.

3. Use Headers in your webpages

The <h1> element is used to describe the main heading of a web page. You can use <h2>, <h3>, <h4> etc to arrange your content in your webpage. This will be great approach for search engine optimization.

4. Follow CSS standards

With CSS, you can store all style information for your web site in one single document. Using Cascading Style Sheets (CSS) is the preferred way of separating content from style in quality web pages.

Using CSS will improve the quality of your web site and increases the readability for many different browsers. It will also greatly reduce your web site development costs.

5. Use Web Validators

A validator is a software program that can check your web pages against the web standards.

When using a validator to check HTML, XHTML or CSS documents, the validator returns a list of errors found, according to your chosen standard.

6. Do not use fixed sizes

Never use fixed size values. Always use relative size values.

The most important reason for this advice is that fixed sizes can not be resized by the browser.

Your visitors will have different monitors, different viewing conditions (light), and possible disabilities (poor eyesight).

Setting your default text size to 100% (or medium), your main headers to 140% (or x-large), your sub headers to 120% (or large), as an example, will make it possible for your reader to resize your pages to their best fit.

7. Take care of different date formats

Don't use dates like "04-03-02". This is confusing.

The date above could mean the 2nd of March, 2004. It could also mean the 4th of March, 2002. Or even the 3rd of April, 2002.

The International Standard Organization (ISO) has defined an international format for dates as "yyyy-mm-dd", where yyyy is the year, mm is the month, and dd is the day.

When you use this ISO format, you can expect most visitors to understand your dates.

8. Always take care of font-family, line spacing, letter spacing, color contrasts, foreground and background colors.