0% found this document useful (0 votes)
11 views13 pages

HTML SQL Javascript Lab 2026

The document contains various HTML, SQL, and JavaScript code snippets for creating web pages and database tables. It includes designs for tourism pages, educational institutions, student and employee records, stock management, and a case converter. Each section provides specific code examples for implementing features such as forms, tables, and data manipulation queries.

Uploaded by

vinayak.n.s2008
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
0% found this document useful (0 votes)
11 views13 pages

HTML SQL Javascript Lab 2026

The document contains various HTML, SQL, and JavaScript code snippets for creating web pages and database tables. It includes designs for tourism pages, educational institutions, student and employee records, stock management, and a case converter. Each section provides specific code examples for implementing features such as forms, tables, and data manipulation queries.

Uploaded by

vinayak.n.s2008
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

HTML

[Link] a simple and attractive web page for Kerala Tourism. It should
contain features like back ground colour / image headings, text formatting
and font tags, images etc.
<html>
<head>
<title> Kerala Tourism </title> </head>
<body bgcolor = " Green ">
<h1 align = " center " > DEPARTMENT OF TOURISM </ h1 >
<h2 align = " center " > Kerala State </ h2 >
<b> Kerala </ b > , in the south - western part of India , is a highly
desirable tourist destination in Asia ,often called
<font size = " 10 " color = " blue "> God ’ s Own Country . </font >
</br ><i>
It was recognized by National Geographic Traveller as one of the world ’ s
50 lifetime destinations and one of the thirteen paradises
on Earth . </i>
<img src=[Link]>
<img src=[Link]>
</ body >
</ html >
[Link] an attractive web page showing the following list
Higher studies after Class 10
• Higher secondary
• Art Higher secondary
• Technical Higher secondary
• Polytechnic
<html >
<head >
<title > Higher Education Instituitions </title >
</head >
<body bgcolor = " Cyan " >
<h2 > Higher studies after Class 10 </h2 >
<ul >
<li > Higher secondary </li >
<li > Art Higher secondary </li >
<li > Technical Higher secondary </li >
<li > Polytechnics</li >
</ul >
</body >
</html >
[Link] a web page containing a table as shown below
IITS AND NITS

<html >
<head >
<title > IITS AND NITS </title >
</head >
<body >
<table border = " 1 " >
<caption > <b > IITS AND NITS </b > </caption >
<tr >
<th > State </th >
<th > IIT<br ></th >
<th > NIT <br > </th >
</tr >
<tr >
<td > Kerala </td >
<td > Palakad </td >
<td > Kozhikode </td >
</tr >
<tr >
<td > Tamilnadu </td >
<td > Madras </td >
<td > Thiruchirappalli </td >
</tr >
<tr >
<td > Karnataka </td >
<td > Darwad </td >
<td > Surathkal</td >
</tr >
</table >
</body >
</html >
[Link] a web page for a form as shown below

<HTML >
<HEAD > <TITLE > LOGIN </TITLE > </HEAD >
<BODY >
<FORM >
<fieldset >
<h1><b>Login window </b></h1><br>
Enter User Name <INPUT Type = " Text " > <br><br>
Enter Password <INPUT Type = " Password " > <br><br>
<INPUT Type = " Submit " value = " Submit " >
<INPUT Type = " Reset " value = " Clear " >
</fieldset>
</FORM >
</BODY >
</HTML >
[Link] a simple web page about your school [Link]. Create another
web page named [Link] containing the school address. Give links
from school page to [Link] and reverse

Page : [Link].
<html >
<head >
<title > My School </title > </head >
<body bgcolor=red >

<h1 align = " CENTER " > Perambra hss </h1 > <br > Our school , located
within Kozhikode District , The school proudly offers three distinct batches
of Higher Secondary Courses , namely Biology Science ,Computer Science ,
Commerce , <br > From first standard to twelve about 1000 students
are studying here .
<br >
<a href="[Link] " > Click here for our school address </a>

</body ></html>

Page :[Link]

<html >
<head >
<title > Address </title >
</head >
<body bgcolor=yellow>
<h2 align = " center " > Perambra Higher secondary School </ h2 >
<address >
Perambra hss <BR >
Perambra Post <BR >

Kozhikode Dist <br >


</address >
<a href="[Link] " > back to school </a >
</body >
</html >

[Link] a webpage having a list as shown below

Subject Combination under science Stream


1. Physics,Chemistry,Maths,Biology
[Link],Chemistry,Maths,Computer science
[Link],Chemistry,Biology,Home Science
4. Physics,Chemistry,Biology ,Psychology
[Link],Chemistry,Maths,Electronics

<HTML>
<HEAD>
<TITLE> Entrance Exams after Plus 2</TITLE></HEAD>
<BODY BGCOLOR=’YELLOW”>
<HI><B> Entrance Exams after Plus 2</B></H1>
<OL>
<li > Physics,Chemistry,Maths,Biology</li>
<li >Physics,Chemistry,Maths,Computer science </li>
<li>Physics,Chemistry,Biology,Home Science</li>
<li> Physics,Chemistry,Biology ,Psychology </li>
<li> Physics,Chemistry,Maths,Electronics </li>

</OL>
</BODY>
</HTML>

SQL
Create a table Student with the following fields and insert at least 5
records into the table except for the column Total.

Roll_Number Integer Primary key


Name Varchar (25)
Batch Varchar (15)
Mark1 Integer
Mark2 Integer
Mark3 Integer
Total Integer
a. Update the column Total with the sum of Mark1, Mark2 and Mark3.
b. List the details of students in Science batch.
c. Display the name and total marks of students who are failed (Total >=90).
d. Display the name of students in alphabetical order and in batch based.

Queries:
1. TABLE CREATION

CREATE TABLE STUDENT (ROLL_NUMBER INT PRIMARY KEY,


NAME VARCHAR(25), BATCH VARCHAR(15),MARK1 INT,MARK2
INT, MARK3 INT, TOTAL INT);

2. INSERTING RECORDS

INSERT INTO STUDENT(ROLL_NUMBER, NAME, BATCH, MARK1, MARK2, MARK3) VALUES


(1,'AJITH','COMMERCE',75,67,78)
INSERT INTO STUDENT(ROLL_NUMBER, NAME, BATCH, MARK1, MARK2, MARK3) VALUES
(2,'SANIYA','SCIENCE',89,76,77);

INSERT INTO STUDENT(ROLL_NUMBER, NAME, BATCH, MARK1, MARK2, MARK3) VALUES


(3,'SURESH','HUMANITIES',85,70,95);

INSERT INTO STUDENT(ROLL_NUMBER, NAME, BATCH, MARK1, MARK2, MARK3) VALUES


(4,'DEEPA','SCIENCE',25,40,20);

INSERT INTO STUDENT(ROLL_NUMBER, NAME, BATCH, MARK1, MARK2, MARK3) VALUES


(5,'AKHIL','COMMERCE',56,15,32);

A) UPDATE STUDENT SET TOTAL = MARK1+MARK2+MARK3;

B)SELECT * FROM STUDENT WHERE BATCH = 'Science';

C)SELECT NAME, TOTAL FROM STUDENT WHERE TOTAL>=90;

D)SELECT NAME,BATCH FROM STUDENT ORDER BY BATCH,NAME;


2. Create a table Employee with the following fields and insert at least 5
records into the table except the column Gross_pay and DA.

Emp_code Integer Primary key


Emp_name Varchar (20)
Designation Varchar (25)
Department Varchar(25)
Basic Pay Decimal (10,2)
DA Decimal (10,2)
Gross_pay Decimal (10,2)
A. Update DA with 21% of Basic Pay.
B. Update the Gross_pay with the sum of Basic Pay and DA.
C. Display the details of employees in Accounts,, Sales and HR
departments.
D. Display the details of employee with gross pay below 40000.

Queries:
1. TABLE CREATION

CREATE TABLE EMPLOYEE (EMP_CODE INT PRIMARY KEY , EMP_NAME VARCHAR(20),


DESIGNATION VARCHAR(25) ,DEPARTMENT VARCHAR(25),BASIC_PAY DEC(10,2),
DA DEC(10,2),GROSS_PAY DEC(10,2));

2. INSERTING RECORDS

INSERT INTO EMPLOYEE (EMP_CODE, EMP_NAME, DESIGNATION, DEPARTMENT,


BASIC_PAY) VALUES (101,'ANTONY','MANAGER',’PURCHASE’,52000);
INSERT INTO EMPLOYEE (EMP_CODE, EMP_NAME, DESIGNATION, DEPARTMENT,
BASIC_PAY) VALUES (102,'SOBHA','SWEEPER',’SALES’,5000);

INSERT INTO EMPLOYEE (EMP_CODE, EMP_NAME, DESIGNATION, DEPARTMENT,


BASIC_PAY) VALUES (103,'CHITHRA','SUPERVISOR',’SALES’12000);

INSERT INTO EMPLOYEE (EMP_CODE, EMP_NAME, DESIGNATION, DEPARTMENT,


BASIC_PAY) VALUES (104,'ANIRUDH','MANAGER',’HR’,35000);

INSERT INTO EMPLOYEE (EMP_CODE, EMP_NAME, DESIGNATION, DEPARTMENT,


BASIC_PAY) VALUES (105,'MUHAMMED','ACCOUNTANT',’ACCOUNTS’,32000);

A)UPDATE EMPLOYEE SET DA = BASIC_PAY * 21 / 100;


B)UPDATE EMPLOYEE SET GROSS_PAY = BASIC_PAY + DA;
C)SELECT * FROM EMPLOYEE WHERE DEPARTMENT IN ('Accounts','SALES','HR');
D)SELECT * FROM EMPLOYEE WHERE GROSS_PAY < 40000;

[Link] a table Stock, which stores daily sales of items in a shop, with the
following fields and insert at least 5 records into the table.
Item_code Integer Primary key
Item_name Varchar (20)
Manufacturer_Code Varchar (5)
Qty Integer
Unit_Price Decimal (10,2)
a. Display the item names with stock zero.
b. Display the number of items manufactured by the same manufacturer.
c. Display the highest price and lowest quantity in the stock.
d. Increase the unit price of all items by 15%

Queries:
1. TABLE CREATION
CREATE TABLE STOCK(ITEM_CODE INT PRIMARY KEY, ITEM_NAME
VARCHAR(20), MANUFACTURER_CODE VARCHAR(5), QTY INT, UNIT_PRICE
DEC(10,2));
2. INSERTING RECORDS

INSERT INTO STOCK VALUES (101,'PARACETAMOL','SUN',150,10.50);


INSERT INTO STOCK VALUES (102,'AVIL','CIPLA',250,2.5);
INSERT INTO STOCK VALUES (103,'TELMAR40' , 'CIPLA',150,15.00);
INSERT INTO STOCK VALUES (104,'ATCHOL10', ‘SPC',50,17.00);
INSERT INTO STOCK VALUES (105,'GLYCIPHAGE', 'SUN',0,12.75);

A)SELECT ITEM_NAME FROM STOCK WHERE QTY=0;

B)SELECT MANUFACTURER_CODE, COUNT(*) FROM STOCK


GROUP BY MANUFACTURER_CODE

C)SELECT MAX(UNIT_PRICE), MIN(QTY) FROM STOCK;

D)UPDATE STOCK SET UNIT_PRICE =UNIT_PRICE+ UNIT_PRICE * 15/100;

JAVA SCRIPT

1. A web page should contain one text box for entering a text. There
should be two buttons labelled to Upper Case and To Lower Case. on
clicking each button, the content in the text box should be converted to
upper case or lower case accordingly . Write required java script for this
operations

<html >
<head >
<title > Case Converter </title >
<script language ="javascript">
function CONVERTTOUPPER()
{
var txtin =[Link];

[Link] = [Link]();
}

function CONVERTTOLOWER ()
{
var txtin = document . myform . convertstring . value ;
document . myform . convertstring . value = txtin . toLowerCase();
}
</script >
</head >
<body bgcolor = " green " >
<form name ="myform">
Provide a text
<input type ="text" name="convertstring">
<input type ="button" onClick ="CONVERTTOUPPER()" value ="To
Upper Case">
<input type ="button" onClick ="CONVERTTOLOWER()" value = " To
Lower Case " > </form >
</body >
</html >

You might also like