Scribd
Upload
33 views40 pages

Webtech Record 9 November 24

Uploaded by

ganeshan selvi30
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views40 pages

Webtech Record 9 November 24

Uploaded by

ganeshan selvi30
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

E0.

HTML experiment:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title></head>
<body>
<table border="1"bordercolor="red" bgcolor="yellow">
<tr><th>Name</th>
<th>Salary</th></tr>
<td>Jayapal </td><td>50,000.00</td>
</tr>
<tr><td>Ravi</td><td>45,000.00</td>
</tr>
</table>
</body>
</html>
Store it in a file and OPEN the file in a file-browser. You will see:

Name Salary
Jayapal 50,000.00
Ravi 45,000.00

<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</form>

Upload:
— The output of the above example will look something like this:

<form action="[Link]" method="post">


<label for="first-name">First Name:</label>
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
— The output of the above example will look something like this: When submt button is
clicked [Link] will be called on the server side.

Submit Reset
First Name:

<!DOCTYPE html> <html>


<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
HTML5 Audio
Embedding Audio in HTML Document Inserting audio onto a web page was not easy before,
because web browsers did not have a uniform standard for defining embedded media files like
audio.
Using the HTML5 audio Element
The newly introduced HTML5 element provides a standard way to embed audio in webpages.
However, the audio element is relatively new but it works in most of the modern web browsers. The
following example simply inserts an audio into the HTML5 document, using the browser default set
of controls, with one source defined by the src attribute.

<audio controls="controls">
<source src="media/birds.mp3" type="audio/mpeg">
<source src="media/[Link]" type="audio/ogg">
Your browser does not support the HTML5 Audio element.
</audio>

HTML5 Video
Embedding Video in HTML Document Inserting video onto a web page was not relatively easy,
because web browsers did not have auniform standard for defining embedded media files like video.

Using the HTML5 video Element


The newly introduced HTML5 element provides a standard way to embed video in webpages.
However, the video element is relatively new, but it works in most of the modern web browsers. The
following example simply inserts a video into the HTML document, using the browser defaultset of
controls, with one source defined by the src attribute.

<video controls="controls">
<source src="media/shuttle.mp4" type="video/mp4">
<source src="media/[Link]" type="video/ogg">
Example
Example
Example
Example
Your browser does not support the HTML5 Video element.
</video>
New HTML5 Elements
The most interesting new HTML5 elements are:
New semantic elements like <header>, <footer>, <article>, and
<section>. New attributes of form elements like number, date,
time, calendar, and range.

New graphic elements: <svg> and <canvas>.


New multimedia elements: <audio> and <video>.

What are Semantic Elements?


A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

New Semantic Elements in HTML5

Many web sites contain HTML code like:


<div id="nav"> <div class="header"> <div id="footer">to indicate navigation, header,
and footer.

HTML5 offers new semantic elements to define different parts of a web page:

n>

A home page could normally be split into sections for introduction, content, and contact
information.
Example
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is </p>
</section>
HTML5 <article> Element
The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to read it independently
from the rest of theweb site.
Examples of where an <article> element can be used:
Example
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,and build a future
in which humans live in harmony with nature.</p>
</article>

HTML5 <header> Element


The <header> element specifies a header for a document or section.
The <header> element should be used as a container for introductory content.
You can have several <header> elements in one [Link] following example defines a header
for an article:
Example
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's
natural environment,and build a future in which humans live in
harmony with nature.</p>
</article>

HTML5 <footer> Element


The <footer> element specifies a footer for a document or section.
A <footer> element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms of
use, contactinformation, etc.
You may have several <footer> elements in one document.
Example
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a
href="[Link]
someone@[Link]</a>.</p>
</footer>

HTML5 <figure> and <figcaption> Elements


The purpose of a figure caption is to add a visual explanation to an image.
In HTML5, an image and a caption can be grouped together in a <figure> element:
Example
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Semantic Elements in HTML5
Below is an alphabetical list of the new semantic elements in [Link] links go to our complete

HTML5 Reference.
Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations,diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

HTML5 Drag and Drop


Drag the W3Schools image into the rectangle.
Drag and Drop
Drag and drop is a very common feature. It is when you "grab" an object and drag it to
a different [Link] HTML5, drag and drop is part of the standard: Any element can
be draggable.
HTML Drag and Drop Example
The example below is a simple drag and drop example:
<!DOCTYPE HTML>
<html>
<head>
<script>
function
allowDrop(ev) {
[Link]();
}

function drag(ev) {
[Link]("text", [Link]);
}

function drop(ev)
{
[Link]();
var data = [Link]("text");
[Link]([Link](data));
}
</script>

</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336"
height="69">
</body>
</html>

Try running above code and see its effect. Make sure to put the relevant gif files in the same-path of
the html file

E1. Java-Script+html+DOM experiment:


Scripting in both head & body section: - we can create unlimited number of scripts inside
the same page. So we can locate multiple scripts in both head & body section of page.

<html>
<head>
<script type=―text / JavaScript‖>
Script code here
</script>
</head>
<body>
<script type=―text / JavaScript‖>
Script code here
</script>
</body>
</html>

Part-1:
<html>
<head>
<script language="JavaScript">
[Link]("hai my name is Kalpana")
</script>
</head>
<body text="red">
<script language="JavaScript">
[Link]("hai my name is Sunil Kumar Reddy")
</script></marquee>
</body>
</html>
There are 2 ways of executing script code

1) direct execute

2) to execute script code dynamically

Reacts to events: - JavaScript can be set to execute when something happens. When the page is
finished loading in browser window (or) when the user clicks on html element

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN">


<HTML>
<HEAD>
<script language="JavaScript">
function myf( )
{
[Link]("Hai Kalpana")
}
</script>
</HEAD>
<BODY>
to execute script code:
<input type="button" value="click me" onclick="myf( )">
To execute script code:
<input type="button" value="touch me" onmouseover="myf( )">
</BODY>
</HTML>

Creating external script: - some times you might want to run same
script on several pages without having to write the script on each
page. To simplify this, write external script & save .js extension. To
use external script specify .js file in src attribute of script tag. Note: -
external script can not contain script tag.
Save THE BELOW CONTET to a file named (or any name you like) : - [Link]
[Link]("this is external script code 1 "+"");
[Link]("this is external script code 2 "+"");
[Link]("this is external script code 3 "+"");
[Link]("this is external script code 4 ");

write the following in any html file and place it in the same location as the [Link]
file. And open the html file in the browser:

<HTML><BODY>
<script language="JavaScript">
[Link]("this is document code 1 "+"<br>");
[Link]("this is document code 2 "+"<br>");
</script>
<script src="[Link]">
</script>
</BODY>
</HTML>

You will see the following output!!!


E2. Java Script+CSS experiment:
The acronym CSS stands for Cascading Style Sheets which is used to augment the functionality,
[Link] efficient performance of site content. It allows for the creation of content-rich
websites that do not require much weight or codes; this translates into more interactive graphics
and animation, superior user- interface, and significantly more organization and rapid download
time.
It is used with HTML to create content structure, with CSS3 being used to format structured
content. It is responsible for font properties, colors, text alignments, graphics, background
images, tables and other components. This tool provides extra capabilities such as absolute,
fixed and relative positioning of various elements. The increasing popularity of CSS3 when
used by web design firms stimulates major browsers such as Google Chrome, Firefox, Safari,
and IE9 to adopt and embrace this programming language.

Advantages
Although CSS3 is not the only web development solution, it does allow provide greater
advantages for several reasons.

– A web page can be customized and alterations created in the Notice that NOT all
links of a document should be inside a <nav> element. The <nav> element is intended only for major
block of navigation links. design by simply changing a modular file.

– It decreases server bandwidth requirements, giving rapid


download timewhen a site is accessed with desktop or hand-held devices, providing an
improved user experience.
– It delivers consistent and accurate positioning of navigational elements on the
website.

– It makes the site more appealing with adding videos and graphics easier.

– It allows online videos to be viewed without the use of third-party plug-ins.

– It delivers the opportunity to improve brand visibility by designing effective


online pages.

– It is cost-effective, time-saving, and supported by most browsers. Since the


introduction of CSS3, there is greater control of the presentation of content and various elements on
a website; however it is not really responsible for overall design as it only specifies the structure and
content presentation of certain web pages.

An external stylesheet is a standalone .css file that is linked from a web page. The
advantage of external stylesheets is that it can be created once and the rules applied to
multiple web pages. Should you need to make widespread changes to your site design, you
can make a single change in the stylesheet and it will beapplied to all linked pages, saving
time and effort.
An internal stylesheet holds CSS rules for the page in the head section of the HTML file.
The rules only apply to that page, but you can configure CSS classes and IDs that can be
used to style multiple elements inthe page code. Again, a single change to the CSS rule will
apply to all tagged elements on the page.

Inline styles relate to a specific HTML tag, using a style attribute with a CSS rule to style
a specific pageelement. They’re useful for quick, permanent changes, but are less flexible
than external and internal stylesheets as each inline style you create must be separately
edited should you decide to make a design change.

Using external CSS stylesheets


An HTML page styled by an external CSS stylesheet must reference the .css file in the document
head. Once created, the CSS file must be uploaded to your server and linked in the HTML file with
code such as:
<link href="[Link]" rel="stylesheet" type="text/css">

Using inline styles


Inline styles are applied directly to an element in your HTML code. They use the style
attribute, followed byregular CSS properties.
For example:
<h1 style="color:red;margin-left:20px;">Today’s Update</h1>

Part-1:
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<h1 style="color:red;margin-left:20px;">This is INLINE STYSHEET based display!!!</h1>
</body>
</html>

Store it in a file and OPEN the file in a file-browser. You will see:
This is a heading
This is a paragraph.
This is INLINE STYSHEET based display!!!

Part-2:
<html><head>
<style>h1 {
color: blue;
font-family: verdana;
font-size: 300%; }
p{
color: red; font-size: 160%; border: 2px solid powderblue; padding: 30px; margin: 50px; }
</style>
</head>
<body>
<h1>This is aheading</h1>
<p>This is aparagraph.</p>
</body>
</html>

Part-3:

23-10-24
E3. JSP experiment:
Part-1:
1. Intall tomcat9
2. Go to c:\program files\apache software foundation\tomcat 9.0\webapp\ROOT\
3. Create a file “[Link]”. This is the client program
4. Add the following code into the“[Link]” file

<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body>
<form action="[Link]" method="post">
Number 1: <input type="text" name="num1"><br>
Number 2: <input type="text" name="num2"><br>
Operation:
<select name="operation">
<option value="add">Add</option>
<option value="subtract">Subtract</option>
<option value="multiply">Multiply</option>
<option value="divide">Divide</option>
</select><br>
<input type="submit" value="Calculate">
</form>
</body>
</html>

5. Create a file “[Link]”. This is the SERVER JSP program


6. Add the following code into the “[Link]” file

<%@ page language="java" contentType="text/html; charset=UTF-8"


pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<%
double num1 = [Link]([Link]("num1"));
double num2 = [Link]([Link]("num2"));
String operation = [Link]("operation");
double result = 0;

switch(operation) {
case "add":
result = num1 + num2;
break;
case "subtract":
result = num1 - num2;
break;
case "multiply":
result = num1 * num2;
break;
case "divide":
if(num2 != 0) {
result = num1 / num2;
} else {
[Link]("Division by zero is not allowed.");
return;
}
break;
}
%>
<h1>Result: <%= result %></h1>
<a href="[Link]">Go Back</a>
</body>
</html>

7. Go to the command prompt. Go to the tomcat 9.0 install folder . Go to the bin directory.
Type [Link] to start the tomcat 9.0 server. Ensure you see without error the server is
running as below:

8. Go to the browser. Type [Link] You should see the following screen
9. Go to the browser. Type [Link] You should see the
following screen

10. Type some numbers and click “calculate” button as shown below:
11. The output must read as follows
Part-2: passing parameters to the jsp files and
forwarding it to other jsp files
1. Go to c:\program files\apache software foundation\tomcat 9.0\webapp\ROOT\
2. Write the program [Link] in this place and put the code below
into it

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<form action="[Link]" method="get">
Enter your name: <input type="text" name="uname"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
3. write [Link] in the same folder (i.e. ROOT folder)
4. put the following code into the [Link]

<html>
<body>
<%
String name = [Link]("uname");
[Link]("Welcome " + name);
[Link]("user", name);
%>
<a href="/myapp/[Link]">Second JSP Page</a>
</body>
</html>

5. write [Link] in the same folder (i.e. ROOT folder)


6. put the following code into the [Link]

<html>
<body>
<%

String name =(String)[Link]("user");


[Link]("Hello "+name);

%>
<a href="/myapp/[Link]">Third JSP Page</a>

</body>
</html>

7. write [Link] in the same folder (i.e. ROOT folder)

8. put the following code into the [Link]

<html>
<body>

<%@ page import="[Link]" %>


Today is: <%= new Date() %>

</body>
</html>
9. Now run this JSP app in the browser as follows:
i. [Link]
ii. Now click the “Second JSP Page”

iii. Now click the “Third JSP Page”


Part-3:
*******************

E2. JAVA SERVLET experiment:


Part-1:
1. Go to c:\program files\apache software foundation\tomcat 9.0
2. Create a folder as “labex1”
3. Create a directory structure as follows:

4. Inside the LABEX1 folder -- create two files namely as follows:


[Link]
[Link]
The file structure shall look like this:

5. Put the following code inside [Link]

<html>
<head>
<title>Quick Servlet Demo</title>
</head>
<body>
<a href="/QuickServlet">Click here to send GET request</a>

<br/><br/>

<form action="QuickServlet" method="post">


Width: <input type="text" size="5" name="width"/>
&nbsp;&nbsp;
Height <input type="text" size="5" name="height"/>
&nbsp;&nbsp;
<input type="submit" value="Calculate" />
</form>
</body>
</html>

6. Put the following code inside [Link]

import [Link];
import [Link];

import [Link];
import [Link];
import [Link];
import [Link];

public class QuickServlet extends HttpServlet {

/**
* this life-cycle method is invoked when this servlet is first accessed
* by the client
*/
public void init(ServletConfig config) {
[Link]("Servlet is being initialized");
}

/**
* handles HTTP GET request
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException {

PrintWriter writer = [Link]();


[Link]("<html>Hello, I am a Java servlet!</html>");
[Link]();
}

/**
* handles HTTP POST request
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException {
String paramWidth = [Link]("width");
int width = [Link](paramWidth);

String paramHeight = [Link]("height");


int height = [Link](paramHeight);

long area = width * height;

PrintWriter writer = [Link]();


[Link]("<html>Area of the rectangle is: " + area + "</html>");
[Link]();

/**
* this life-cycle method is invoked when the application or the server
* is shutting down
*/
public void destroy() {
[Link]("Servlet is being destroyed");
}
}

7. Go to the folder as shown below.


Ensure you have installed java sdk version 21 or more in your windows machine and having
it in running condition from the CMD prompt . (can be checked by running the following
command : java –version)

8. If error comes, instead of previous screen message, install the appropriate JRE as shown
below):
Run and install the downloaded [Link] to install the JDK version.

9. Ensure the following JAVA_HOME , JAVA_LIB variable is set in the environment variable as
below.

10. Next edit the PATH environment variable as shown below and add JAVA bin folder in to the
path :
11. Compile the [Link] from within the CMD application as follows:

javac -cp "C:\Program Files\Apache Software Foundation\Tomcat 9.0\lib\[Link]" -d


WebContent\WEB-INF\classes [Link]

This will compile the java source code and put the class file in to the directory
WebContent\WEB-INF\classes which is seen as follows:
12. Now create the [Link] deployment descriptor as follows inside the indicated location
shown below:
Go to this directory :
C:\Program Files\Apache Software Foundation\Tomcat
9.0\webapp\labex1\webcontent\WEB-INF

Create [Link] here

13. Put the following content into the [Link] file :

<?xml version="1.0" encoding="UTF-8"?>


<web-app>

<display-name>Quick Servlet Demo Application</display-name>


<servlet>
<servlet-name>QuickServlet</servlet-name>
<servlet-class>QuickServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>QuickServlet</servlet-name>
<url-pattern>/QuickServlet</url-pattern>
</servlet-mapping>

</web-app>

14. NOW we are almost ready to run the web-application.

Go to this directory :
C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapp\labex1\webcontent\

NOW we need to create WAR file that zips the created content into : [Link]
This war file can be created by running the following program:

jar cfv [Link] *

15. NOW copy the created WAR file namely : [Link]

into folder location C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapp\


It will look like this:

If the servlet code is not having any error …the war will get deployed
automatically/dynamically and will create a folder with the same name as shown below:

Now you can NOT run the servlet …you must shutdown the
tomcat web-server and restart it.

Then only the webapp will run …otherwise it will give not
found error!!!!!

16. NOW start the tomcat server by running [Link] in cmd and invoke the web app
QuickServletApp as below,
Click on “calculate” button to see the output of the servlet program as follows:

E3. JAVA SERVLET experiment – java


session:
Part-2:
[Link] code:
<?xml version="1.0" encoding="UTF-8"?>
<web-app>

<display-name>counter Servlet Demo Application</display-name>


<servlet>
<servlet-name>CounterServlet</servlet-name>
<servlet-class>CounterServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>CounterServlet</servlet-name>
<url-pattern>/CounterServlet</url-pattern>
</servlet-mapping>

</web-app>

[Link] code
<html>
<head>
<title>Counter Servlet Demo</title>
</head>
<body>
<a href="/CounterServlet">Click here to send GET request</a>
<br/><br/>

<form action="CounterServlet" method="post">


<input type="submit" value="RunCounterServlet" />
</form>
</body>
</html>

[Link] code
import [Link];
import [Link];

import [Link].*;
import [Link].*;
import [Link];
import [Link];
import [Link];
import [Link];

public class CounterServlet extends HttpServlet


{
public void init(ServletConfig config){[Link]("Servlet is being initialized");}
/** handles HTTP GET request */
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException {

PrintWriter writer = [Link]();


//[Link]("<html>Hello, I am a Java servlet!</html>");

HttpSession session = [Link](true);


[Link]("text/html");
PrintWriter out = [Link]();
Integer count = [Link](0);

String head;
if ([Link]())
{
head = "This is the New Session";
} else
{
head = "This is the old Session";
Integer oldcount =(Integer)[Link]("count");
if (oldcount != null) {
count = [Link]([Link]() + 1);
}
}
[Link]("count", count);
[Link]("<HTML><BODY>" +
"<H2>" + head + "</H2>" +
"<TABLE>"
+ "<TR>"
+ "<TH>Information Type</TH>"
+ "<TH>Session Count</TH>"
+ "</TR>"
+ "<TR>"
+ "<TD>Total Session Accessesn</TD>"
+ "<TD>" + count + "</TD>"
+ "</TR>"
+ "</TABLE>"
+"</BODY></HTML>" );

[Link]();
}

public void doGet(HttpServletRequest request, HttpServletResponse response)


throws ServletException, IOException
{
HttpSession session = [Link](true);
[Link]("text/html");
PrintWriter out = [Link]();
Integer count = [Link](0);

String head;
if ([Link]())
{
head = "This is the New Session";
} else
{
head = "This is the old Session";
Integer oldcount =(Integer)[Link]("count");
if (oldcount != null) {
count = [Link]([Link]() + 1);
}
}
[Link]("count", count);
[Link]("<HTML><BODY>" +
"<H2>" + head + "</H2>" +
"<TABLE>"
+ "<TR>"
+ "<TH>Information Type</TH>"
+ "<TH>Session Count</TH>"
+ "</TR>"
+ "<TR>"
+ "<TD>Total Session Accessesn</TD>"
+ "<TD>" + count + "</TD>"
+ "</TR>"
+ "</TABLE>"
+"</BODY></HTML>" );
}
public void destroy() {
[Link]("Servlet is being destroyed");
}
}

Step-1: compile the prorgam

javac -cp "c:\Program Files\Apache Software Foundation\Tomcat 9.0\lib\[Link]" -d


WebContent\WEB-INF\classes [Link]

Step-2: create war file

jar cfv [Link] *

Step-3: Deploy the war file


Copy the [Link] generated into webapps directory of TOMCAT installation which looks as
follows:
It will automatically deploy the servlet application..

And the servlet can be invoked and run as follows:

Click on the BUTTON – RunServletCounter… you will get the following output….

After 3 repeated clicks on the button we get …..


So..pls follow the steps and do the experiments..

You might also like