How to create a simple html page using HTML5 and CSS

Once you know little bit of what is html and css, you can start creating you own websites, for that you should understand how to design a simple layout using html.

How to make your own website for free

In this post, I am going to explain about how to make a website for free.

Even myself in the beginning, was wondering how do people were able to create such amazing websites with good web design. 

Website Development

 Developing website can be free or you can spend few bucks and ask somebody to do it. Lets talk about how to create it for free yourself. I bet you do not need to know much about coding part. 

I recommend creating a website with simple web design on either blogger.com or wordpress.com.

Reason : It is easy :-)

Blogger.com

 Blogger.com is provided by google and absolutely free of cost. Just sign in and few simple clicks to create a new blog and start writing posts or articles.

Wordpress.com

Wordpress.com is another free blogging domain that helps you to make your own website. 

Both blogger and wordpress provide plenty of website templates or themes to customize your blog or website. 

Note: Both will give a subdomain like -- yourwebsite.blogger.com or yourwebsite.wordpress.com

In order to get your own domain like yourwebsite.com you need to purchase it. Go to any domain seller like godaddy or bigrock and you can purchase it for around $10. I suggest you try with some deals or coupons.

What if you don't choose blogger or wordpress.

Yes, you can still create a website without using blogger or wordpress. Then you should do the following.

-- > Know what is website hosting. 

--> Know how much you should spend on website hosting.

Basically you need to handle whole stuff, from choosing a domain name to developing it with either Content Management System( CMS) or with your own code. 

How to use javascript settimeout to call functions in sequence

Using Javascript setTimeout to call javascript functions is easy. This simple tutorial explains the usage of javascript setTimeout function

How to place text inside a circle using css

We often require some text to be placed inside a circle. I am gonna show you how to do it in very simple steps.

Centering a div inside a div - Responsive Design

When I was creating a simple html theme, I wanted to create a basic page that will be good for both desktops and mobiles. So, I created this simple div structure to put my contents in the center of the screen.

A Simple Jquery ajax example - HTML form submission made easy

You might be wondering about using jquery ajax method. Here is a simple Jquery ajax post example that explains easy way to send data to server and fetch data from server asynchronously.

Jquery ajax tutorial for beginners

1. Include Jquery in your html header 

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

2. Create a html form to submit sample data asynchronously 

    <form id ="myForm">
      ENTER YOUR NAME   <input id ="myInput" name="myInput"/>
      <button type="submit" id="submit">SUBMIT</button>
   </form>

3. Create jquery method $.ajax to submit data to server

     In your javascript add function like this

      $.ajax();   // primary method

     It takes some arguments like
        a) Jquery ajax action-type (type), eg: post, get etc..
        b) file to call (url ),
        c) data to send (data),
        d) what to do upon success ajax call (success)
        e) what to do upon server error (error)

      So, adding up the arguments, it finally looks like this

      $.ajax(
           {
             type: "post",
             url :   "/path/to/my.php",
             data : $("#myForm").serialize();
             success : function(data) {
                      // alert(data);
                            } ,
              error : function(data) {
                   // alert('Report Server Error');
                         }
           }
         );
    

4. Call ajax on clicking the submit button 

   So, our jquery ajax method is ready to send data to server.
   NOTE : $("#myForm").serialize() method will send all the form elements to server.

      Create handler to submit button 

      $("#submit").click(function () {
                // add ajax function here.
        });

      It should look like 

      $("#submit").click(function () {
           $.ajax(
           {
             type: "post",
             url :   "/path/to/my.php",
             data : $("#myForm").serialize();
             success : function(data) {
                       // alert(data);
                            } ,
              error : function(data) {
                       // alert('Report Server Error');
                         }
           }
         );
        });
 

5. Handling form elements on the server side

  On your server side PHP or servlet get the form elements

   In our example we passed our server file as "/path/to/my.php". Jquery ajax will send form to that location.

 if it is PHP, use
                     $_POST["myInput"];
 if it is jsp/servlet use
                     request.getParameter("myInput");

 do what ever you want on the server side and you can send signal saying either it is good or bad or you can throw any exception.

   Throwing exception will be treated as error by $.ajax();

So, what I have done in my example php file is
       echo $_POST["myInput"];

6. Once it is success (Jquery ajax success)
    

  It is all happy on the server side, the $.ajax parameter success function is invoked.

  There is another important thing is to block default form submission.

  Because, html form is submitted to server when you click on submit button.
   In order to avoid such form submissions, you can say event.preventDefault(); Use this on button click

     So, our final form submission using jquery will look like this.

  $("#submit").click(function (e) {
           e.preventDefault();
           $.ajax(
           {
             type: "post",
             url :   "/path/to/my.php",
             data : $("#myForm").serialize();
             success : function(data){
                      // alert(data);
                            } ,
              error : function(data) {
                     // alert('Report Server Error');
                         }
           }
         );
        });
 

Fixed header on scroll

Having fixed header is very user friendly to any website and these below steps will show you how to have a fixed header with minimum steps. And there is an fiddle example at the bottom of this post.

For this example, I am creating navigation header and a table below it in a html file.

Note: Bootstrap css has been used for navigation and datatable.

 Bootstrap CDN available here :

//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

Step 1:
  Create a html file and add simple navigation header and wrap it in a div block with a class name as 'navigation'

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Step 2:
   Create a simple datatable with the below code and put it in a div with class name as 'datatable'

<table class="table table-condensed table-bordered">
       <thead>
           <tr><th>Head1</th><th>Head2</th></tr>
       </thead>
       <tbody>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
       </tbody>
</table>

Step 3:
   Now, add custom styles to your html code either in the same file or add it as an external css file

// Style to Navigation block.

.navigation {
    padding:8px; /* Some space around navigation pills */
    position:fixed; /* IMP.This makes the div fixed and cannot to moved*/
    top:0;          /* This will set the top edge position*/
    border:1px solid green; /* I Just gave it to differentiate between table and header*/
    background:#fff; 
    width:100%;    /* Occupies 100 percent of the page width*/
}

// Style to Datatable block

.datatable {
    margin-top:60px; // Top edge margin
}

At the end of step 3, you should be able to scroll the table with header as fixed (Note: For scroll bar to appear, the height of the browser should be less than the height of the page content. In our example browsers height should be less than table's height.)

 Fiddle available for this example here : http://jsfiddle.net/94hnes36/