How-To Create A Cool Html Page to link to Web Apps in 10 minutes

image

When Google Chrome Rolled out it added the new feature of creating application shortcuts , but you had to have

different shortcuts for different apps like Gmail, Calendar , Facebook … etc . So I created a HTML page using which I can Link to other Apps.

Creating just a HTML Page is very easy ,but I wanted more than Just 4 links that I can click, I needed Animated effects and Icons , so I made it using JQuery .

Click Here to check out the Demo .

Note: In this tutorial I assume you the reader have at least a very basic understanding of HTML.

The icons are just images that can be downloaded from the internet , I recommend a Google Image Search for this.

Download the images you want to a Single folder .

image

So lets Begin By Creating a HTML File , but before we do this I recommend using a good text editor Like Notepad++ , but this can also be done using just plain windows notepad.

This tutorial is divided into 2 Sections The <head> Section and The <Body> Section

The <head> Section:

Begin the HTML file by typing <html>

<html>
<head>
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’ ></script>
<script>

$(document).ready(function(){
$(“#Gmail,#GoogleCalender,#Picasa,#Wordpress,#Facebook”).mouseover(function(){
$(this).width(200);
document.title=$(this).attr(“id”);
});
$(“#Gmail,#GoogleCalender,#Picasa,#Wordpress,#Facebook”).mouseleave(function(){
$(this).width(150);
document.title=”WEB App Links”;
});
$(“#Gmail”).click(function(){
window.location.replace(“
http://www.gmail.com”);
});
$(“#GoogleCalender”).click(function(){
window.location.replace(“
http://www.google.com/calendar/”);
});
$(“#Picasa”).click(function(){
window.location.replace(“
http://www.picasaweb.google.com”);
});
$(“#Wordpress”).click(function(){
window.location.replace(“
http://www.wordpress.com”);
});
$(“#Facebook”).click(function(){
window.location.replace(“
http://www.facebook.com”);
});

});
</script>

#links{
text-align:center;
}

</style>
</head>

After opening The the we must include the JQuery Library to do this add the following code

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’ ></script>

This code indicates that the Jquery Library is at

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

and that the browser must include it .You can also get the Jquery Library from www.Jquery.com .

I will return to the rest of The <head> section after completing the The <body> section for better understanding

The <body> Section:

Begin the <body> of the HTML file

<body>
<div id=”Links”>
<img src = “GmailIcon.png” id=”Gmail” width=150>
<img src = “GoogleCalenderIcon.jpg” id=”GoogleCalender” width=150>
<img src = “PicasaIcon.jpg” id=”Picasa” width=150>
<img src = “WordPressIcon.png” id=”Wordpress” width=150>
<img src= “facebookIcon.png” id=”Facebook” width=150>
</div>
</body>

</html>

Create a new <div> with id=”Links” like so

<div id=”Links”>

the id attribute is to easily Select the <div> when needed.

Now we add the images using the <img> tag like so

<img src = “GmailIcon.png” id=”Gmail” width=150>
<img src = “GoogleCalenderIcon.jpg” id=”GoogleCalender” width=150>
<img src = “PicasaIcon.jpg” id=”Picasa” width=150>
<img src = “WordPressIcon.png” id=”Wordpress” width=150>
<img src = “facebookIcon.png” id=”Facebook” width=150>

The id attribute here is again to uniquely select a single object from all the image objects , so make sure you give unique and meaningful names for easy understanding .

The width attribute is used to specify the width of the image in pixels.

The src attribute  specifies the source of the image , (i.e) the path and filename of the image .After adding the images close the </div> ,</body> and the </html>

Now that the images are added we can move on to Adding the effects , So Lets return to THE Section.

The <head> Section Continued……..

We add a script to the HTML file by opening a <script> tag. Inside the <script> tag we can write the Jquery Script .

$(document).ready(function(){

Tell the browser to execute the code that follows , after the webpage has loaded.

To Achieve the Highlight animation we use the following code

image

image

image

The $ symbol is a shorthand for the Jquery function.

$(“#Gmail,#GoogleCalender,#Picasa,#Wordpress,#Facebook”).mouseover(function(){
$(this).width(200);
document.title=$(this).attr(“id”);
});

The #id selector in Jquery tells the browser to select the object with given id

Eg: #Gmail selects the object with id=”Gmail” if you recall the object is

<img src = “GmailIcon.png” id=”Gmail” width=150>

We can select multiple objects by separating #id selector with commas .

.mouseover() Tells the browser to execute the code that follows when the mouse moves over the specified/selected  objects.

The following

$(this).width(200);

sets the width of the object to “200” , ‘this’ Keyword is used to specify the currently selected .

To set the title of the webpage we use the following code.

document.title=$(this).attr(“id”);

The next piece of code is similar to the above

$(“#Gmail,#GoogleCalender,#Picasa,#Wordpress,#Facebook”).mouseleave(function(){
$(this).width(150);
document.title=”WEB App Links”;
});

The ‘.mouseleave()’ statement is used to execute the code that follows when the mouse is moved away from the object .
This Completes the animation part of the Webpage , but we still need to link each image to the corresponding WebApp like Gmail,Facebook….etc.

To link Gmail for example we use

$(“#Gmail”).click(function(){
window.location.replace(“
http://www.gmail.com”);
});

#Gmail is used to select the Gmail image/icon .click executes the code that follows when the image is clicked.

window.location.replace(“http://www.gmail.com”); Redirects the page to www.gmail.com .

A similar code is used for all the other sites .

And finally this

<style type=”text/css”>
#links{
text-align:center;
}

</style>

is used to align all the images in the center.

So the Full code is

<html>
<head>
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’ ></script>
<script>

$(document).ready(function(){
$(“#Gmail,#GoogleCalender,#Picasa,#Wordpress,#Facebook”).mouseover(function(){
$(this).width(200);
document.title=$(this).attr(“id”);
});
$(“#Gmail,#GoogleCalender,#Picasa,#Wordpress,#Facebook”).mouseleave(function(){
$(this).width(150);
document.title=”WEB App Links”;
});
$(“#Gmail”).click(function(){
window.location.replace(“
http://www.gmail.com”);
});
$(“#GoogleCalender”).click(function(){
window.location.replace(“
http://www.google.com/calendar/”);
});
$(“#Picasa”).click(function(){
window.location.replace(“
http://www.picasaweb.google.com”);
});
$(“#Wordpress”).click(function(){
window.location.replace(“
http://www.wordpress.com”);
});
$(“#Facebook”).click(function(){
window.location.replace(“
http://www.facebook.com”);
});

});
</script>
<style type=”text/css”>
#links{
text-align:center;
}

</style>
</head>

<body>
<div id=”Links”    >
<img src =’GmailIcon.png’ id=”Gmail” width=150>
<img src =”GoogleCalenderIcon.jpg” id=”GoogleCalender” width=150>
<img src =”PicasaIcon.jpg” id=”Picasa” width=150>
<img src =”WordpressIcon.png” id=”Wordpress” width=150>
<img src=”facebookIcon.png” id=”Facebook”    width=150>
</div>
</body>

</html>

To Demonstrate I have made a Working Website , click Here to go to the Demo .

This Example Works in IE7 and above , FireFox 3.5 and above and Chrome 5.0 and above

Here is a video of the Code in action

Post your Comments Below !


2 Comments on “How-To Create A Cool Html Page to link to Web Apps in 10 minutes”

  1. preeti says:

    hey good one!!

  2. pranav says:

    super cool!!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s