Wednesday, September 2, 2009

HTML mailto attribute

The mailto is a quick way to add the facility of receiving feedback from visitor on your web site. With the HTML mailto, you create a link which when clicked by the visitor launches (if it's not already running) their email program with a new email message window. The visitor could then formulate the email message and send it off to you.

Note: HTML Mailto assumes that the visitor has configured an email client (Outlook Express, Netscape Messenger, Thunderbird or any other) to send emails.

In its simplest form, the HTML mailto requires an email address. However, mailto can be made slightly more professional if we use it properly.


The Basic form of HTML mailto

mailto looks like:


Send me an
email




And this is displayed as



A more complex HTML mailto


We will now learn how to create a more complex HTML mailto by adding an email subject and the email body so that it looks a little more professional. And this will definitely save your visitors some typing too!



Send me an email






Careful inspection of the above code will highlight two points. Firstly, the email address is separated from the other information by a ? sign (question mark) and secondly, body and subject properties are themselves separated using an &.

[Those of you familiar with server-side scripting will find a similarity between this mailto tag and the GET method.]

Remember, the prefilled email Subject and email body values can be changed by the visitor! But this fancy mailto looks better than plain one, doesn't it?

In addition to the body and subject, we can also provide HTML mailto with CC (Carbon Copy) and BCC (Blind Carbon Copy). This, as you would have guessed, requires us to append these values to the HTML mailto attribute just like we had done for body and subject. [Refer code and image below]




Send me an email





Thursday, August 27, 2009

JDK API search in Google Toolbar

For those of you who use the Google Toolbar, the following links will add a Java API search button to your toolbar. I've found this to be a very handy way to locate the javadoc for the platform.

Add Java SE 6 API search box to Google Toolbar

Add OpenJDK API search box to Google Toolbar

Tuesday, July 14, 2009

All About CSS

URL : http://www.cssportal.com/


Here at CSSPortal, we have gathered as much information as possible to try and help you learn CSS and improve your web design skills.



At this site, you'll find a range of quality resources all geared towards CSS, if you're looking for a new design for your website, then please check out our range of CSS templates or if you would like to design your own site, you may wish to check out some software to help, go to CSS software for some great programs. Also at CSSPortal, you'll find all the CSS properties, CSS books and a nice collection of CSS examples.

CSS Menu Generator has been updated to make it more user friendly.

- CSS properties list has been updated to include CSS 3 Properties.
- New CSS tool has just been released, Format CSS Code.
- Check out our new page about CSS3 Examples.

URL : http://www.cssportal.com/

Different Style in HTML Text Field

CSS Text Box Element



CSS Code



/* Text Box with Different Border: */
.tb-border {
border: 1px solid #0000FF;
}

/* Text Box with Background Color: */
.tb-background {
background-color : #99FFCC;
border: 1px solid #008000;
}

/* Text Box with Background Image: */
.tb-bg-image {
background-image: url(bg.png);
border: 1px solid #6297BC;
}

/* Text Box with Focus: */
.tb-focus {
border: 1px solid #888377;
}
.tb-focus:focus {
background-color: #F4EEDD;
}

/* Text Box with Side Image: */
.tb-bg-side {
background-image: url(Portal.gif);
background-repeat:no-repeat;
background-position:left;
border: 1px solid #6297BC;
padding-left:16px;
}

/* Text Box with Rounded Corners: */
.tb-rounded {
border:0;
background: transparent url(rounded.gif) no-repeat top left;
height: 22px;
width: 230px;
padding-top:2px;
}

/* Text Box with Gradient: */
.tb-gradient {
border:0;
background: transparent url(gradient.gif) no-repeat top left;
height: 22px;
width: 230px;
padding-top:2px;
}




Source: http://www.cssportal.com/form-elements/text-box.htm
Demo: View Demo

jCarousel-jQuery plugin

jCarousel description


jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order.
jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order.
The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

To use the jCarousel component, include the jQuery library, the jCarousel source file, the jCarousel core stylesheet file and a jCarousel skin stylesheet file inside the head tag of your HTML document.
--------------------------------------------------
--------------------
Home Page: http://sorgalla.com/jcarousel/
Demo: View Demo
Download :
Download jCarousel
Documentation: http://sorgalla.com/projects/jcarousel/
Examples : http://sorgalla.com/jcarousel/
----------------------------------------------------------------------