Scribd
Upload
29 views

User Interface Technology Laborator: Description

The document describes implementing image mapping to locate clickable areas on an image map. It defines the image map using HTML <map> and <area> tags, and assigns coordinates and links to different areas. Sample code is provided to create an India map with clickable states leading to simple pages describing each state. Different styles are applied using inline, internal and external CSS.

Uploaded by

Priyanga Bakya
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
29 views

User Interface Technology Laborator: Description

The document describes implementing image mapping to locate clickable areas on an image map. It defines the image map using HTML <map> and <area> tags, and assigns coordinates and links to different areas. Sample code is provided to create an India map with clickable states leading to simple pages describing each state. Different styles are applied using inline, internal and external CSS.

Uploaded by

Priyanga Bakya
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
You are on page 1/ 15

CS18511--- USER INTERFACE TECHNOLOGY LABORATORy

DATE: / /2023

EXERSICE NO:01
IMAGE MAPPING
AIM:
TO IMPLEMENT THE IMAGE MAPPING TO LOCATE THE AREA BY CLICKING.
DESCRIPTION:

• Use the HTML <map> element to define an image map


• Use the HTML <area> element to define the clickable areas in the image map
• Use the HTML usemap attribute of the <img> element to point to an image map

Attributes of area:

• Shape:This can be used to create any shape.


• Cords:to locate the coordinates.

CODE:

<html>
<head>
<TITLE>india-map</title>
<style>
body{
background:cyan;
padding-left:350px;
}
nav{
color:black;
text-shadow:2px 2px 4px yellow;
}
</style>
</head>
<body>
<nav>
<h1>CLICK THE AREA TO KNOW THE LOCATION-></H1>
<img src="map.jpg" alt="Workplace" usemap="#indiamap">
<map name="indiamap">
<area shape="rect" coords="154,494,187,471" alt="Computer" href="tn.html">
<area shape="rect" coords="159,418,193,427" alt="Phone" href="andhra.html">
<area shape="rect" coords="54,199,124,205" alt="Coffee" href="rajasthan.html">
<area shape="rect" coords="103,340,155,336" alt="Coffee" href="maharashthra.html">
</map>
</nav>
</body>
</html>

tn.html:
<html>
REGISTER NO:2127210801081 PAGE NO: 1
CS18511--- USER INTERFACE TECHNOLOGY LABORATORy
DATE: / /2023

<head>
<title>tn</title>
<style>
pre{
color:black;
text-shadow:2px 2px 4px grey;
padding-left:350px;
font-style:bold;
}
b{
color:red;
}
</style>
</head>
<body>
<pre>
<b>Tamil Nadu: </b>A Cultural and Natural Wonder
Tamil Nadu is a state in southern India with a rich and
ancient culture that dates back to the Sangam era
(3rd century BCE to 4th century CE).
</pre>
</body>
</html>

maharashtra.html:
<html>
<head>
<title>mahasrashtra</title>
<style>
pre
{color:blue;
text-shadow:2px 2px 4px white;
padding-left:350px;
font-style:bold;
}
b
{
color:white;
}
</style>
</head>
<body>
<pre>

REGISTER NO:2127210801081 PAGE NO: 2


CS18511--- USER INTERFACE TECHNOLOGY LABORATORy
DATE: / /2023

<b> MAHARASHTRA:</b>Maharashtra is the richest state of India.


If GDP is considered as benchmark of economy,
then Maharashtra ranks on first place among all Indian states.
</pre>
</body>
</html>
OUTPUT:

RESULT:
THUS THE PROGRAM TO LOCATE THE AREAS USING IMAGE MAP HAS BEEN
IMPLEMENTED.

REGISTER NO:2127210801081 PAGE NO: 3


CS18511--- USER INTERFACE TECHNOLOGY LABORATORy
DATE: / /2023

EXERSICE NO:02
CREATE THE COLLEGE WEBSITE USING DIFFERENT STYLES IN CSS
AIM:
TO CREATE THE COLLEGE WEBSITE USING DIFFERENT STYLES IN CSS

DESCRIPTION:

• Inline - by using the style attribute inside HTML elements


• <p style="color:red;">A red paragraph.</p>
• Internal - by using a <style> element in the <head> section
• <style> p {color: red;} </style>
• External - by using a <link> element to link to an external CSS file
• <link rel="stylesheet" href="styles.css">
CODE:

<html>
<head>
<title>svce webpage</title>
<style>
body
{
background-image:url('OIP.jpg');
background-repeat:no-repeat;
background-size:100% 100%;
}
h1
{
border:6px solid lightblue;
border-radius:15px;
font-size:26px;
padding-bottom:4px;
}
nav
{
word-spacing:33px;
letter-spacing:5px;
border:2px solid lightblue;
height:25px;
padding:4px;
background-color:grey;

a:link
{
color:white;
}
a:hover
{
REGISTER NO:2127210801081 PAGE NO: 4
CS18511--- USER INTERFACE TECHNOLOGY LABORATORy
DATE: / /2023

border:2px solid white ;


border-radius:15px;
background-color:black;
color:red;

a:active
{
color:yellow;
}
#dem
{
color:blue;
text-shadow:2px 2px 4px white ;
}
footer
{
border:1px solid lavender;
background:lavender;
}
div {
border-radius:15px;
width:50%;
height:50%;
position: center;
background:black;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count:infinite;
}

@keyframes example {

20% {background-image:url('logo1.jpg');background-repeat:no-repeat;width:80%;}
40% {background-image:url('logo2.jpg');background-repeat:no-repeat;width:100%;}
60% {background-image:url('logo3.jpg');background-repeat:no-repeat;width:100%;}
80% {background-image:url('logo4.jpg');background-repeat:no-repeat;width:100%;}
100% {background-image:url('logo5.jpg');background-repeat:no-repeat;width:100%;}
}
<link rel=”stylesheet” href=”ex-style.css”>
</style>
</head>
<body>
<h1>
<img src="logo.jpg" alt="Girl in a jacket" width="45" height="45"><big>SVCE-</big>SRI VENKATESWARA COLLEGE OF
ENGINEERING,PENNALUR-CHENNAI.</h1>
<nav>
<a href="home.html">HOME</a>
<a href="curriculam.html">CURRICULAM</a>
<a href="admission.html">ADMISSION</a>
<a href="regulation.html">REGULATIONS</a>
<a href="contact.html">CONTACT-US</a>
<a href="alumni.html">ALUMNI</a>

REGISTER NO:2127210801081 PAGE NO: 5


CS18511--- USER INTERFACE TECHNOLOGY LABORATORy
DATE: / /2023

<a href="login.html">LOGIN<img src="person.jpg" alt="Girl in a jacket" width="20" height="20"></a>


</nav>
<br>
<div >
<PRE style=” direction:rtl; font-size:20px;padding:55px;”>
TO BE A PREMIER INSTITUTE FOR <q>
ADDRESSING THE CHALLENGES IN
</q> .GLOBAL PRESPECTIVE
</PRE>
</div>
<br>
<footer>
<pre id="hel">
Contact Us
CAMPUS ADDRESS TRUST OFFICE ADDRESS:
Sri Venkateswara College of Engineering Sri Venkateswara Educational and Health Trust
Post Bag No.1 Address: 1/3A River View Road,
Pennalur Village Sector 3, Kotturpuram,
Chennai - Bengaluru Highways Chennai, Tamil Nadu 600085
Sriperumbudur (off Chennai) Tk. - 602 117 [email protected]
Tamil Nadu, India [email protected] /+91-44-27152000
<br>
<nav id="demo"><img src="fb.png" alt="Girl in a jacket" width="35" height="35"> <img src="in.png" alt="Girl in a jacket"
width="35" height="35"> <img src="tw.png" alt="Girl in a jacket" width="35" height="35"></nav>
</pre>
</footer>
</body>
</html>

Ex-style.css:
<html>
<head>
<style>
#hel
{
color:black;
text-style:bold;
}
</style>
</head>
</html>

Login.html:
<html>
<head>
<style>
h1 {
text-align:center;
text-shadow:cyan;
}

REGISTER NO:2127210801081 PAGE NO: 6


CS18511--- USER INTERFACE TECHNOLOGY LABORATORy
DATE: / /2023

body {
background:url('OIP.JPG');
background-repeat:no-repeat;
}
div
{
border:3px solid black;
padding-top:30px;
background:url('OIF.jpg');
position:right;
width:30%;
height:60%;
border-radius:30px;
color:blue;
}
input
{
text-color:black;
border:2px solid black;
}
nav
{
background:lavender;
}
nav:hover
{
background:lightblue;
}
a:link
{
color:brown;
}
</style>
</head>
<body>
<center>
<div >
<center>
<form>
<h1 style="color:blue;font-size:15px;">USER LOGIN</H2>
<input type="text" id="name" placeholder="Your id"><br><br>
<input type="password" id="password" placeholder=" Enter password">
<input type="password" id="password" placeholder=" Conform password">
<nav>
<button type="button" id="button">cancel</button>
<button type="button" id="button">submit</button>
REGISTER NO:2127210801081 PAGE NO: 7
CS18511--- USER INTERFACE TECHNOLOGY LABORATORy
DATE: / /2023

</nav><center>
<a href="password">change password</a></center>
</form>
</center>
</div>
</center>
</table>
</body>
</html>

REGISTER NO:2127210801081 PAGE NO: 8


CS18511--- USER INTERFACE TECHNOLOGY LABORATORy
DATE: / /2023

OUTPUT:

RESULT:
THUS TO CREATE THE COLLEGE WEBSITE USING DIFFERENT STYLES IN CSS ARE
IMPLEMENTED.

REGISTER NO:2127210801081 PAGE NO: 9


CS18511--- USER INTERFACE TECHNOLOGY LABORATORy
DATE: / /2023

EXERSICE NO:02
DOM PARSER

AIM:
To extract and display student details from an XML file using DOM parsing in Java

ALGORITHM:
Step 1- Import required classes for the file handling XML, parsing, and user input.
Step 2- Define the parser class with the main method.
Step 3- Create a DocumentBuilderFactory and a DocumentBuilder for XML parsing.
Step 4- Parse the XML file and get a root element
Step 5- print the result and display it in columns and rows.
Step 6 – stop.

CODE:
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("trials.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("captain");
System.out.println("\n The 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))
{
REGISTER NO:2127210801081 PAGE NO: 10
CS18511--- USER INTERFACE TECHNOLOGY LABORATORy
DATE: / /2023

System.out.println("Captain ID:" +ele.getAttribute("id"));


System.out.println("Name:"+ ele.getElemetsByTagName("name").item(0).getTextContent());
System.out.println("Totem:"+ ele.getElemetsByTagName("totem").item(0).getTextContent());
System.out.println("Location:"+ ele.getElemetsByTagName("location").item(0).getTextContent());
}
}
}
}
}

XML CODE:

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


<trials>
<captain id="1">
<name>kaavya</name>
<year>3rd</year>
<dept>IT</dept>
<age>19</age>
</captain>

<captain id="2">
<name>kaavya</name>
<year>3rd</year>
<dept>IT</dept>
<age>19</age>
</captain>
</trials>

OUTPUT:

RESULT:
Thus to extract and display student details from an XML file using DOM parsing in Java is
implemented.
EXERSICE NO:02
REGISTER NO:2127210801081 PAGE NO: 11
CS18511--- USER INTERFACE TECHNOLOGY LABORATORy
DATE: / /2023

EXERSICE NO :04
HTTP PROTOCOL

AIM:
TO IMPLEMENT TO RETRIVE THE CONENT OF THE HTML FILE USING HTTP

ALGORITHM:

1. import suitable packets


2. Create a URL object with the desired URL.
3. Open an HttpURLConnection object using the URL object.
4. Set the request method to "GET" using the setRequestMethod() method of the
HttpURLConnection object.
5. Get the input stream of the HttpURLConnection object using the getInputStream() method.
6. Create a BufferedReader object using an InputStreamReader object and the input stream from the
HttpURLConnection object.
7. Read the response from the BufferedReader object line by line using the readLine() method.
8. Print each line of the response to the console.
9. Close the BufferedReader object and the HttpURLConnection object.

CODE:

HTTP.JAVA:
import java.io.*;
import java.net.*;
public class http {
public static void main(String[] args)throws Exception
{
URL url=new URL("http://localhost:8080/tcp_udp");
HttpURLConnection con = (HttpURLConnection)url.openConnection();
con.setRequestMethod("GET");
BufferedReader in = new BufferedReader(new InputStreamReader(con.getInputStream()));
String inputLine;
while((inputLine = in.readLine())!=null){
System.out.println(inputLine);
}
in.close();
}
}

REGISTER NO:2127210801081 PAGE NO: 12


CS18511--- USER INTERFACE TECHNOLOGY LABORATORy
DATE: / /2023

FILE IN HTML:

OUTPUT:

RESULT:
THUS IMPLEMENTED THE PROGRAM USING HTTP TO RETRIVE CONTENT OF HTML FILE

REGISTER NO:2127210801081 PAGE NO: 13


CS18511--- USER INTERFACE TECHNOLOGY LABORATORy
DATE: / /2023

EXERSICE NO:05
FILE TRANSFER PROTOCOL(FTP)

AIM:
TO IMPLEMENT THE PROGRAM OF CLIENT AND SERVER USING FTP.

ALGORITHM:
1. Create a ServerSocket object with the desired port number.
2. Call the accept() method of the ServerSocket object to wait for a client to connect. This method
blocks until a client connects.
3. Get the input stream of the client socket using the getInputStream() method of the Socket object.
4. Create a BufferedReader object using an InputStreamReader object and the input stream from
the client socket.
5. Read the name of the file from the BufferedReader object using the readLine() method.
6. Create a PrintWriter object using the output stream from the client socket.
7. Open the file with the given name using a FileInputStream object.
8. Read the contents of the file byte by byte using the read() method of the FileInputStream object.
9. Write each byte to the PrintWriter object using the write() method.
10. Flush the PrintWriter object to ensure that all bytes are sent to the client.
11. Close the FileInputStream object, the PrintWriter object, and the client socket.
CODE:

FTPSERVER JAVA:
import java.io.*;
import java.net.*;

public class FTPServer {


public static void main(String args[]) {
try {
ServerSocket server = new ServerSocket(5628);
Socket client = server.accept(); // Declare and initialize the 'client' socket
InputStreamReader stream = new InputStreamReader(client.getInputStream());
BufferedReader reader = new BufferedReader(stream);
String filename = reader.readLine();
PrintWriter writer = new PrintWriter(client.getOutputStream());
FileInputStream fileStream = new FileInputStream(new File(filename));
int ch;
while ((ch = fileStream.read()) != -1) {
writer.write(ch);
writer.flush();
}
writer.close();
server.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
REGISTER NO:2127210801081 PAGE NO: 14
CS18511--- USER INTERFACE TECHNOLOGY LABORATORy
DATE: / /2023

import java.io.*;
import java.net.*;

public class FTPClient {


public static void main(String args[]) {
try {
Socket client = new Socket("127.0.0.1", 5628);
PrintWriter writer = new PrintWriter(client.getOutputStream());
writer.println("sample.html");
writer.flush();

InputStreamReader stream = new InputStreamReader(client.getInputStream());


BufferedReader reader = new BufferedReader(stream);
String str;
while ((str = reader.readLine()) != null) {
System.out.println(str);
}
reader.close();
client.close();
} catch (Exception e) {
System.out.println("Connection is terminated");
}
}
}

OUTPUT:

RESULT:
THUS IMPLEMENTED THE PROGRAM OF CLIENT AND SERVER USING FTP.

REGISTER NO:2127210801081 PAGE NO: 15

You might also like