Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

PRACTICAL

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 30

PRACTICAL-01

Aim:-Write a HTML code to illustrate the following-


A) Ordered list
B) Unordered list
C) Description list
Code:-
A) Ordered list
<html>
<head>
<title>World Cup Teams</title>
</head>
<body>
<h1>List of teams for World Cup</h1>
<ol type = "1">
<li>India</li>
<li>South Africa</li>
<li>Australia</li>
<li>Pakistan</li>
<li>New Zealand</li>
<li>Srilanka</li>
<li>West Indies</li>
<li>Bangladesh</li>
<li>Afganistan</li>
</ol>
</body>
</html>
OUTPUT: --

B) Unordered list
<!DOCTYPE html>
<html>
<body>

<h1>A list in a list in a list</h1>


<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Green tea</li>
<li>Black tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>

</body>
</html>

OUTPUT: --

C)Description list
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>JavaScript</dt>
<dd>is a scripting language</dd>
<dt>SQL</dt>
<dd>is a query language</dd>
</dl>
</body>
</html>

OUTPUT: --
PRACTICAL-02
Aim:-Write a program to demonstrate the use of Inline CSS, Internal CSS and
External CSS.
Code:-
Inline CSS-
<html>
<body>
<h2 style="color: green;
background: yellow">
VBSPU
</h2>
<p style="color: black">
Happy Preparation!!.
</p>
</body>
</html>

OUTPUT: --
Internal CSS-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: Red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>Veer Bahadur Singh Purvanchal University</h1>
<p>University in Jaunpur.</p>
</body>
</html>

OUTPUT: --
External CSS-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://images.pexels.com/photos/1954524/pexels-photo-
1954524.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
</head>
<body>
<div class="main">
<h1 class="GFG">
VBSPU
</h1>
<p id="geeks">
A computer science portal
</p>
</div>
</body>
</html>

OUTPUT: --
PRACTICAL: -03
Aim: -Create a HTML form document form using table tag.
Code: -
<!DOCTYPE html>
<html>
<head></head>
<body bgcolor="gold" font-color="red">

<table border='0' width='480px' cellpadding='0' cellspacing='0' align='center'>


<center><tr>
<td><h1>Registration Form For Sports</h1></td>
</tr><center>

<table border='0' width='480px' cellpadding='0' cellspacing='0' align='center'>


<tr>
<td align='center'>Name:</td>
<td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
<td align='center'>Sur Name:</td>
<td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
<td align='center'>Date Of Birth:</td>
<td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
<td align='center'>Address:</td>
<td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
<td align='center'>Phone:</td>
<td><input type='text' name='name'></td>
</tr>

<tr> <td>&nbsp;</td> </tr>


<tr>
<td align='center'>Email:</td>
<td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
<td align='center'>Zip:</td>
<td><input type='text' name='zip'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<table border='0' cellpadding='0' cellspacing='0' width='480px' align='center'>
<tr>
<td align='center'><input type='submit' name='REGISTER' value="register"></td>
</tr>
</table>
</table>

</table>
</body>
</html>
OUTPUT: --
PRACTICAL: -04
Aim: -Create a HTML form document using form tag.
Code: -
<html>
<head>
<title>Form in Table</title>
</head>
<body background="img/02.jpg">
<form>

<h1 align="center"> <font color="white"> VBSPU Sign Up Page </font> </h1>

<table border="1" width="40%" height="600px" align="center" bgcolor="black">


<!---row1--->
<tr align="center" bgcolor="yellow">
<th colspan="2"><font size="10">Sign up </font></th>
</tr>

<!---row2--->
<tr>
<th><font color="yellow">
<label>Name</label></th>
<th><input type="text"></th>
</tr>

<!---row3--->
<tr>
<th><font color="yellow"><label>Age</label></th>
<th><input type="date"></th>
</tr>

<!---row4--->
<tr >
<th><font color="yellow">
<label>Mobile No.</label></th>
<th><input type="number"></th>
</tr>

<!---row5--->
<tr >
<th><font color="yellow">
<label>Email</label></th>
<th><input type="email"></th>
</tr>

<!---row6--->
<tr >
<th><font color="yellow">
<label>Gender</label></th>
<th><font color="yellow">
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</th>
</tr>

<!---row7--->
<tr >
<th><font color="yellow">
<label>Country</label></th>
<th>
<select name="city">
<option value="India">India</option>
<option value="South Africa">South Africa</option>
<option value="America">America</option>
<option value="Japan">Japan</option>
</th>
</tr>

<!---row8--->
<tr align="center" bgcolor="yellow">
<th colspan="2"><input type="Submit">
<input type="reset">
</th>
</tr>

</table>
</form>

</body>
</html>

OUTPUT: --
PRACTICAL: -05
Aim: - Create an applet which will have a line, oval and rectangles.
Code: -
import java.applet.*;
import java.awt.*;
public class Shapes extends Applet
{
//Function to initialize the applet
public void init()
{
setBackground(Color.white);
}
//Function to draw and fill shapes
public void paint(Graphics g)
{
//Draw a square
g.setColor(Color.black);
g.drawString("Square",75,200);
int x[]={50,150,150,50};
int y[]={50,50,150,150};
g.drawPolygon(x,y,4);
g.setColor(Color.yellow);
g.fillPolygon(x,y,4);
//Draw a pentagon
g.setColor(Color.black);
g.drawString("Pentagon",225,200);
x=new int[]{200,250,300,300,250,200};
y=new int[]{100,50,100,150,150,100};
g.drawPolygon(x,y,6);
g.setColor(Color.yellow);
g.fillPolygon(x,y,6);
//Draw a circle
g.setColor(Color.black);
g.drawString("Circle",400,200);
g.drawOval(350,50,125,125);
g.setColor(Color.yellow);
g.fillOval(350,50,125,125);
//Draw an oval
g.setColor(Color.black);
g.drawString("Oval",100,380);
g.drawOval(50,250,150,100);
g.setColor(Color.yellow);
g.fillOval(50,250,150,100);
//Draw a rectangle
g.setColor(Color.black);
g.drawString("Rectangle",300,380);
x=new int[]{250,450,450,250};
y=new int[]{250,250,350,350};
g.drawPolygon(x,y,4);
g.setColor(Color.yellow);
g.fillPolygon(x,y,4);
//Draw a triangle
g.setColor(Color.black);
g.drawString("Traingle",100,525);
x=new int[]{50,50,200};
y=new int[]{500,400,500};
g.drawPolygon(x,y,3);
g.setColor(Color.yellow);
g.fillPolygon(x,y,3);
}
}
/*
<applet code = Shapes.class width=600 height=600>
</applet>
*/

OUTPUT: --
PRACTICAL: -06
Aim: - Writing a program in XML in DTD which specify set of rules.
Code: -
<?xml version="1.0"?>
<!DOCTYPE address [
<!ELEMENT address (name, email, phone, birthday)>
<!ELEMENT name (first, last)>
<!ELEMENT first (#PCDATA)>
<!ELEMENT last (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
<!ELEMENT birthday (year, month, day)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT month (#PCDATA)>
<!ELEMENT day (#PCDATA)>
]>

<address>
<name>
<first>Rohit</first>
<last>Sharma</last>
</name>
<email>sharmarohit@gmail.com</email>
<phone>9876543210</phone>
<birthday>
<year>1987</year>
<month>June</month>
<day>23</day>
</birthday>
</address>
OUTPUT: --
PROGRAM: -07
Aim: -Create a JS Program for a calculator.
Code: -
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Calculator</title>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.js"
integrity="sha512BbVEDjbqdN3Eow8+empLMrJlxXRj5nEitiCAK5A1pUr66+jLVejo3PmjI
aucRnjlB0P9R3rBUs3g5jXc8ti+fQ==
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.min.js"
integrity="sha512iphNRh6dPbeuPGIrQbCdbBF/qcqadKWLa35YPVfMZMHBSI6PLJh1om
2xCTWhpVpmUyb4IvVS9iYnnYMkleVXLA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<!-- For styling -->
<style>
table {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
input[type="button"] {
width: 100%;
padding: 20px 40px;
background-color: rgb(49, 0, 128);
color: white;
font-size: 24px;
font-weight: bold;
border: none;
border-radius: 5px;
}
input[type="text"] {
padding: 20px 30px;
font-size: 24px;
font-weight: bold;
border: none;
border-radius: 5px;
border: 2px solid black;
}
</style>
</head>
<body>
<!-- Use Table to Create Calculator Structure Design -->
<table id="calcu">
<tr>
<td colspan="3"><input type="text" id="result"></td>
<td><input type="button" value="c" onclick="clr()" /> </td>
</tr>
<tr>
<td><input type="button" value="1" onclick="dis('1')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="2" onclick="dis('2')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="3" onclick="dis('3')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="/" onclick="dis('/')"
onkeydown="myFunction(event)"> </td>
</tr>
<tr>
<td><input type="button" value="4" onclick="dis('4')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="5" onclick="dis('5')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="6" onclick="dis('6')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="*" onclick="dis('*')"
onkeydown="myFunction(event)"> </td>
</tr>
<tr>
<td><input type="button" value="7" onclick="dis('7')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="8" onclick="dis('8')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="9" onclick="dis('9')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="-" onclick="dis('-')"
onkeydown="myFunction(event)"> </td>
</tr>
<tr>
<td><input type="button" value="0" onclick="dis('0')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="." onclick="dis('.')"
onkeydown="myFunction(event)"> </td>
<!-- solve function call function solve to evaluate value -->
<td><input type="button" value="=" onclick="solve()"> </td>
<td><input type="button" value="+" onclick="dis('+')"
onkeydown="myFunction(event)"> </td>
</tr>
</table>
<script>
// Function that display value
function dis(val) {
document.getElementById("result").value += val
}
function myFunction(event) {
if (event.key == '0' || event.key == '1'
|| event.key == '2' || event.key == '3'
|| event.key == '4' || event.key == '5'
|| event.key == '6' || event.key == '7'
|| event.key == '8' || event.key == '9'
|| event.key == '+' || event.key == '-'
|| event.key == '*' || event.key == '/')
document.getElementById("result").value += event.key;
}
var cal = document.getElementById("calcu");
cal.onkeyup = function (event) {
if (event.keyCode === 13) {
console.log("Enter");
let x = document.getElementById("result").value
console.log(x);
solve();
}
}
// Function that evaluates the digit and return result
function solve() {
let x = document.getElementById("result").value
let y = math.evaluate(x)
document.getElementById("result").value = y
}
// Function that clear the display
function clr() {
document.getElementById("result").value = ""
}
</script>
</body>
</html>

OUTPUT: --
PROGRAM: -08
Aim: -Create a JS Program for a calculating the square and cube of number
from 0 to 10.
Code:-
<html>
<head>
<script>
document.write( "<table> <tr> <th>Number</th> <th>Square</th> <th>Cube</th> </tr>" )
for(var n=0; n<=10; n++)
{
document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>" + n*n*n + "</td></tr>" )
}
document.write( "</table>" )
</script>
</head>
</html>

OUTPUT: ---
PROGRAM: -09
Aim: -Write a Program for performing arithmetic operation using java.
Code: -
import java.util.Scanner;
public class Arithmetic_Operators
{
public static void main(String args[])
{
Scanner s = new Scanner(System.in);
while(true)
{
System.out.println("");
System.out.println("Enter the two numbers to perform operations ");
System.out.print("Enter the first number : ");
int x = s.nextInt();
System.out.print("Enter the second number : ");
int y = s.nextInt();
System.out.println("Choose the operation you want to perform ");
System.out.println("Choose 1 for ADDITION");
System.out.println("Choose 2 for SUBTRACTION");
System.out.println("Choose 3 for MULTIPLICATION");
System.out.println("Choose 4 for DIVISION");
System.out.println("Choose 5 for MODULUS");
System.out.println("Choose 6 for EXIT");
int n = s.nextInt();
switch(n)
{
case 1:
int add;
add = x + y;
System.out.println("Addition of Two Numbers : "+add);
break;
case 2:
int sub;
sub = x - y;
System.out.println("Subtraction of Two Numbers : "+sub);
break;
case 3:
int mul;
mul = x * y;
System.out.println("Multiplication of Two Numbers : "+mul);
break;
case 4:
float div;
div = (float) x / y;
System.out.print("Division of Two Numbers : "+div);
break;
case 5:
int mod;
mod = x % y;
System.out.println("Modulus of Two Numbers : "+mod);
break;
case 6:
System.exit(0);
}
}
}
}
OUTPUT: --
PROGRAM: -10
Aim: --Write a Program to implement object-oriented program in java.
Code: --
public class GFG {
static String Employee_name;
static float Employee_salary;
static void set(String n, float p) {
Employee_name = n;
Employee_salary = p;
}
static void get() {
System.out.println("Employee name is: " +Employee_name );
System.out.println("Employee CTC is: " + Employee_salary);
}
public static void main(String args[]) {
GFG.set("Rathod Avinash", 10000.0f);
GFG.get();
}
}

OUTPUT--
PROGRAM: - 11
Aim: -Write a Program to create a window with the help of abstract window
toolkit.
Code: --
import java.awt.*;
public class AwtProgram1 {
public AwtProgram1()
{
Frame f = new Frame();
Button btn=new Button("Hello World");
btn.setBounds(80, 80, 100, 50);
f.add(btn); //adding a new Button.
f.setSize(300, 250); //setting size.
f.setTitle("JavaTPoint"); //setting title.
f.setLayout(null); //set default layout for frame.
f.setVisible(true); //set frame visibility true.
}
public static void main(String[] args) {
// TODO Auto-generated method stub
AwtProgram1 awt = new AwtProgram1(); //creating a frame.
}
}

OUTPUT--

You might also like