learn html: January 2014

Java Beans: Introduction to Java Beans, Advantages of Java Beans, BDK Introspection, Using Bound properties, Bean Info Interface, Constrained properties Persistence, Customizes, Java Beans API, Introduction to EJB’s.

UNIT - III:

Web Servers and Servlets: Tomcat web server, Introduction to Servelets: Lifecycle of a Serverlet, JSDK, The Servelet API, The javax.servelet Package, Reading Servelet parameters, Reading Initialization parameters. The javax.servelet HTTP package, Handling Http Request & Responses, Using Cookies-Session Tracking, Security Issues.

UNIT - IV:

Introduction to JSP: The Problem with Servelet. The Anatomy of a JSP Page, JSP Processing. JSP Application Design with MVC Setting Up and JSP Environment: Installing the Java Software Development Kit, Tomcat Server & Testing Tomcat.

JSP Application Development: Generating Dynamic Content, Using Scripting Elements Implicit JSP Objects, Conditional Processing – Displaying Values Using an Expression to Set an Attribute, Declaring Variables and Methods Error Handling and Debugging Sharing Data between JSP pages, Requests, and Users Passing Control and Date between Pages – Sharing Session and Application Data – Memory Usage Considerations.

UNIT - V:

Database Access: Database Programming using JDBC, Studying Javax.sql.* package,Accessing a Database from a JSP Page, Application – Specific Database Actions,Deploying JAVA Beans in a JSP Page, Introduction to struts framework..

TEXT BOOKS:

1. Web Programming, building internet applications, Chris Bates 2^nd Edition, WILEY Dreamtech (UNIT s 1,2 ,3)

2. The complete Reference Java 2 Fifth Edition by Patrick Naughton and Herbert Schildt. TMH (Chapters: 25) (UNIT 4)

3. Java Server Pages –Hans Bergsten, SPD O’Reilly (UNITs 5,6,7,8)

REFERENCE BOOKS:

1. Programming world wide web-Sebesta, Pearson

2. Core SERVLETS ANDJAVASERVER PAGES Vol.1: CORE TECHNOLOGIES By Marty Hall and Larry Brown Pearson

3. Internet and World Wide Web – How to program by Dietel and Nieto PHI/Pearson Education Asia.

4. Jakarta Struts Cookbook , Bill Siggelkow, S P D O’Reilly for chap 8.

WEB LINKS:

1. http://nptel.iitm.ac.in

2. http://ebookee.org/dl/Web-Programming-building-internet-applications-Chris-Bates- 2nd-Edition-WILEY-Dreamtech-UNIT-s-1-2-3

3. http://ebookee.org/Java-Server-Pages-Hans-Bergsten-SPD-O-Reilly-UNITs-5-6-7-8-pdf-repost-mediafire-link_1227500.html

tables with css

<--Tables and Hyperlinks-->
<html>
<head>
<title>
Tables and Hyperlinks
</title>
</head>
<body>
<table border=0 bgcolor=chocolate align=center>
<tr bgcolor=yellow align=center valign=middle>
<th colspan=5 width=650>Arranging hyperlinks into cols and rows
</th>
</tr>
<tr height=75 align=center valign=middle>
<td> <a href="f:\pictures\ BUD6.JPG "> BUD6 </a> </td>
<td> <a href="f:\pictures\Q5.JPG">Q5</a> </td>
<td> <a href="f:\pictures\Q12.JPG">Q12</a> </td>
<td> <a href="f:\pictures\ Q19.JPG "> Q19</a></td>
<td><a href="f:\pictures\ Slippers & Lock.jpg ">Slippers & Lock
</a></td>
</tr>
<tr height=75 align=center valign=middle>
<td><a href="f:\pictures\ BUD7.JPG "> BUD7 </a></td>
<td><a href="f:\pictures\ Q6.JPG "> Q6 </a></td>
<td><a href="f:\pictures\ Q13.JPG "> Q13 </a></td>
<td><a href="f:\pictures\ Q20.JPG "> Q20 </a></td>
<td><a href="f:\pictures\ WALL11.JPG "> WALL11 </a></td>
</tr>
<tr height=75 align=center valign=middle>
<td><a href="f:\pictures\ OM6AQW.JPG "> OM6AQW </a></td>
<td><a href="f:\pictures\ Q7.JPG "> Q7 </a></td>
<td><a href="f:\pictures\ Q14.JPG "> Q14 </a></td>
<td><a href="f:\pictures\ Q21.JPG "> Q21 </a></td>
<td><a href="f:\pictures\ WALL12.JPG "> WALL12 </a></td>
</tr>
<tr height=75 align=center valign=middle>
<td><a href="f:\pictures\ OM8CCX.JPG "> OM8CCX </a></td>
<td><a href="f:\pictures\ Q8.JPG "> Q8 </a></td>
<td><a href="f:\pictures\ Q15.JPG "> Q15 </a></td>
<td><a href="f:\pictures\ Q22.JPG "> Q22 </a></td>
<td><a href="f:\pictures\ Rose.gif "> Rose </a></td>
</tr>
<tr height=75 align=center valign=middle>
<td><a href="f:\pictures\ OM12III.JPG "> OM12III </a></td>
<td><a href="f:\pictures\ Q9.JPG "> Q9 </a></td>
<td><a href="f:\pictures\ Q16.JPG "> Q16 </a></td>
<td><a href="f:\pictures\ Q23.JPG "> Q23 </a></td>
<td><a href="f:\pictures\ BUD2.JPG "> BUD2 </a></td>
</tr>
<tr height=75 align=center valign=middle>
<td><a href="f:\pictures\ OM34XEX.JPG "> OM34XEX </a></td>
<td><a href="f:\pictures\ Q10.JPG "> Q10 </a></td>
<td><a href="f:\pictures\ Q17.JPG "> Q17 </a></td>
<td><a href="f:\pictures\ Q24.JPG "> Q24 </a></td>
<td><a href="f:\pictures\ BUD4.JPG "> BUD4 </a></td>
</tr>
<tr height=75 align=center valign=middle>
<td><a href="f:\pictures\Q4.JPG">Q4</a></td>
<td><a href="f:\pictures\ Q11.JPG "> Q11 </a></td>
<td><a href="f:\pictures\ Q18.JPG "> Q18 </a></td>
<td><a href="f:\pictures\ R1.JPG "> R1 </a></td>
<td><a href="f:\pictures\ BUD5.JPG "> BUD5 </a></td>
</tr>
</table>
</body>
</html>

home

creating list menu

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>

</html>

home

lists with css: creating menus

<!DOCTYPE creating menu html>
<html>
<head>
<style>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>

</body>

</html>

home

Link styles: example program

•Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

•In addition, links can be styled differently depending on what state they are in.

•The four links states are:

•a:link - a normal, unvisited link

•a:visited - a link the user has visited

•a:hover - a link when the user mouses over it

•a:active - a link the moment it is clicked

a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>Mouse over the links to see them change layout.</p>

<p><b><a class="one" href="http://improvehtml.blogspot.in/" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="http://improvejava.blogspot.in/" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="http://rajpaintings.4t.com" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="www.facebook.com" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="www.google.co.in" target="_blank">This link changes text-decoration</a></b></p>
</body>

</html>

1. by default it looks red color a.one:link {color:#ff0000;(red)} is executed

2. if i place the mouse pointer on first link: it changes the color: a.one:visited {color:#0000ff;}is executed

3. if i place the cursor on 3rd link , it changes the font size, that is a.two:hover {font-size:150%;} is executed

home

Layers with example programs

With CSS, it is possible to work with layers: pieces of HTML that are placed on top of the regular page with pixel precision.

The advantages of this are obvious - but once again Netscape has very limited support of CSS layers - and to top it off: the limited support it offers is quite often executed with failures.

So the real challenge when working with layers is to make them work on Netscape browsers as well.

To create a layer all you need to do is assign the position attribute to your style. The position can be either absolute or relative.

The position itself is defined with the top and left properties.

Finally, which layer is on top is defined with the z-index attribute.

position:absolute
If you define the position to be absolute it will be calculated from the upper left corner of the page - unless the layer is defined inside another layer, in which case it will be calculated from the upper left corner of the parent layer.

position:relative
If you define the position to be relative it will be relative to the position of the tag that carries the style.
That is, if you add a relatively positioned layer in the middle of the page, then the position will be calculated from that exact spot in the middle of your page where it was added.

DEFINING THE POSITION

While the position property indicates the out spring of our coordinate system, the left and top properties defines the exact position of our layer.

You can enter both positive and negative values for these properties - thus it is possible to place content higher up and further to the left on the page than the logical position in the HTML code where the layer itself is defined.

In other words: at the bottom of your HTML code you can enter the code for a layer that is positioned at the top of the resulting page.

Both left and top properties can be dynamically changed
with JavaScript.

This means that it is possible to move things around on the screen even after the page has finished loading.

In fact this technique can be (and has been) used to create entire games. Other uses might be menus that pop out when a mouse-over is detected on a link. The possibilities are endless - but in order to keep things simple, we will not dig into details about these dynamic HTML effects here.

Where we use in real time:

Flying elements/banners on the page
Games where you move an object around
Menus that pop out when triggered
Menus that become visible when triggered

<html>
<body>
<div style="position:relative; font-size:50px; z-index:2;">Happy Sankranthi</div>
<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1">thank you</div>


<div style="position:relative; font-size:50px; z-index:3;">Happy Sankranthi</div>
<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:4">thank you</div>
</body>

</html>

home

span tag: example prog for span tag

The <span> element has no special meaning.

When used together with CSS, the <span> element can be used to set style attributes to parts of the text.

HTML Inline Elements

Inline elements are normally displayed without starting a new line.

Examples: <b>, <td>, <a>, <img>

Definition and Usage

The <span> tag is used to group inline-elements in a document.

The <span> tag provides no visual change by itself.

The <span> tag provides a way to add a hook to a part of a text or a part of a document.

<! you can find the diff b/w div and span tags">
<html>
<head>

<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<h2>SR Eng..</h2>
<div>cse</div>
<div>ece</div>
<div>mech</div>
<h2> SR Eng </h2>
<span>cse</span>
<span>ece</span>
<span>mech</span>

</body>
</html>

home

div example: example program for overlapping

<html>
<head>
<title>Overlapping images</title>
</head>
<body>
<h1 align=center>
Creating Overlapping Images with <DIV>
</h1>
<br>
<br>
<div style="position:absolute; left:100; top:60;">
<img src="foru.jpg" width=300 height= 300>
<div style="position:absolute; left:130; top:80;">
<img src="foru.jpg" width=300 height= 300>
<div style="position:absolute; left:160; top:100;">
<img src="foru.jpg" width=300 height= 300>
</body> </html>

home

Sunday 12 January 2014

external style sheets

steps
1. go to your folder
2. open any note pad
3. type the following
p
{
color:chocolate;
font-size:12pt;
font-weight:bold;
text-align:justify;
}
.question
{
color:brown;
font-style:italic;
}
.ans
{
text-transform: uppercase;
color: #093;
text-decoration: blink;

}
.big
{
font-size:14pt;
text-decoration:underline;
text-transform:uppercase;
color:red;
}

4. save with .css extension. ex: one.css

5. create another note with same folder

6. type the follwing html program and use <link> tag to give link to css file (one.css)

<html>
<head>
<title>External</title>
<link rel=stylesheet type="text/css" href="one.css">
</head>
<body>
<h1 class="big">S R ENGINEERING COLLEGE</h1>
<p class="question">ananthasagar </p>
<p class= "ans">Hasanparthy</p>
<p>warangal</p>
<p>Andhrapradesh</P>
</body>
</html>

home

external style sheets

4. save with .css extension. ex: one.css

5. create another note with same folder

6. type the follwing html program and use <link> tag to give link to css file (one.css)

internal style sheet

<html>
<head>
<title>Internal</title>

Inline style sheet

<html>
<body>
<h1 style="color:red;
font-size:50pt;
text-align:center;
font-style:italic;">
Heading </h1>
<hr style="color:blue;">
<p style="font-family:verdana;
color:blue;
margin-left:50pt;">this is paragraph</p>
</body>
</html>

home

class selector

<!DOCTYPE html>
<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>

<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>

selector Id

<!DOCTYPE html>
<! id tag: The id attribute should only be used in one tag on your HTML page,
so that whatever is in that one tag look different. Here's an example of what it looks like:-->
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>

<body>
<h1 id=id="para1">Welcome</h1>
<p id="para1">Hello World!</p>
<p id="para1">This paragraph is not affected by the style.</p>
</body>
</html>

home

css with background and heading

<html>
<head>
<style>
body {background-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
</head>

<body>

<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p>

</body>
</html>

home

css with header tags

div example 1

<!DOCTYPE html>
<html>
<body>

<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>

<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">

<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>

<h3>Look! Styles and colors</h3>

<div style="letter-spacing:12px;">Manipulate Text</div>

<div style="color:#40B3DF;">Colors
<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
</div>

<div style="color:#000000;">and more...</div>

</div>

</body>
</html>

Saturday 11 January 2014

progression bar

<!DOCTYPE html>

<html>
<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

<p><strong>Note:</strong> The output tag is not supported in Internet Explorer.</p>

</body>

</html>

field with border

<!DOCTYPE html>
<html>
<body>

<form action="#">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

</body>


</html>

fieldset submit button

<!DOCTYPE html>
<html>
<body>

<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>

</body>
</html>

personal information

<!DOCTYPE html>
<html>
<body>

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

</body>
</html>

home

email form

<!DOCTYPE html>
<html>
<body>

<h3>Send e-mail to someone@example.com:</h3>

<form action="MAILTO:myrajendra@gmail.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

</body>
</html>

home

forms: creatin button

<!DOCTYPE html>
<html>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

home

Form: registration

<! registered form-->
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<center>
<h1>Registration form</h1>
<form name="regform">
user Name
<input type="text" name="user" size="30">
</input>
<br>
PASSWPRD<input type="password" name="pwd" size=40 />
</br>
confirmPassword<input type="password" name="cpwd" size=30/>
<br/>
gender<input type="radio" name=sex/>male
<input type="radio" name=sex/>female <br/>
Qualification
<select>
<option>BE </option>
<option>Btech</option>
<option>MCA</option>
</select>
<br/>
courses <input type="checkbox"/>java
<input type="checkbox"/>html
<input type="checkbox"/>xml <br/>
comments <textarea rows=6 cols= 30>Enter your comments </textarea> <br/>
<input type="submit" value="register"/>
<input type="reset" value="clear"/>
</form>
</center>
</body>
</html>

home

FRAMES: noresize

<!DOCTYPE html>
<html>

<frameset cols="50%,*,25%">
<frame src="frame_a.htm" noresize="noresize">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>

</html>

mixed frame set

<!DOCTYPE html>
<html>

<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset>

</html>

horizontal frame 1

<!DOCTYPE html>
<html>
<head>
<title>horizontal fram</title>
</head>

<frameset rows="25%,*,25%">
<frame src="D:\webtechnologies\html\prog\image\image.html">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>

</html>

image map2

<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="foru.jpg" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="1.html">
<area shape="circle" coords="90,58,3" alt="Mercury" href="wwww.gmail.com">
<area shape="circle" coords="124,58,8" alt="Venus" href="www.facebook.com">
</map>

</body>

</html>

image map1

<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="D:\webtechnologies\html\prog\table\foru.jpg" width="145" height="126"
alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="D:\webtechnologies\html\prog\table\tabl1.html">
<area shape="circle" coords="90,58,3" alt="Mercury"
href="D:\webtechnologies\html\prog\table\TableCaption.html">
<area shape="circle" coords="124,58,8" alt="Venus" href="D:\webtechnologies\html\prog\Lists\orderedlist\list1.html">
</map>

</body>

</html>

home

img 2

<!DOCTYPE html>
<html>
<body>

<p>Create a link of an image:
<a href="http://improvejava.blogspot.in">
<img src="D:\webtechnologies\html\image\infysmartcard.JPG" alt="HTML tutorial" width="42" height="42"></a></p>

<p>No border around the image, but still a link:
<a href="D:\webtechnologies\html\image\infysmartcard.JPG">
<img style="border:0;" src="smiley.gif" alt="HTML tutorial" width="42" height="42"></a></p>

</body>
</html>

img tag 1

<!DOCTYPE html>
<html>
<body>

<p>
<img src="foru.jpg" alt="Smiley face" style="float:left" width="42" height="42"> A paragraph with an image. The image will float to the left of this text.
</p>

<p>
<img src="D:\webtechnologies\html\image\foru.jpg" alt="Smiley face" style="float:right" width="42" height="42"> A paragraph with an image. The image will float to the right of this text.
</p>

<p><b>Note:</b> Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.</p>

</body>
</html>

anchor tag ex2

<!DOCTYPE html>
<html>
<body>

<p>Create a link of an image:
<a href="anc.html">
<img src="D:\webtechnologies\html\prog\table\foru.jpg" alt="HTML tutorial" width="42" height="42">

</a></p>

<p>No border around the image, but still a link:</p>
<a href="anc.html">
<img style="border:0;" src="D:\webtechnologies\html\prog\table\foru.jpg" alt="HTML tutorial" width="42" height="42"></a></p>
<a href="anc.html">
<img src="D:\webtechnologies\html\prog\table\for.jpg" alt=image not found width="42" height="42">

</a></p>
</body>


</html>

time table

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="392" border="3">
<tr>
<th width="104" scope="col"> </th>
<th width="104" scope="col">1</th>
<th width="162" scope="col">2</th>
<th width="200" scope="col">3</th>
</tr>
<tr>
<th scope="row">mon</th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">tue</th>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">wed</th>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">thu</th>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">fri</th>
<td colspan="2"> </td>
</tr>
<tr>
<th scope="row">sat</th>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Table:student record

<html>
<head>
<title>Program on Tables</title>
</head>
<body>
<basefont color=chocolate size=5>
<table border=10 bordercolor=green cellspacing=8 cellpadding=5 bgcolor=pink
height=500 width=500 align=center>
<caption align=top><b><font size="+2" color=navy>Students Record
</b>
</caption>
<tr border=3 align=center valign=middle>
<th rowspan=2 bordercolor=red>Name</th>
<th colspan=3 bordercolor=red>Marks
</tr>
<tr valign=middle align=center>
<th bordercolor=cyan>M1
<th bordercolor=cyan>M2
<th bordercolor=cyan>M3
</tr>
<tr valign=middle align=center>
<td bordercolor=navy >Kamal
<td width=150 height=60 bordercolor=navy>58
<td width=100 bordercolor=navy>65
<td width=200 bordercolor=navy>87
</tr>
<tr valign=bottom align=center>
<td>Rama
<td>85
<td>56
<td>49
</tr>
<tr valign=middle align=left>
<td>Rajendra
<td>76
<td>59
<td>70
</tr>
<tr valign=top align=right nowrap>
<td>Shiva
<td>85
<td>56
<td>49
</tr>
</table>
</body>
</html>

table anchor

<html>
<head>
<title>
Tables and Hyperlinks
</title>
</head>
<body>
<table border=0 bgcolor=chocolate align=center>
<tr bgcolor=yellow align=center valign=middle>
<th colspan=5 width=650>Arranging hyperlinks into cols and rows
</th>
</tr>
<tr height=75 align=center valign=middle>
<td> <a href="D:\webtechnologies\html\prog\table\foru.JPG "> BUD6 </a> </td>
<td> <a href="D:\webtechnologies\html\prog\table\foru.JPG">Q5</a> </td>
<td> <a href="D:\webtechnologies\html\prog\table\foru.JPG">Q12</a> </td>
<td> <a href="D:\webtechnologies\html\prog\table\foru.JPG"> Q19</a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG">Slippers & Lock
</a></td>
</tr>
<tr height=75 align=center valign=middle>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> BUD7 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> Q6 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> Q13 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> Q20 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> WALL11 </a></td>
</tr>
<tr height=75 align=center valign=middle>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> OM6AQW </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> Q7 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> Q14 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> Q21 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> WALL12 </a></td>
</tr>
<tr height=75 align=center valign=middle>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> OM8CCX </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> Q8 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> Q15 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> Q22 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> Rose </a></td>
</tr>
<tr height=75 align=center valign=middle>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> OM12III </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG "> Q9 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG "> Q16 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG "> Q23 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG "> BUD2 </a></td>
</tr>
<tr height=75 align=center valign=middle>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> OM34XEX </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> Q10 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> Q17 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> Q24 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> BUD4 </a></td>
</tr>
<tr height=75 align=center valign=middle>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG">Q4</a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG "> Q11 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG "> Q18 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.JPG"> R1 </a></td>
<td><a href="D:\webtechnologies\html\prog\table\foru.jpg"> BUD5 </a></td>
</tr>
</table>
</body>
</html>

other blogs

Tuesday 14 January 2014

HTML Inline Elements

Definition and Usage

Sunday 12 January 2014

Saturday 11 January 2014