Saturday, June 21, 2014

Using HTML5 semantic tags (Part 3) : section, mark, time


Good day everyone! this is Part3 of sematic tag tutorials for beginners, before moving on we would like you to go through the Part1 & Part2 of this tutorial for better understanding. In this Part 3 of our semantic tags tutorials we are going to show how to define different sections of a webpage using <section> tag, and how to highlight text using <mark> tag & defining timings using <time> semantic tags.

<section> : <section> semantic tag is used to define different sections of your page. For example imagine a webpage with few parts like login part, article part, community follow part, subscription part etc. now these different parts which contributes to your webpage are different sections of your web page which were earlier grouped using <div> tags without any definition to what it was can now be grouped using <section> tags for each different sections. Although you will use <article> tag or any other semantic tag to define the specific contents but still each specific content is a part of your page and so each part will go inside the section tag and also a webpage can have any number of sections. Look at the example below :

     <body>
       <section>
          <header>
             <img src='logo.jpg'></img>
             <p>Contact Us</p>
          </header>
       </scetion>
       <section>
          <main>
             <section>
                <article>
                     --- article goes here ---
                </article>
             </section>
          </main>
       </section>
     </body>

<mark> : <mark> semantic tag is a very simple definitive tag used to highlight text in webpages. Look at the example below:

    <body>      
       <p>
         <mark>Eifel Tower</mark> is in <mark>Paris</mark>
       </p>
    </body>

<time> : <time> semantic tag is also a very simple definitive tag used to define time and dates in webpages. <time> can not only be used to time & date like "12:00" , "2014-02-12" but can also be used to define words that relates to time & dates like for example "tomorrow" , "yesterday" , "2 hours" etc. The datetime attribute of <time> tag is used to define a specific time or date to the related words. Look at the example below :

    <body>
         <p>
            I am going to paris tomorrow for a seminar
            on HTML5 at <time>12:00</time>
         </p>
         <p>
            I am going to my native place
            <time datetime="2014-06-25">tomorrow</time>.
         </p>
    </body>


We hope you liked this post if you did make sure you share it with your social networks.

Happy Designing !

Friday, May 16, 2014

Using HTML5 semantic tags (Part 2) : aside, nav, main


Good day everyone! this is Part2 of sematic tag tutorials for beginners, before moving on we would like you to go through the Part1 of this tutorial for better understanding. In this Part 2 of our semantic tags tutorials we are going to show how to use & define your related, navigation and main contents using <aside>, <nav> and <main> semantic tags.

<aside> : aside semantic tags in HTML5 is used to define contents that are not part of your article or page but are still related to them. Mostly all designers think of aside as an element to design the sidebar which is not the perfect way to use <aside> but still you can use it for sidebar. The best example for the use of <aside> is to provide article, post or page's author information as it is no part of the article or post but still is related to it. You can notice in the left side of this page which you are viewing right now contains the information of the author of this blog which is something not a part of this post but still is related to it providing you with the information bout the author, this is where you can use the <aside>. Look at the example below :

    <body>
            <aside>
               <h3>About Me</h3>
               <p>I am a designer based in San Francisco</p>
            </aside>
    </body>

<nav> : From the name itself we guess that you have guessed this tag's use. The <nav> tag is a very simple tag of HTML5 which is used to define any type of navigations on your web page.
The use is very simple just enclose your entire navigation markup tat you previously created inside your <nav> and you are done. Anyone looking at your markup even a naive can make out that it is your navigation. If a naive can make out then why not the smart search engines. Look at the example below:

    <body>        
        <nav>
          <ul>
            <li><a href="www.google.com">Google</a></li>
            <li><a href="www.yahoo.com">Yahoo</a></li>
            <li><a href="www.msn.com"></a>MSN</li>
          </ul>
        </nav>
    </body>

<main> : The <main> is used to define the main part of your web page. It can contain any number of contents which we will make the main part of your page. Unlike other tags the <main> tag can be used only once in a document with contents representing the main items, this can even be your articles part contained inside your <main> tag. Look at the example below :

    <body>
         <main>   
            <article>
               <h1>Introduction to semantic tags</h1>
               <span>Sematic tags are
               used to define content in HTML5</span>
            </article>
         </main>
    </body>


Click here to view the demo example. You can also download it by clicking the below link:

Download

We hope you liked this post if you did make sure you share it with your social networks.

Happy Designing !

Saturday, May 10, 2014

Document Type Definition in HTML5


Hello everyone! in today's post we are going to discuss about the changes to "document type definition" declaration in HTML5. As you all may know prior to HTML5 i.e in HTML 4.01 declaring the type of document was a hectic task as it was very lengthy and had multiple types like ("transitional","strict","frameset") depending on what we are building. The declaration for these three types are given below:

Transitional :

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">

Strict :

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

Frameset :

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
  "http://www.w3.org/TR/html4/frameset.dtd">

As you can see the above document type declarations from version 4 of HTML is quiet tricky and very much time consuming proccess. But with the rise of HTML5 it brought with it a new dawn of ease for declaring your document type definition. Just look at the below HTML5 code for declaring document type and you just compare both the versions,

The one and only document type declaration

  <!DOCTYPE html>

We guess till now you must have compared both the version of document type declaration and understood the difference in power and ease of use. In HTML5 just 1 declaration covers every aspect and type of documnet, thats the power of HTML5.

Hope you liked our post if you did please link this post to you blog our website and do comment.

Happy Designing !

Tuesday, May 6, 2014

Using HTML5 semantic tags (Part 1) : header, footer, article.


Good day everyone! In this post we are going to introduce you to the semantic tags. Prior to HTML5 we lacked the ability to define our contents completely for every now and then we relied on <div> tag to group our content. It was good to group our content but lacked the ability to define contents which made a big confusion for web crawlers to search for a content and even developers and designers found it hard to identify and maintain a particular contents.
However, the new HTML5 has introduced several semantic tags to define our contents and in this part 1 of our semantic tags tutorials we are going to show how to define your header, footer and article contents using <header>, <footer> and <article> semantic tags.

<header> : header semantic tags in HTML5 is used to define & group header contents. All you have to do is whatever header contents like name of the site, logo, slogan etc that you were previously grouping under the <div> group it under the <header> element. This will clearly specify that the contents are header contents. Look at the example below :

    <body>
            <header>
               <img src="logo.jpg"></img>
               <span id="slogan">All good</span>
            </header>
    </body>

<article> : Now this is the tag we really wanted "the article semantic tag". Article semantic tag is used to define articles and posts on our blog or website. This tag can be very useful as unlike header and footer there can be multiple articles on page or website. This tag clearly specifies and define its contents. It is very useful to you and web crawlers. Look at the example below:

    <body>
            <header>
               <img src="logo.jpg"></img>
               <span id="slogan">All good</span>
            </header>
        
            <article>
               <h1>Introduction to semantic tags</h1>
               <span>Sematic tags are
               used to define content in HTML5</span>
            </article>
    </body>

<footer> : Unlike the header tag footer semantic is used to define and group footer contents that can be the copyright information of your site, contacts, recent links, Quick links etc. Use footer tag to specify and group all these footer contents. Look at the example below :

    <body>
            <header>
               <img src="logo.jpg"></img>
               <span id="slogan">All good</span>
            </header>

            <article>
               <h1>Introduction to semantic tags</h1>
               <span>Sematic tags are
               used to define content in HTML5</span>
            </article>

            <footer>
                  copyright © 2014
            </footer>
    </body>

So don't you think the new HTML5 tags are worth using, yes it is as it makes things a lot more easier for designers as well as for the search engines. So keep practicing and after that you can read partII of this article. We hope you liked this post if you did make sure you share it with your social networks.

Happy Designing !

Monday, May 5, 2014

How to make it to the wall?


Hello Programmers ! I hope all of you reading this want to make your way to the wall, and we are very glad to inform you that it is as easy as sending a mail or asking a question, and that is exactly what you need to do. Here at techTutorz our priority is "IDEA" because as always said "an idea can change the world". All you need to do is send us a mail from your own mail asking us any doubts or Question you may have on any programming & web designing technologies preferably (C, C++, .Net, JAVA, PHP, HTML/HTML5, CSS/CSS3, JQUERY) or even a suggestion for a new article along with the following details :

  • name
  • country/city [optional]
  • photo (your own photo or any image you would like to appear on the wall) [optional]
  • social network links (Facebook, Twitter, Google+) etc. [optional]
  • Your own blog or website link [optional]

and we will not only mail you the link to your solution but will also post the solution to the wall with your name, photo and blog or social links. You can also send us a full article if you wish and we will also be glad to post it to the wall. In short your Question when it reaches us becomes an "idea" and we respect people with IDEA.

You can send us your Questions (IDEAS) & above details at : techtutorz.idea@gmail.com



Wednesday, April 30, 2014

Sliding a division using slideUp & slideDown functions in JQuery


In this post we are going to show : how you can apply slide up & slide down effect to an <div> element with the JQuery slideUp & slideDown function. Although this tutorial aims at applying effects to the <div> element you can almost apply these effects to any html element like <p><img><table> and so on using the same method. So lets start.


   <html>
     <head>
     </head>

   <body>

      <div></div>
      <input type="button" id="su" value="Slide Up"></input>
      <input type="button" id="sd" value="Slide Down"></input>

   </body>

   </html>

  • Then embed the downloaded JQuery file in your html file between the <head> tag using the <script> tag as shown below
   <head>

   <!-- -------------- path of your downloaded jquery file goes inside 'src' attribute ------------ -->
   
   <script type="text/javascript" src="JQuery.js"></script>

   </head>

  • After that add another <script> tag in <head> and write your JQuery code to apply slide up & slide down effect to the element as shown below

   <script type="text/javascript">

   $(document).ready(function(){

         $("#su").click(function(){

               $("div").slideUp("slow");

   // u can use 'slow','fast' or numbers in milliseconds to control the speed of transition

        });

        $("#sd").click(function(){

              $("div").slideDown("slow"); 

   // u can use 'slow','fast' or numbers in milliseconds to control the speed of transition

        })

   });

   </script>

You are all set and ready to go. Check out the demo given below.

You can download the entire source code by clicking below download button.

 Download

Hope you liked our post if you did please link this post to your blog our website and do comment.


Happy Programming !

Tuesday, April 29, 2014

Delaying the fadeIn & fadeOut effect on <div> in JQuery


In this article we are going to show you how to use the JQuery delay function to delay the fadeIn & fadeOut effect on an <div> (you an use almost any html element you prefer) element that we discussed in the previous post (fading in & out <div> using JQuery).

Step 1:

Lets start with the html part. You can design your <div> element as you wish but we have given down a simple example you can use that for the start :


   <body>

   <div style="background-color:green;width:150px;height:150px;"></div><br />
   <input id="fo" type="button" value="Fade Out"></input>
   <input id="fi" type="button" value="Fade In"></input>

   </body>


Step 2:

Now lets look at the <head> part which is the last step, here you will include your JQuery file and also write the main coding for what you are here :


   <head>

   <script type="text/javascript" src="jquery-1.11.0.js"></script>

   <script type="text/javascript">

   $(document).ready(function(){
 
       $("#fi").click(function(){
            $("div").delay(3000).fadeIn("slow");
       });

       $("#fo").click(function(){
            $("div").delay(3000).fadeOut("slow");
       });

   });

   </script>

   </head>


The above code shows the delay function being used to delay the fadeIn & fadeOut effect for some seconds on button click and also you have to provide the delay time in milliseconds, the above code delays the effect by 3000 mlliseconds i.e, 3 seconds. The summary of the story is : when you will click the button it will fade out or in after some seconds specified by you.

That's it guys, all you want to make an <div> fade in and again out after a delay of some seconds on button click. Try our live example below :


You can download the entire source code by clicking the below download link

 Download

We hope you liked our post, if you did please share this link with your social network.

Happy Designing !

Monday, April 21, 2014

Understanding HTML5 tags & attributes


Hello everyone ! in this post we are going to help you understand how to use HTML5's tags & attributes so that you can easily kick start your HTML5 tutorials and easily follow our future articles & tutorials or any other tuorial you will find on the net. OK, this post is going to be the easiest one as almost all the rules & syntax are the same except some minor changes and believe us these minor changes will make your HTML writing even easier and less time consuming. So let's start with the changes made to some tags in this latest version of HTML :

  1. Document type definition : Do you guys remember the document type definition in the previous version of html i.e, HTML 4.01 ? I know you don't, you only remember that it was long, ugly & very much time consuming. Well put all that memories into a trash because HTML5 has completely replaced & redesigned the old doctype definition into a new doctype definition tag given below :

       <!DOCTYPE html>

    yes that's all guys what we have to do to define our document type. Isn't it easy, short, beautiful & very much time saving.
  2. <script> tag : The declaration syntax of script tag to attach external scripts to html has been choped a little and made little more time saving. The previous syntax wanted you to include the following attributes : "type" & "src" for perfect declaration but HTML5 has removed the "type" attribute from declaration as it is automatically detected and you can now write your script tag declaration as below :

       <script src="D:\abc.js"></script>
  3. <link> tag : Same syntax changes have been made to the link tag as well. The previous syntax wanted you to include the following attributes : "rel" , "type" & "href" for perfect declaration but HTML5 has removed the "type" attribute from declaration as it is automatically detected and you can now write your link tag declaration as below :

       <link rel="stylesheet" href="D:\abc.css"></script>

Ok that's all with changes to tags now let us look at the changes to syntax rules :


  1. Case-Insensitive : HTML5 is case-insensitive i.e, you can use any type of case for tag names & attributes, you can use upper, lower & even mix them as per your convenience like below :

       <HTML>
    
          <head></head>
    
          <Body BGCOLOR="green"></Body>
    
          <a Href="www.google.com">google</a>
    
       </HTML>
    
  2. Quotes are optional : The basic syntax rule that has been around for years that every attribute value must be quoted has been replaced with no quotes by HTML5 i.e, there is no more need to provide quotes for attribute values with 1 exception that every attribute value containing { > , < ,  , = , ' , " } must be quoted. The correct & incorrect attribute syntax are given below :

       Correct Syntax                     Incorrect Syntax
     
       <div id=hello world></div>        <div id=blah blah></div>
       <div id="hello'eorld"></div>       <div id=blah'blah></div>
       <div id=hello&gt;world></div>      <div id=hello>world></div>
       <div id="hello=world"></div>       <div id=hello=world></div>
       <div id='hello'world'></div>       <div id=hello'world></div>
       <div id='hello"world'></div>       <div id=hello"world></div>
    
  3. Attributes values are optional : There are some attributes in HTML5 that does not require a value they are called empty attributes in HTML5. For example look at theexample given below :

      <video src="videofile.mp4" controls>
      </video>
    

    Notice the control attribute above which indicates whether or not the video controls should be visible. It by default means "true". i.e, the controls should be visible. There are many more attributes like this which you will come to know in our future articles.
  4. Closing Empty tags are optional : HTML5 makes it optional to close the tags without contents i.e, you no more have to waste your time by closing all the tags with no body contents. For example look below :

      <hr>
      <br>
    
Ok guys that's it and now you are ready to advance in HTML5 as your are clear with all the basic things. To learn more about HTML5 continue to follow our posts. You can also validate your HTML5 pages by going to this link http://validator.w3.org/ an uploading your code and then clicking on validate.

We hope you liked our post, please visit again and share our post with your social network.

Happy Designing !

Saturday, April 19, 2014

Introduction to HTML5




HTML or Hyper Text Markup Language as you all know is a markup language used to create a well structured layout for a web page, it came into existence in 1999 since then the internet has changed significantly. But still designners all over the world noticed that something was missing and incomplete but managed and got seasoned by using third party software and tools. Some of the noticeable demerits of html4 were :

  • lengthy document type definitions (difficult to memorise)
  • lack of ability to play sounds & videos without 3rd party plugins (adobe flash, shockwave etc etc)
  • lack of ability to draw vector graphics (but managed by using 3rd party drawing tools & embedded it into HTML file)
  • fewer semantic tags (using the same tags for article, address, header, footer etc etc. for eg: <div> making it difficult to define a particular content)
  • and many more......

You all may be thinking so many missings but still we were structuring our web pages using HTML to be precise HTML 4.01 that was all because we were bound to use what was there and what was available to us. But don't worry gone are the days of limitations as something new has emerged HTML5.

Yes HTML5 ! a new behaviour, name & power for our old markup language. HTML5 which is the latest version of HTML, came into existence in the early 2008 and since then it is slowly releasing it's updates. Today almost every popular browser supports HTML5. HTML5 is developed jointly by World Wide Web (WWW) and Web Hypertext Application Technology Working Group (WHATWG) and is still under development that means there is more & "more is yet to come".

HTML5 was developed to replace HTML4, XHTML and HTML DOM to overcome the above mentioned limitations and many more so that user can design interactive and rich web pages with animations, graphics, music, videos etc without using 3rd party plugins and tools which adds to the page size ultimately affecting your page performance.

HTML5 is device independent as it was designed to work on any device whether you are using a smartphone, PC, laptop or a tablet. Some of many of the features of HTML5 is given below :

  • Two - Dimensional & Vector drawings & graphics
  • Audio & Video playback
  • Drag & Drop operations
  • Geolocation
  • Local data storage

These are some of the features of our latest version of HTML and all of them work without any third party plugin support, there are many more features and many more is to come. Look at the below demo code to get a key idea how HTML5 structures it's contents :



As you can see from the above code HTML5 has a very small, simple & a single document type definition which is eazy to remember than that of HTML 4.01.

HTML5 also defines different and unique tags to define particular contents for our web pages for example <header> tag for header contents like website name, logo, slogan and everything that usually goes inside the header, and <footer> tag for contents like copright information, contact numbers, address etc etc and <article> tag for writing & posting your articles. There are any more which you can learn just keep visiting and wait for our next article which will continue with HTML5 basics.

Thank you for visiting our blog if you liked our post please link our article to your blog or website and do comment.

Happy Designing !

Tuesday, April 15, 2014

Code to find the greatest number from user input


In this we are going to show all beginners how can you detect the greatest digit among multiple numbers.

Step 1:

   #include<stdio.h>
   #include<conio.h>

   void main()
   {
      clrscr();


      getch();
   }

This step is nothing but defining the basic C programming syntax.

Step 2:

   int a,b,c;

In this step we declared 3 variables( variables should be declared above clrscr() ) which will be used to store user inputs.

Step 3:

   printf("Enter any 3 numbers\n");

   scanf("%d%d%d",&a,&b,&c);

In this step we have written the code to accept 3 integer values from users.

Step 4:

   if(a>b && a>c)
   {
      printf("%d is the greatest number\n",a);
   }

   if(b>a && b>c)
   {
      printf("%d is the greatest number\n",b);
   }

   if(c>a && c>b)
   {
      printf("%d is the greatest number\n",c);
   }

This is the main and the final step as it does all the comparing of values entered by the user. As you can see above it is very easy to find the greatest number the only thing we need to do it compare each and every value with the other values to find the greatest. You can download the complete code file and run it from your TURBO C++ software by clicking the below link.

 Download

Yes that's it, we hope that you liked our post if you did link our post with your social networks and do comment.

Happy Programming !

Monday, April 14, 2014

Sorting array elements in ascending order


Let us today help you with the code to sort an array of elements elements provided by the user in ascending order. The code is given below step by step for your better understanding.

Step 1:

   #include<stdio.h>
   #include<conio.h>

   void main()
   {
      clrscr();


      getch();
   }

This step is nothing but defining the basic C programming syntax.

Step 2:

   int arr[5],temp,i,j;

In this step we declared 2 variables( variables should be declared above clrscr() ), first is an array of size 5 which will be used to store user inputs and an "temp" variable that we will use to temporarily store value, you can name it anything you like.

Step 3:

   printf("Enter any 5 numbers\n");

   for(i=0;i<5;i++)
   {
      scanf("%d",&arr[i]);
   }

In Step 3 we have written the code to accept 5 integer values from users.

Step 4:

   for(i=0;i<5;i++)
   {
        for(j=i+1;j<5;j++)
        {
            if(arr[i]>arr[j])
            {
                 temp=i;
                 i=j;
                 j=temp;
            }
        }
   }

This is the main step as it does all the sorting of array elements in ascending order entered by the user.

Step 5:

   printf("Your numbers have been sorted in ascending order\n\n");  

   for(i=0;i<5;i++)
   {
        printf("%d\n",arr[i]);
   }

This is the final step which display the array values which has been sorted.
Yes that's it, we hope that you liked our post if you did link our post with your social networks and do comment.

Happy Programming !

Saturday, April 12, 2014

Printing all even numbers from a user provided range


In our last post we had shown you how to directly print all even numbers from a static range. If you have not read our previous post than we recommend to read it first by clicking the link printing even numbers using for loop before reading further.

In today's post we are going to show you the C programming code to print all even numbers from any range of numbers provided by the user.  The code is given below :


   #include<stdio.h>
   #include<conio.h>

   int main()
   {
       int i,start,end;
       clrscr();
    
       printf("Enter starting number : ");
       scanf("%d",&start);
       printf("Enter ending number : ");
       scanf("%d",&end);

       for (i=start;i<=end;i++)
       {
           if(i%2==0)
           {
               printf(" %d\n",i);
           }
       }
    
       getch();
       return 0;

   }

Now this is the perfect code to solve our even number problem as you can see inside the loop it checks the " i " 's value each and every time it loops to find whether the current value of i returns the remainder as zero if divided by 2 if it does then its an even number.

Hope you liked our post if you have any suggestions or query please comment.

Happy Programming !

Friday, April 11, 2014

Printing even numbers using for loop in c programming


  • The below code shows how to directly print all even numbers from 2 to 20 without using the if....else conditional statement to check for the remainder as usually done and then decide whether even or not.

   #include<stdio.h>
   #include<conio.h>

   int main()
   {
      int i;
      clrscr();
    
      for (i=2;i<=20;i=i+2)
      {
          printf(" %d\n",i);
      }
    
      getch();
      return 0;

   }

The above code is not the perfect way to find and print even numbers but it will correctly find and print the even numbers because the range is starting from a static integer 2 and then incremented each time by 2 which will result only in even numbers. But this will not work when we will accept the range from user as you know user can enter any number for starting and ending values and in case if he enter 1 or any other odd number then this program will will print out all the odd numbers instead of even. But this code works perfectly if the programmer knows the range prior. To know the perfect way to find & print even numbers check out our article >> printing even numbers from a user provided range.

We hope you liked our post for more articles keep browsing and keep visiting and do comment.

Happy Programming !

Downloading and including JQuery API library file in your HTML file


Step 1:

Click this link http://jquery.com/ to open the JQuery official website and click on the download button on the home page as shown in the following image :



Step 2:

Clicking the download button will open up a new page where you can see multiple download option,one for uncompressed version,second for production version etc etc for both (1.x & 2.x). But we recommend to download the " uncompressed,development JQuery " from version 1.x as shown below :



Step 3:

Now you are done with download and you can rename the downloaded JQuery file to any name you want.
After that to use the JQuery functionalites you need to include it in your HTML file so for that first create a simple HTML file like below comprising of all the basic syntax :

   <html>
      <head>
      </head>
   
      <body>
      </body>

   </html>

Step 4:

Now add a <script> tag betwen the <head> tag with the type & src attribute specifying the type of script and path of the file your are going to include respectively. For help refer to the code below :

   <html>
      <head>
          <script type="text/javascript" src="D:\Jquery.js"></script>
      </head>

      <body>
      </body>

   </html>

Step 5:

Ok now you are done with everything you need to create a interactive page. Now the final step is to test your JQuery and for that just copy and paste the below code to your notepad as save it in " .html " format and run your page if everything went well you will see the <div> element sliding up.

   <html>
      <head>
          <script type="text/javascript" src="D:\Jquery.js"></script>

          <script type="text/javascript">


                $(document).ready(function(){
                $("#btn").click(function(){
                    $("#d").slideUp("slow");
               });
          });

          </script>
      </head>

      <body>
       
       <div id="d"></div><br /><br />
       <input id="btn" type="button" value="Slide Up"></input>
       
      </body>

   </html>

All done, we hope the example worked and if you enjoyed our post please link our blog in your website or blog and if you any suggestions or problem with the above code please comment and do recommend us.

Happy Programming !

Thursday, April 10, 2014

Fading a division using fadeIn & fadeOut functions in JQuery


In this post we are going to show : how you can apply fade in & fade out effect to an <div> element with the JQuery fadeIn & fadeOut function. Although this tutorial aims at applying effects to the <div> element you can almost apply these effects to any html element like <p><img><table> and so on using the same method. So lets start.


   <html>
     <head>
     </head>

     <body>

      <div id="fade"></div>
      <input type="button" id="fi" value="Fade In"></input>
      <input type="button" id="fo" value="Fade Out"></input>

     </body>

   </html>

  • Then embed the downloaded JQuery file in your html file between the <head> tag using the <script> tag as shown below
   <head>

   <!-- -------------- path of your downloaded jquery file goes inside 'src' attribute ------------ -->

   <script type="text/javascript" src="JQuery.js"></script>

   </head>

  • After that add another script tag in <head> and write your JQuery code to fade the element as shown below

   <script type="text/javascript">
  
   $(document).ready(function(){

           $("#fi").click(function(){
 
                 $("#fade").fadeIn("slow");

   // u can use 'slow','fast' or numbers in milliseconds to control the speed of transition

           });

           $("#fo").click(function(){

                 $("#fade").fadeOut("slow"); 

   // u can use 'slow','fast' or numbers in milliseconds to control the speed of transition

           })

   });

   </script>

You are all set and ready to go. Check out the demo given below.

Hope you liked our post if you did please link this post to you blog our website and do comment.

Happy Programming !