Uit Rec

CS18511 – USER INTERFACE TECHNOLOGIES LABORATORY
Date: Image Mapping

Ex No:01
AIM:
To perform image mapping on India Map
DESCRIPTION OF TAGS USED:

● <img>: Embeds an image in the webpage, with specified width, height, and source.
● <map>: Defines an image map to associate clickable areas (hotspots) within an
image with actions.
● <area>: Specifies a clickable area within an image map, with shape, coordinates, and
associated action.
● <a>: Creates hyperlinks to navigate to different sections of the page or external
resources.
● <strong>: Indicates strong importance for text content, typically rendered as bold.
● <span>: Inline container used for styling and scripting purposes.
● <center>: Deprecated tag to center-align content, replaced by CSS.
● <div class="responsive">: Defines a container for creating a responsive image
gallery layout.
● <div class="gallery">: Contains individual images in the gallery with
associated descriptions.
● <div class="desc">: Displays descriptions for each image in the gallery.
● <div class="para">: Contains a paragraph of text with specific styling.
● <div class="parag">: Contains another paragraph of text with different styling.
<a class="split disabled">: Defines a hyperlink with a disabled appearance and split
alignment.
CODE:
<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-

1252">
<title> Image Mapping</title>
</head>
<body onmousemove="showCoords(event)">
<script language="javascript">
function showCoords(event)
REGNO:21272108010 PAGEN
{
let x = event.clientX;
let y = event.clientY;
let text = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = text;
}
</script>
<img src="indiamap.jpg" usemap="#indiamap" width="600" height="600">
<map name="indiamap">
<area shape="rect" coords="73,194,182,276" alt="rajasthan" href="rajasthan.html"
target="_blank">
</map>
<div>
<p id="demo">X coords: 309, Y coords: 597</p>

</div>
</body>
</html>
rajasthan.html
<!DOCTYPE html>
<html>
<head>
<title>RAJASTHAN</title>
<link rel="icon" type="image/x-icon" href="camelicon.ico">

<style>
body {
background-image:
url('pattern1.jpg'); background-
repeat: repeat;
background-attachment: fixed;
}
.topnav {
overflow: hidden;
background-color: rgba(0,0,0,0);
}
.topnav a.disabled
{
pointer-events: none;
opacity: 50;
}
.topnav a {
float: right;
color: black;
text-align: center;
display:block;
padding: 25px 16px;
text-decoration: none;
font-size: 25px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
text-transform:uppercase;
}
.topnav a.split {
float: left;
}
.para
{
text-align:center;
padding:20px;
background: rgba(0,0,0,0);
color:black;
font:30px sans-serif;
}
.parag
{
text-align:left;
padding:20px;
background: rgba(0,0,0,0);
color:#080232;
font:20px sans-serif;
}
div.gallery {
border: 1px solid rgb(151, 132, 132);;
div.gallery:hover {
border: 1px solid #000000;
}
div.gallery img {
width: 100%;
height: auto;
div.desc {
padding: 15px;
text-align: center;
font-weight: bolder;
font-size: 150%;
color:#080232;
text-shadow: #080232;
*{
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<center>
<div class="topnav">
<a href="#contact">Contact</a>
<a href="#About">About</a>
<a href="#Home">Home</a>
<a href="#about" class="split disabled"><img src="logo.jpg" height="70"

width="170"></a>
<div class="para">
<p> <strong style="font-size:30px;font-family: Verdana, Geneva, Tahoma, sans-

serif">RAJASTHAN</strong><br><br></div>
</div>
</center>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="bikaner.jpg">
<img src="bikaner.jpg" alt="bikaner" width="600" height="400">

</a>
<div class="desc">Bikaner</div>
</div>
</div>
<a target="_blank" href="mewar.jpg">

<img src="mewar.jpg" alt="Forest" width="600" height="800">
</a>
<div class="desc">Mewar</div>
</div>
</div>
<a target="_blank" href="gadisarlake.jpg">

<img src="gadisarlake.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Gadisar Lake</div>
</div>
</div>
<a target="_blank" href="camfest.jpg">

<img src="camfest.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Camel festival</div>
</div>
</div>
<div class="clearfix"></div>
<a target="_blank" href="udaipur.jpg">
<img src="udaipur.jpg" alt="udaipur" width="600" height="400">

</a>
<div class="desc">Udaipur</div>
</div>
</div>
<a target="_blank" href="desert.jpg">
<img src="desert.jpg" alt="Forest" width="600" height="800">

</a>
<div class="desc">Desert</div>
</div>
</div>
<a target="_blank" href="hawa.jpg">
<img src="hawa.jpg" alt="Northern Lights" width="600" height="400">

</a>
<div class="desc">Hawa Mahal</div>

</div>
</div>
<a target="_blank" href="ranakpur.jpg">
<img src="ranakpur.jpg" alt="Mountains" width="600" height="400">

</a>
<div class="desc">Ranakpur</div>
</div>
</div>
<div class="clearfix"></div>
<div class="parag">
<p> <strong style="font-size:20px;font-family: verdana ">The state of Rajasthan in
northwestern India includes part of the Thar desert, as well as Rathambore National Park
,home to wild tigers, and verdant Mount Abu and its elaborate temples. A camel safari
near the inhabited desert trading center of jaisalmer gives a hint of the area's beautiful
desolation. Udaipur's lakefront setting provides rich contrasts
.The caital, Jaipur, is a shopper's dream. Hire a car and driver to take in the spread-out
sights. Stay in a heritage hotel to feel like a Maharaja
</s></strong><br><br></div>
</body>
</html>
OUTPUT:
RESULT:
Thus, image mapping on India Map has been performed successfully
Date: COLLEGE WEBSITE USING

CSS Ex No:02
AIM:
To create a college website using inline internal and external CSS
DESCRIPTION OF TAGS USED:

● Inline CSS: Inline CSS refers to CSS styles that are applied directly within individual
HTML tags using the style attribute.
o style="padding-left: 325px; padding-top: 10px;": Applies inline styling to the
<section class="ig"> element, adding left and top padding.
● Internal CSS: Internal CSS is placed within the <style> tag in the <head> section
of the HTML document. It applies to multiple elements throughout the document.
o .crd: Defines a CSS class that sets padding for the <section
class="crd"> element, adjusting spacing around its content.
o .card: Defines a CSS class that adds a box shadow and transition effect
to create a card-like appearance for elements with the card class.
The :hover pseudo-class modifies the shadow on hover.
o .ig: Defines a CSS class that sets left padding and top padding for the
<section class="ig"> element.
o .cva: Defines a CSS class that sets a background color of bisque for
elements with the cva class.
CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sri Venkateswara College of Engineering</title>

<link rel="icon" type="image/x-icon" href="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcT4YdzXMHRqS1p-
cl9dELXbQN4P2inxd3XoyWS62us&s">
<link rel="stylesheet" type="text/css" href="svce.css">
<link rel="javascript" type="text/js" href="svce.js">
<style>
.crd{
padding-top: 10px;
padding-left: 15%;
padding-right: 17%;
padding-bottom: 20px;
}
.card {
box-shadow: 0 4px 8px 0 black;

transition: 0.3s;
}
.card:hover {
box-shadow: 0 8px 16px 0 blue;

}
.ig{
padding-left: 325px;
padding-top: 10px;
}
.cva{
background-color: bisque;
}
</style>
</head>
<body>
<header>
<div class="topnav">
<img src="https://www.svce.ac.in/wp-content/uploads/2021/12/svce-logo.png"
height="70px" width="350px">
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#placements">Placements</a>
<a href="#campuslife">Campus Life</a>
<a href="#academics">Academics</a>
<a href="#admission">Admission</a>
<a class="active" href="#home">Home</a>

</div>
</header>
<section class="cnva">
</section>
<section class="ig">
<img src="https://www.svce.ac.in/wp-content/uploads/2020/06/svce-2.jpg" width="700"

height="400">
</section>
<br>
<br>
<br>
<br>
<br>
<section class="crd">
<div class="card">
<img src="https://www.svce.ac.in/wp-content/uploads/2021/04/why-svce.png" alt="Why
SVCE" height="450px" width="750px">
</div>
</section>
<footer>
<div class="footer-content">
<p>© 2023 Sri Venkateswara College of Engineering. All rights reserved.</p>

<ul>
<li><a href="#">Privacy Policy</a></li>

<li><a href="#">Terms of Use</a></li>
<li><a href="#">Contact Us</a></li>

</ul>
</div>
</footer>
</body>
</html>
EXTERNAL CSS
.cnva
{
width: 1345px;
height: 25px;
padding-left: 7px;
background-color: dodgerblue;
animation-name: example;
animation-duration: 60s;
animation-delay: 5s;
transition: 0.3s;
animation-direction: alternate-reverse;
}
@keyframes example {
from {background-color:
dodgerblue;} to {background-color:
darkorange;}
}
.topnav
{
background-color: default;
overflow: hidden;
padding-left: 10px;
.topnav a
{
float: right;
color: darkorange;
text-align: center;
padding: 14px 16px;
font-size: 17px;
}
.topnav a:hover
{
background-color: steelblue;
color: black;
}
.topnav a.active {
background-color: default;
color: darkblue;
}
body, h1, h2, h3, p, ul, li {

margin: 0;
padding: 0;
}
footer {
background-color: lightslategrayi
; color: dodgerblue;
padding: 20px 0;
text-align: center;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction:
column; align-items:
center;
}
footer p {
margin-bottom: 10px;
footer ul {
list-style: none;
display: flex;
}
footer ul li {
margin: 0 15px;
}
footer ul li a {
color: darkorange;
}
footer ul li a:hover {
text-decoration: underline;
OUTPUT:
RESULT:
Thus, college website using inline, internal and external CSS has been created
successfully.
Date: DOM Parser

Ex No:03
AIM:
To parse and render information of XML
ALGORITHM:
XML Parsing using Java:
1. Import required packages: òrg.w3c.dom`, `javax.xml.parsers`, `java.io`, `java.util`.
2. Create a Java class named `parser`.

3. In the `main` method:
- Initialize `DocumentBuilderFactory` and `DocumentBuilder`.

- Parse the XML file to get the root element.
- Get user input using a `Scanner` for the employee ID.

- Get a list of all `<caption>` elements in the XML.
- Iterate through each `<caption>` element:
- If its ìd` matches the entered ID:

- Print caption ID, name, empid, and role using element tags and `getTextContent()`
method.
Java Code (XML Parsing):
1. Import required packages: òrg.w3c.dom`, `javax.xml.parsers`, `java.io`, `java.util`.
2. Create a Java class `parser`.

- Initialize `DocumentBuilderFactory` and `DocumentBuilder`.

- Parse XML, get root element.
- Get user input using `Scanner` for emp ID.

- Iterate through `<caption>` elements:
- If ìd` matches entered ID:

- Print caption ID, name, empid, role using element tags and `getTextContent()`.
CODE:
XML
<?xml version="1.0" encoding="UTF-8"?>

<empdetails>
<caption id="1">
<name></name>
<empid>123abc</empid>
<role>assistant</role>
</caption>
<caption id="2">
<name>ram</name>
<empid>456tyu</empid>
<role>designer</role>
</caption>
<caption id="3">
<name>prem</name>
<empid>298vbu</empid>
<role>manager</role>
</caption>
</empdetails>
parser.java
import java.io.*;
import org.w3c.dom.*;
import javax.xml.parsers.*;
import java.util.*;
public class parser
{
public static void main(String []args)throws Exception
{
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
Document document = builder.parse(new File("ex3.xml"));
Element root = document.getDocumentElement();
Scanner sc = new Scanner(System.in);
System.out.println("enter user id :");
String id=sc.nextLine();
NodeList nlist =
document.getElementsByTagName("caption");
System.out.println("\n root tag:"+root.getNodeName()+"\n");
for (int temp=0;temp<nlist.getLength();temp++)
{
Node node = nlist.item(temp);
if(node.getNodeType() == Node.ELEMENT_NODE)
{
Element ele = (Element)node;

if(ele.getAttribute("id").equals(id))
{
System.out.println("caption id : " + ele.getAttribute("id"));
System.out.println("name : " +
ele.getElementsByTagName("name").item(0).getTextContent());
System.out.println("empid : " +
ele.getElementsByTagName("empid").item(0).getTextContent());
System.out.println("role : " + ele.getElementsByTagName("role").item(0).getTextContent());
}
}
}
}
OUTPUT:
RESULT:
Thus, parsing and rendering of information form XML file has been executed successfully.
Date: TCP and UDP

Ex No:04
AIM:
To implement TCP and UDP for chat server and client
ALGORITHM:
UDP Server:
1. Import required packages: `java.io`, `java.net`.
2. Define a class named ÙDPServer`.

3. Declare class variables: `serversocket` (DatagramSocket), `dp` (DatagramPacket), `dis`
(BufferedReader), ìa` (InetAddress), `buf` (byte array), `cport` (client port), `sport`
(server port).
- Initialize `serversocket` with a new DatagramSocket using `sport`.

- Create a `dp` DatagramPacket for receiving data.
- Initialize `dis` as a BufferedReader reading from System.in.
- Get the local InetAddress ìa`.

- Print "Server is Running...".
- Run an infinite loop for communication:

- Receive data into the `dp` DatagramPacket.
- Convert received data to a String `str`.

- If `str` is equal to "STOP", break the loop.
- Print "Client: " followed by `str`.

- Read input from the user using `dis` into a String `str1`.
- Convert `str1` to bytes and store in `buf`.
- Send a DatagramPacket containing `buf` to client's InetAddress ìa` and client port
`cport`.
UDP Client:
1. Import required packages: `java.io`, `java.net`.

2. Define a class named ÙDPClient`.
3. Declare class variables: `clientsocket` (DatagramSocket), `dp` (DatagramPacket), `dis`

(BufferedReader), ìa` (InetAddress), `buf` (byte array), `cport` (client port), `sport`
(server port).
- Initialize `clientsocket` with a new DatagramSocket using `cport`.
- Create a `dp` DatagramPacket for receiving data.
- Initialize `dis` as a BufferedReader reading from System.in.

- Get the local InetAddress ìa`.
- Print "Client is Running... Type 'STOP' to Quit".

- Run an infinite loop for communication:
- Read input from the user using `dis` into a String `str`.
- Convert `str` to bytes and store in `buf`.
- If `str` is equal to "STOP":

- Print "Terminated...".
- Send a DatagramPacket containing `buf` to server's InetAddress ìa` and server port
`sport`.
- Break the loop.
- Send a DatagramPacket containing `buf` to server's InetAddress ìa` and server port
`sport`.
- Receive data into the `dp` DatagramPacket.
- Convert received data to a String `str2`.

- Print "Server: " followed by `str2`.
CODE:
UDPServer.java
import java.io.*;
import java.net.*;
class UDPServer
{
public static DatagramSocket serversocket;

public static DatagramPacket dp;
public static BufferedReader dis;
public static InetAddress ia;
public static byte buf[] = new byte[1024];
public static int cport = 7999,sport=7989;
public static void main(String[] a) throws IOException
{
serversocket = new DatagramSocket(sport);
dp = new DatagramPacket(buf,buf.length);
dis = new BufferedReader
(new InputStreamReader(System.in));
ia = InetAddress.getLocalHost();
System.out.println("Server is Running...");
while(true)
{
serversocket.receive(dp);
String str = new String(dp.getData(), 0,
dp.getLength());
if(str.equals("STOP"))
{
System.out.println("Terminated...");
break;
}
System.out.println("Client: " + str);
String str1 = new String(dis.readLine());
buf = str1.getBytes();
serversocket.send(new DatagramPacket(buf,str1.length(), ia, cport));

}
}
}
UDPClient
import java.io.*;
import java.net.*;
class UDPClient
{
public static DatagramSocket clientsocket;

public static DatagramPacket dp;
public static BufferedReader dis;
public static InetAddress ia;
public static byte buf[] = new byte[1024];
public static int cport = 7999, sport = 7989;
public static void main(String[] a) throws IOException
{
clientsocket = new DatagramSocket(cport);

dp = new DatagramPacket(buf, buf.length);
dis = new BufferedReader(new InputStreamReader(System.in));
ia = InetAddress.getLocalHost();
System.out.println("Client is Running... Type 'STOP'to Quit");
while(true)
{
String str = new String(dis.readLine());
buf = str.getBytes();
if(str.equals("STOP"))
{
System.out.println("Terminated...");
clientsocket.send(new
DatagramPacket(buf,str.length(), ia,sport));
break;
}
clientsocket.send(new DatagramPacket(buf,str.length(), ia, sport));

clientsocket.receive(dp);
String str2 = new String(dp.getData(), 0,dp.getLength());
System.out.println("Server: " + str2);
}
}
}
OUTPUT:
UDP
ALGORITHM:
Server-Side
1. Import required package: `java.net`, `java.util.Scanner`.

2. Define a class named `ServerChat`.

- Create a `ServerSocket` instance on port 8087.
- Accept an incoming client connection and get a `Socket` instance.

- Create `DataInputStream` to receive data from the client.
- Create `DataOutputStream` to send data to the client.

- Create a `Scanner` instance for user input.
- Initialize a `String` variable `msg`.

- Enter an infinite loop for chat:
- Receive a UTF-encoded message from the client using ìnputFromClient`.
- Print the received message from the client.

- Print "(From Server) Input message to client:"
- Read input from the user using `Scanner` into the `msg`.
- Send the input message to the client using òutputToClient`.
Client-Side Chat
1. Import required package: `java.io`, `java.net`, `java.util.Scanner`.

2. Define a class named `ClientChat`.

- Create a `Socket` instance, connecting to "localhost" on port 8087.
- Create `DataInputStream` to receive data from the server.
- Create `DataOutputStream` to send data to the server.

- Create a `Scanner` instance for user input.
- Initialize a `String` variable `msg`.

- Enter an infinite loop for chat:
- Print "(From Client) Input message to server:"
- Read input from the user using `Scanner` into the `msg`.
- Send the input message to the server using `toServer`.
- Receive a UTF-encoded message from the server using `fromServer`.

- Print the received message from the server.
CODE:
ServerChat.java
import java.io.*;
import java.net.*;
import java.util.Scanner;
public class ServerChat {
public static void main(String[] args) throws IOException {
ServerSocket serverSocket = new ServerSocket(8087);
Socket socket = serverSocket.accept();
DataInputStream inputFromClient = new
DataInputStream(socket.getInputStream());
DataOutputStream outputToClient = new
DataOutputStream(socket.getOutputStream());
String msg;
while (true) {
msg = inputFromClient.readUTF();
System.out.println("Client says:" + msg);
System.out.println("(From Server) Input message to
client:"); msg = sc.nextLine();
outputToClient.writeUTF(msg);
}
}
ClientChat.java
import java.io.*;
import java.net.Socket;
import java.util.Scanner;
public class ClientChat {
public static void main(String[] args) throws IOException {
Socket socket = new Socket("localhost", 8087);
DataInputStream fromServer = new DataInputStream(socket.getInputStream());
DataOutputStream toServer = new
DataOutputStream(socket.getOutputStream());
String msg;
while (true) {
System.out.println("(From Client)Input message to server:");
msg = sc.nextLine();
toServer.writeUTF(msg);
msg = fromServer.readUTF();
System.out.println("Server:" + msg);
}
}
}
OUTPUT:
RESULT:
Thus UDP and TCP chat client server has been executed successfully

Uit Rec

Uploaded by

Copyright:

Available Formats

You might also like

Uit Rec

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Uit Rec

Uploaded by

Copyright:

Available Formats

CS18511 – USER INTERFACE TECHNOLOGIES LABORATORY

Date: Image Mapping

DESCRIPTION OF TAGS USED:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-

<p id="demo">X coords: 309, Y coords: 597</p>

<link rel="icon" type="image/x-icon" href="camelicon.ico">

@media only screen and (max-width: 700px) {

@media only screen and (max-width: 500px) {

<a href="#about" class="split disabled"><img src="logo.jpg" height="70"

<p> <strong style="font-size:30px;font-family: Verdana, Geneva, Tahoma, sans-

<img src="bikaner.jpg" alt="bikaner" width="600" height="400">

<a target="_blank" href="mewar.jpg">

<a target="_blank" href="gadisarlake.jpg">

<a target="_blank" href="camfest.jpg">

<img src="udaipur.jpg" alt="udaipur" width="600" height="400">

<img src="desert.jpg" alt="Forest" width="600" height="800">

<img src="hawa.jpg" alt="Northern Lights" width="600" height="400">

<div class="desc">Hawa Mahal</div>

<img src="ranakpur.jpg" alt="Mountains" width="600" height="400">

Date: COLLEGE WEBSITE USING

DESCRIPTION OF TAGS USED:

<title>Sri Venkateswara College of Engineering</title>

box-shadow: 0 4px 8px 0 black;

box-shadow: 0 8px 16px 0 blue;

<a class="active" href="#home">Home</a>

<img src="https://www.svce.ac.in/wp-content/uploads/2020/06/svce-2.jpg" width="700"

<p>&copy; 2023 Sri Venkateswara College of Engineering. All rights reserved.</p>

<li><a href="#">Privacy Policy</a></li>

<li><a href="#">Contact Us</a></li>

body, h1, h2, h3, p, ul, li {

Date: DOM Parser

2. Create a Java class named `parser`.

- Initialize `DocumentBuilderFactory` and `DocumentBuilder`.

- Get user input using a `Scanner` for the employee ID.

- If its `id` matches the entered ID:

2. Create a Java class `parser`.

- Initialize `DocumentBuilderFactory` and `DocumentBuilder`.

- Get user input using `Scanner` for emp ID.

- If `id` matches entered ID:

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

public class parser

Element ele = (Element)node;

Date: TCP and UDP

2. Define a class named `UDPServer`.

- Initialize `serversocket` with a new DatagramSocket using `sport`.

- Get the local InetAddress `ia`.

- Run an infinite loop for communication:

- Convert received data to a String `str`.

- Print "Client: " followed by `str`.

1. Import required packages: `java.io`, `java.net`.

3. Declare class variables: `clientsocket` (DatagramSocket), `dp` (DatagramPacket), `dis`

- Initialize `dis` as a BufferedReader reading from System.in.

- Print "Client is Running... Type 'STOP' to Quit".

- If `str` is equal to "STOP":

- Convert received data to a String `str2`.

public static DatagramSocket serversocket;

serversocket.send(new DatagramPacket(buf,str1.length(), ia, cport));

<p>© 2023 Sri Venkateswara College of Engineering. All rights reserved.</p>