CSS: Crop and resize image to certain ratio

Edit margin and move the image around within the <div> container.

<style>
.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    max-width: 400px;
    height: auto;
    margin: -75px 0 0 -100px;
}
</style>

<div class="crop">
    <img src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" />
</div>

Demo 

Refer:
http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped
http://dabblet.com/gist/4711695

HTML: Automatically Fill in Email Subject (mailto)

Example 1: <a> tag

<a href="mailto:emailname@yourdomain.com?subject=Subject You Selected&body=Body content">The text of your link</a>

Example 2: open new window in JavaScript

window.open('mailto:emailname@yourdomain.com?subject=Subject You Selected&body=Body content');

Example 3: <form> tag | (Demo)

<form action="mailto:you@yourdmainhere.com" method="post" enctype="text/plain">
FirstName:<input type="text" name="FirstName">
Email:<input type="text" name="Email">
<input type="submit" name="submit" value="Submit">
</form>

Refer site:
http://www.htmlbasictutor.ca/email-subject.htm
http://www.javascript-coder.com/javascript-form/javascript-email-form.phtml

CSS: Image always stick to left/right

File: styles.css

<style>
.btn_right {
 width: 50px; 
 height: 112px; 
 position: fixed; 
 right: 0pt; 
 top: 62px; 
 margin: 0px; 
 display: block;
}

.btn_left {
 width: 50px; 
 height: 112px; 
 position: fixed; 
 left: 0px; 
 top: 50%; 
 margin: -45px 0px 0px; 
 cursor: pointer; 
 display: block;
}

.btn_close_right {
 display: inline-block; 
 margin-left:30px; 
 width: 20px; 
 height: 18px; 
 background: url('close_icon.png') 0px 0px no-repeat; 
 cursor:pointer;
}
</style>

File: buttons.html

<link rel="stylesheet" type="text/css" href="styles.css" />
<!-- button always stick right -->
<div class="btn_right">
 <img style="cursor:pointer;" src="btn_right.png">
 <br>
 <div class="btn_close_right"></div>
</div>

<!-- button always stick left -->
<div class="btn_left">
 <img src="btn_left.png">
 <br>
 <img src="close_icon.png">
</div>

Positioning Tutorial: http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS: Table spacing issue in Gmail

<table width="579" border="0" cellspacing="0" cellpadding="0" class="bg">
<tr><td>
<img src="images/photo01.gif" style="display:block; margin:0px; padding:0px;" width="579" height="110" />
</td></tr>
<tr><td>
<img src="images/photo02.gif" style="display:block; margin:0px; padding:0px;" width="579" height="50">
</td></tr>
</table>

Web Tools: Online HTML Editor

Refer: www.w3schools.com

HTML : Iframe

Show loading animation while a page loads into another frame in a frameset

<html>
<head>
<script type="text/javascript">
var url = 'http://www.google.com'; //the details page you want to display...
</script>
<style>
#loading{
position:absolute;
left:45%;
top:40%;
background:white url(http://www.dallasjclark.com/blog/wp-content/uploads/2009/03/loading_animation.gif) repeat-x;
padding:10px;
font:bold 14px verdana,tahoma,helvetica;
color:#003366;
width:80px;
height:100px;
text-align:center;
}
</style>
<div id="loading"></div>
</head>
<body onload="location.href = url;" style="overflow:hidden;overflow-y:hidden">
</body>
<script>
if(document.layers) {
document.write('<Layer src="' + url + '" visibility="hide"></Layer>');
}
else if(document.all || document.getElementById) {
document.write('<iframe src="' + url + '" style="visibility:hidden;"></iframe>');
}
else {
location.href = url;
}
</script>
</html>

Taken From : http://forums.asp.net/t/1327988.aspx