Tuesday 14 January 2014

syllabus

HTML Common tags-
1.     Example program
5.     Attributes
6.     Horizontal
7.     Lists
Ordered Lists
Example2
Unordered List
Definition List
8.     Tables
9.     Anchor tag
10.                        Image Tag
11.                        Frames
12.                         Forms

Cascading Style Sheets (CSS)
Division tags
Style links

SELECTORS:css ID AND CLASS

Types of style sheets

Division tag
Span tag

Layers

Link styles:

Css with Lists
Tables

Introduction to  Java Scripts, Objects in Java Script, Dynamic HTML with Java Script.

UNIT - II:
XML: Document type definition, XML Schemas, Document Object model,  Presenting XML, Using XML Processors:  DOM and SAX.
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 2nd 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:


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>

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>

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>

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

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




<!--LAYER 1 ON TOP:-->
<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>

<!--LAYER 2 ON TOP:-->
<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>




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>