A Web Designer's Notes: 2012

Thursday 28 June 2012

JQuery Tutorials

http://docs.jquery.com/Tutorials

Tuesday 12 June 2012

LESS - The dynamic stylesheet language

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino

Follw the link to know more about LESS

http://www.lesscss.org/

Wednesday 6 June 2012

Password validation using java script

minimum 1 special charactor
min limit 6 max limit 10

HTML

<label for="password"> password</label>

<input name="password" type="text" id="password" onblur="chkit();" maxlength="10" />

Java Script

function chkit()
{
var password=document.getElementById('password').value;
var pattern=/^([a-z A-Z 0-9 - _ . @ # ]*[- _ . @ # ][a-z A-Z 0-9 - _ . @ # ]*)$/;
if(password!="")
{
if(password.length>5)
{
if(!pattern.test(password))
{
alert('pw not in format');
}
else
{
alert('pw In format');
}
}
else
{
alert('pw not In format');
}
}
}

Live Demo

password

Tuesday 28 February 2012

Link which will add your site to favorites

<a href="javascript:window.external.addFavorite('http://www.http://adesignersnotes.blogspot.in/','A Designer's Notes');">Click here to add www.http://adesignersnotes.blogspot.in/ to your favorites!</a>

For example try it

Click here to add www.http://adesignersnotes.blogspot.in/ to your favorites!

Tutorials for design tips

http://www.dhtmlgoodies.com/index.html?page=tutorials

Java script games

http://www.dhtmlgoodies.com/index.html?page=forfun

http://www.dhtmlgoodies.com/index.html?page=chess

Useful Links for web designers

This Ste will be very helpful for web designers
http://www.dhtmlgoodies.com

For Learning Struts Frame works
www.vaannila.com

Monday 20 February 2012

Adding inner table to a dynamic td of a table

Try This codes

Script

<script language="javascript">

function addtabletesting(tableID) {

var table1 = document.getElementById(tableID);
var rowCount1 = table1.rows.length;
var row1 = table1.insertRow(rowCount1-1);
var td1 = document.createElement("TD");

/*
creating a new row row1 andadded a column td1
*/

var table2= document.createElement("TABLE");
var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2);
var td2 = document.createElement("TD");

/*
Created a new table table2 added row2 and td2.
*/
td2.innerHTML = "<h4>my new column in new inner table </h4>";

row1.appendChild(td1);
td1.appendChild(table2);
row2.appendChild(td2);
/*
Added td1 into row1, table2 into td1, and td2 into row2.
*/

}

</script>

html

<table id="testtable1" border="1">
<tr><td width="150">old table row 1 column 1</td></tr>
<tr><td>old table row 2 column 2</td></tr>

<tr><td> <a onclick="addtabletesting('testtable1')" >Add table</a> </td></tr>
</table>

Auto adjusting height and width of window to screen size

Add th following code

<script type="text/javascript">
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert( 'Width = ' + myWidth );
window.alert( 'Height = ' + myHeight );
}
</script>

Calling a popup

For adding a popup in an anchor tag use the following code ( Tiles)

<a NAME="Search Criteria Window" title=" Search Criteria " onclick=window.open('mypage.action',"Ratting",'width=800,height=250,left=150,top=200,toolbar=0,status=0,addressbar=0,');> my page </a>

For normal pages insted of mypage use mypage.jsp

For calling a full screen popup

onclick="theURL='#'; window.open(theURL, '', 'fullscreen=yes, scrollbars=yes' );"

Controlling parent window from popup window

Use the following function

<script langauge="javascript">

function post_value(){

self.close(); //Closing popup window

//Redirecting parent to normal jsp page
window.opener.location.href=" pagename .jsp?item1="+document.frm.textfieldtest.value;

//redirecting parent when tiles is used
window.opener.location.href="pagename";

// assigning a value toa field in parent
opener.document.form1.par_name1.value = document.form2.textfieldtest.value;

}
</script>

Thursday 9 February 2012

Rotate a text

-webkit-transform: rotate(-90deg); /* Safari */
-moz-transform: rotate(-90deg); /* Firefox */
-ms-transform: rotate(-90deg); /* IE */
-o-transform: rotate(-90deg); /* Opera */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */

-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-ms-transform: rotate(7.5deg); /* IE9 */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
transform: rotate(7.5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
zoom: 1;

Wednesday 8 February 2012

Prompts

Put it in a JS function
prompt("Please enter your name","Harry Potter");

Conformation window

Put these lines inside a java script function

var msg;

msg= "Are you sure you want to delete the data ? " + ttt + " - ID= "+id;

var agree=confirm(msg);

Default paddings and margins

HTML Tags such as table, th, td, h1, h2 etc. are having default paddings and margins, which will create unexpected spacing in some places. for avoiding them we have to add the following lines in to the style like,

H4 {
padding: 0;
margin: 0;
}

if you want the action to be done for a part only, do as follows

.mytable, .mytable td {
width: 742px;
padding: 0;
margin: 0;
}

where my table is a class defined.

Passing values through anchors

In jsp

if you want to pass any variable

In struts tiles

And passing any variable

Accessing session

Usually for accessing session in jsp pages we use the code with in scriptlets like

String x=(String)session.getAttribute("uname");

Type casting is required. or use

String x=""+session.getAttribute("uname");

If you want to print it somewhere in the jsp page do,

<%= session.getAttribute("uname")%>

It will print the session value in jsp page.

For accessing in java pages

Map session = ActionContext.getContext().getSession();
String uname=""+session.get("uname");

Retriving an item which is passed from a previous page

String item=request.getParameter("ITEM");)

Avoiding access to history back button

Java script
<script>
function backButtonOverride()
{
// Work around a Safari bug
// that sometimes produces a blank page
setTimeout("backButtonOverrideBody()", 1);

}

function backButtonOverrideBody()
{
// Works if we backed up to get here
try {
history.forward();
} catch (e) {
// OK to ignore
}
// Every quarter-second, try again. The only
// guaranteed method for Opera, Firefox,
// and Safari, which don't always call
// onLoad but *do* resume any timers when
// returning to a page
setTimeout("backButtonOverrideBody()", 500);
}
</script>

Add this function on load of body
<body onLoad="backButtonOverride()">

Open a page in full screen window

Add this java script

<script language="JavaScript"> /* script which loads the page fullscreen.jsp in full screen window */

function fullScreen(theURL) {
alert("Press Ctrl + F4 for closing popup window");+

window.open(theURL, '', 'fullscreen=yes, scrollbars=yes' );

}
</script>

if you want to call the function on load time itself add the following code

window.fullScreen('fullscreen.jsp');

If you want to call function from a link use

<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');">Open link in Full Screen Window </a>

Dynamically adding rows and styles to a table

java script function is

function addrow(tableID) {
try{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount-1);

var i=0;
var newcell = row.insertCell(i);
newcell.innerHTML ='<h4>Type    </h4>';
newcell.className = 'formlabel';
i++;
newcell = row.insertCell(i);
newcell.innerHTML ='<input type="text" name="type7" id="type8" size="30"/>';
newcell.className = 'formfield';
i++;
newcell = row.insertCell(i);
newcell.innerHTML ='';
newcell.className = 'formgap';
i++;
newcell = row.insertCell(i);
newcell.innerHTML ='<h4>Description    </h4>';
newcell.className = 'formlabel';
i++;
newcell = row.insertCell(i);
newcell.innerHTML ='<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>';
newcell.className = 'formfield';

}catch(e) {
alert(e);
}
}

HTML part is

<table id="table1" width="792" border="0">

<tr class="rowdiv">
<td class="formlabel"><h4>Type    </h4></td>
<td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td>
<td class="formgap"></td>
<td class="formlabel"><h4>Description    </h4></td>
<td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td>
</tr>

<tr class="rowdiv">
<td width="170" class="formlabel"> </td>
<td class="formfield"> </td>
<td class="formgap"></td>
<td class="formlabel"> </td>
<td class="formfield"><h6 onclick="addrow('table1')">Add policy</h6></td>
</tr>

</table>

css part is

.formlabel{ /* fields label's style */
text-align: right;
font:Verdana, Geneva, sans-serif; font-weight: lighter;
margin: 0px;
padding: 0px;
text-transform: capitalize;
color:#000000;
}
.formlabel a{ /* fields label's style */
text-align: right;
font:Verdana, Geneva, sans-serif; font-weight: bold;
margin: 0px;
padding: 0px;
text-decoration:none;
text-transform: capitalize;
color:#FF0000;
}
.formlabel a:HOVER{ /* fields label's style */
text-align: right;
font:Verdana, Geneva, sans-serif; font-weight: bold;
margin: 0px;
padding: 0px;
text-decoration:none;
text-transform: capitalize;
color:navy;
}
.formfield { /* field style */
text-align: left;
margin-left:1px;
font:Verdana, Geneva, sans-serif;
text-transform: capitalize;

color:#000000;
}
.formfield textarea{ /* field style */
text-align: left;
margin-left:1px;
font:Verdana, Geneva, sans-serif;
text-transform: none;
width:185px;
color:#000000;
}
.formfield a{ /* field style */
text-align: left;
margin-left:1px;
font:Verdana, Geneva, sans-serif; font-weight: bold;
text-decoration:none;
text-transform: capitalize;
color:#FF0000;
}
.formfield a:HOVER{ /* field style */
text-align: left;
margin-left:1px;
font:Verdana, Geneva, sans-serif; font-weight: bold;
text-decoration:none;
text-transform: capitalize;
color:navy;
}
.loginformfield { /* field style */
text-align: left;
margin-left:1px;
font:Verdana, Geneva, sans-serif;
}
.formfield input {text-transform: capitalize;`font:Verdana, Geneva, sans-serif;}

.formlabel h5{margin: opx;padding: opx; font-weight: lighter;}
.formfield h6{margin: opx;padding: opx; font-weight: lighter;}

Auto redirect codes

In Struts with tiles
<% response.sendRedirect("search"); %>

In JSP
<% response.sendRedirect("search.jsp"); %>

Parent window field updated by a child popup window

Parent window code

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Passing of value from Child to parent window</title>

<META NAME="DESCRIPTION" CONTENT="Transfering value from Child window to parent window ">

<META NAME="KEYWORDS" CONTENT="Window passing value, parameter value , passing of value, small window closing">

</head>
<body>

<h1>entered value from child window to parent window </h1>
<form method=post action='' name=f1>
<br>
<input type=text name='p_name1' >
<br>
<a href="javascript:void(0);" NAME="Search Criteria Window" title=" Search Criteria " onClick=window.open('child.jsp',"Ratting",'width=750,height=170,left=150,top=200,toolbar=1,status=1,');>Click here to open the child window</a>

</form>
<br>
</body>
</html>

Child page ( child.jsp)

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script langauge="javascript">
function post_value(){
opener.document.f1.p_name1.value = document.frm.c_name1.value;
self.close();
opener.test1();
}
</script>
<title>(Type a title for your page here)</title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">

</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">

<form name="frm" method=post action=''>
<table border=0 cellpadding=5 cellspacing=5 >
<tr><td align="center">
Enter No of rows
</td><td align="center">
<input type="text"" name="c_name1" value=3 >
</td><td align="center">
<input type=button value='Submit' onclick="post_value();">
</td></tr>
</table></form>

</body>
</html>

Fixed Header table

Style
.Container { margin-left: 200px; background-color: green; overflow: scroll; overflow-x: hidden; height: 200px; }

.BigTable { width: 100%; }

.BigTable td { width: 40%; }

.BigTable td + td { width: 30%; }

.BigTable td + td + td { width: 30%; }

.Header { margin-left: 200px; height: 30px; background-color: blue; }

.Header .Heading { width: 40%; float: left; height: 30px; }

.Header .Heading + .Heading { width: 30%; }

.Header .Heading + .Heading + .Heading { width: 30%; }

Table HTML

<div class="Header">
<div class="Heading">Heading 1</div>
<div class="Heading">Heading 2</div>
<div class="Heading">Heading 3</div>
</div>
<div class="Container">
<table class="BigTable">
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>

<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
</tbody>
</table>
</div>

or try this

#listBevel, #listTable {
position: absolute;
z-index: 2;
border: 1px solid #989898;
top: 85px;
left: 227px;
right: 37px;
height: 270px;
min-width: 654px;
}

/* @group List Table Headers */

#listTableHeaders {
position: absolute;
z-index: 3;
top: 67px;
left: 39px;
right: 37px;
height: 500px;
min-width: 654px;
border: 1px solid #989898;
overflow: hidden;
overflow-y: scroll;
}

.tableHeaderShadow {
background: url(/images/interface/bevel_shadow.png) repeat-x;
position: fixed;
height: 5px;
top: 105px;
right: 53px;
left: 228px;
min-width: 639px;
}

#scrollBarCoverContainer {
position: fixed;
z-index: 5;
top: 86px;
left: 228px;
right: 38px;
height: 0;
min-width: 654px;
font-size: 11px;
border: 1px none #989898;
text-align: right;
}

#scrollBarCoverUp {
background: url(/images/interface/list_header_bg.png) repeat-x;
width: 14px;
height: 18px;
border-left: 1px solid #e5e5e5;
float: right;
}

table#entryListHeaders th img.sortArrow {
float: right;
}

table#entryListHeaders th a {
color: #000;
text-decoration: none;
display: block;
height: 18px;
}

table#entryListHeaders th:hover {
background-position: 0 -18px;
cursor: default;
}

table#entryListHeaders th {
background: url(/images/interface/list_header_bg.png) repeat-x;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #a5a5a5;
text-align: left;
padding: 0 5px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 18px;
width: 42%;
font-size: 11px;
line-height: 1.6em;
text-shadow: #fff 0 1px 0;
}
table#entryListHeaders th + th {
width: 32%;
}

table#entryListHeaders th.selectedHeader {
text-shadow: #d8e6ff 0 1px 0;
background-image: url(/images/interface/list_header_selected.png);
border-left-color: #c2d4f2;
}

#listTable {
background-color: #fefefe;
top: 104px;
height: 251px;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
font-size: 11px;
border-collapse: collapse;
}

table#entryList {
}

table#entryList td {
width: 42%;
}

span.truncateText {
display: block;
height: 18px;
overflow: hidden;
}

tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
border-right: 1px hidden #cbd1d8;
padding: 1px 5px;
height: 18px;
line-height: 1.6em;
margin: 0;
border-left-style: hidden;
border-left-width: 1px;
}

tbody.scrollContent tr.alternateRow {
background: #eaf2ff;
}

tbody.scrollContent tr.selectedRow td {
background: url(/images/interface/selected_row.png) repeat-x;
color: #fff;
border-right-style: hidden;
}

table#entryList td + td {
width: 32%;
}

tbody.scrollContent tr:hover, tbody.scrollContent tr.alternateRow:hover {
background-color: #d8e7ff;
cursor: default;
}

<div id="scrollBarCoverContainer">

<div id="scrollBarCoverUp"></div>

<div class="tableHeaderShadow"></div>

</div>

<div id="listTableHeaders">

<table id="entryListHeaders" border="0" cellpadding="0" cellspacing="0" width="100%">

<thead class="fixedHeader">
<tr>
<th id="selectedHeader">Name</th>
<th>Domain</th>

<th>>Modified</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>

<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>

<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>

<tr class="alternateRow">

<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>

<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>

<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>

<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>

<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>

</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">

<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>

<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>

<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>

<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>

</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">

<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>

<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>

<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
</tbody>
</table>

</div>

Here I am starting to create notes about my works, tips, etc.

A Web Designer's Notes