Sreerag Record

SCMS COLLEGE OF POLYTECHNIC , VAIKKARA
PERUMBAVOOR , ERNAKULAM-683549
LABORATORY RECORD
Name……………………………………………………………………………...…………
Year………………………………………….Branch…………………..….……………….
Class No………..………………………..…Reg.no……………...…………………………
Certified that this is the bonafide record of work done in the ……………………
…………………………………………………………………………………………….
Laboratory of the SCMS College of Polytechnics, Vaikkara
By,
Sri/Smt……………………………………………..
Head of Section Lecturer in Charge
Place:
Date:
Internal Examiner External Examiner

WEB TECHNOLOGY LAB (3138)
INDEX
Sl No Name of Experiment Date Page No Initial of

Teacher
1 WEBPAGE 3
2 TIME TABLE 6
3 FRAME 8
4 FORM 10
5 CSS ELEMENT 12
6 CSS ID 13
7 CSS CLASS 14
8 CSS INLINE 15
9 CSS FONT 16
10 CSS TEXT 17
11 CSS BACKGROUND 19
12 CSS LIST 20
Dept. of Computer Engg. 2 SCMS College of Polytechnics

Experiment No: 1 Date:
WEB PAGE USING BASIC HTML TAGS
AIM: To create a webpage using basic HTML tags.
<!DOCTYPE html>
<html>
<head>
<title>SCMS</title>
</head>
<body text="blue" bgcolor="GREY">
<h1 style="color: cornsilk; text-align:center">SCMS College Of Polytechnic Perumbavoor</h1>
<h2>Genesis</h2>
<h3>Dr.G.P.C.Nayar Chairman,SCMS Group</h3>
<img src="Nayar.jpg"></img>
<p>The year 1976 saw the birth of a luminous star of learning on the educational horizon. The star
was to later blaze a trail across the Indian skies guiding scores of students to scale the heights of success
in their careers, professions and enterprises. Today, the beacon stands firm on massive pillars, having
stamped indelible imprints on the glorious academic traditions of India. This is the story of PRATHAP
FOUNDATION FOR EDUCATION AND TRAINING, the brainchild of the great visionary Dr. G.P.C.
Nayar, who wanted to redefine educational standards in India by shaping it as a window to the emerging
market-driven global economy. Prathap Foundation of Education and Training started its first academic
institution, the School of Communication and Management Studies (SCMS) in 1976, which in later years
earned fame and glory as a top business school. It was rechristened as SCMS COCHIN SCHOOL OF
BUSINESS in the year 2013. The Foundation went on establishing institutions to offer professional
education in engineering, technology, management, hospitality, animation, biotech research, socio-
economic research and other professional areas with the core concept of quality and excellence in
anything it does. Together, these institutions constitute SCMS GROUP OF EDUCATIONAL
INSTITUTIONS</p>
<h4>Dr. Pradeep P. Thevannoor Former Vice Chairman of SCMS Group</h4>
<img src="pradeep.jpg">
<P>Dr. Pradeep P. Thevannoor, the late Vice Chairman of SCMS Group, was a great visionary and a
source of inspiration for all of us at SCMS Group. He wanted to take SCMS to great heights in quality
and excellence. A man of fertile imagination and untiring energy, he was in a hurry to accomplish his pet
projects. SCMS Engineering College was closest to his heart. He was also the guiding force and
inspiration behind SCMS School of Architecture and projects like SCMS Water Institute, Biotechnology
Research Centre, the now famous Neera, biofuel from coconut oil, the antidiabetic tea powder ‘Stevia
Tea’ and a host of other activities. They were all products inspired and initiated by him. Widely travelled,
his unfinished mission was for spreading the wings of SCMS to London and Bangalore by establishing
academic institutions. He died on his way to Bangalore for project evaluation on 17.11.2014 when his
car collided with a truck and died instantly. True to his nature, he lived for SCMS and died for it.</P>
<h5>Branches</h5>
<ul>
<li>Computer</li>
<li>Civil</li>

<li>Electrical</li>
<li>Mechanical</li>
<li>Automobile</li>
</ul>
<table border="1" cellspacing="5" align="center">
<tr>
<th>Branches</th>
<td>CT</td>
<td>EEE</td>
<td>CE</td>
</tr>
<tr>
<th>Seat</th>
<td>20</td>
<td>11</td>
<td>15</td>
</tr>
<tr>
<th>Total</th>
<td colspan="3" align="right">46</td>
</tr>
</table>
<a href="https://scmsgroup.org/scmspoly/index.php">Reference Link</a>
</body>
</html>

OUTPUT
RESULT: Program executed successfully and the output obtained.

TIME TABLE
AIM: To create a Time table using table tag.
<!DOCTYPE html>
<html>
<body>
<h1 align="center">CT TIME TABLE 2022-2023</h1>
<tr>
<th>DAY</th>
<th>I</th>
<th>II</th>
<th>III</th>
<th>12.30-1.00</th>
<th>IV</th>
<th>V</th>
<th>VI</th>
</tr>
<tr>
<td>Monday</td>
<td align="center">C</td>
<td align="center" height="40" width="120">DBMS</td>
<td align="center" height="40" width="120">FUNDAMENTAL</td>
<td rowspan="5" align="center">B<br>R<br>E<br>A<br>K<br></td>
<td colspan="3" align="center" height="40" width="120">C Lab</td>
</tr>
<tr>
<td>Tuesday</td>
<td align="center" height="40" width="120">CO</td>
<td colspan="3" align="center">WT Lab</td>
</tr>
<tr>
<td>Wednesday</td>
<td align="center" height="40" width="120">LAB</td>
<td align="center" height="40" width="120">C</td>
<td colspan="3" align="center">Digital Lab</td>
</tr>
<tr>
<td>Thursday</td>
<td align="center" heright="40" width="120">DCP Lab</td>

<td align="center" height="40" width="120">C Lab</td>
<td colspan="3" align="center">Hardware</td>
</tr>
<tr>
<td>Friday</td>
<td align="center" height="40" width="120">C</td>
<td align="center" height="40" width="120">Hardware</td>
<td colspan="3" align="center">DBMS Lab</td>
</tr>
</table>
</body>
</html>
OUTPUT

FRAME
AIM: To create Biodata using frame tag.
<html>
<head>
<title>frame</title>
</head>
<body>
<h1 align="center">PERSONEL DATA</h1>
<p>Name:SREERAG SASI</p>
<p>Address: Kalamathil (H) Chowara p.o</p>
<p>Mobile: 8593859602</p>
<p>Email: sreeragsasi003@gmail.com</p>
</body>
</html>
<html>
<head>
<title>frame</title>
</head>
<body>
<h1 align="center">EDUCATIONAL QUALIFICATION</h1>
<tr>
<th align="center">QUALIFICATION</th>
<th align="center">SCHOOL</th>
<th align="center">PERCENTAGE</th>
</tr>
<tr>
<td align="center">10</td>
<td align="center">St.Sebastian's H S Kanjoor</td>
<td align="center">88%</td>
</tr>
<tr>
<td align="center">+2</td>
<td align="center">GHSS Mudickal</td>
<td align="center">67%</td>
</tr>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Extras</title>
</head>
<body>
<h1 align="center">Additionnal Activities</h1>
<p><b>Hobbies: Photography <br>
&emsp;&emsp;&emsp;&emsp;Music <br>
&emsp;&emsp;&emsp;&emsp;Cricket </p>
</body>
</html>
OUTPUT

APPLICATION FORM
AIM: To create an application form using HTML form tag.
<html>
<body>
<h1>APPLICATION FORM</h1>
<form>
NAME:<input type="text" name="name"/><br><br>
ADDRESS:<br><textarea rows="5" cols="25" name="name"></textarea><br><br>
GENDER:
<input type="radio" name="male"/>male
<input type="radio" name="female"/>female<br><br>
CITY:<select name="name">
<option value="Eranakulam" select>kochi</option>
<option value="Kottayam" select>Kottayam</option>
<option value="Idukki" select>Idukki</option>
<option value="Perumbavoor" select>Perumbavoor</option>
<option value="Aluva" select>Aluva</option>
</select><br><br>
STATE:
<input type="checkbox" name="Kerala">Kerala
<input type="checkbox" name="Others">Others<br><br>
UPLOAD A PHOTO:<input type="file" name="file"/><br><br>
<input type="submit" name="name" value="submit"/>
<input type="reset" name="name" value="reset"/>
<input type="button" name="name" value="cancel"/>
</form>
</body>
</html>

OUTPUT

CSS-ELEMENT SELECTOR METHOD
AIM: To create a webpage with CSS using element selector method.
<!DOCTYPE html>
<html>
<head>
<title>CSS Element</title>
<style>
body{
background-image: url(“images (1).jpg");
background-repeat: repeat-y;
}
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>This will be affected by style</p>
<p>Me too!</p>
<p>and me!</p>
</body>
</html>
OUTPUT

CSS-ID SELECTOR METHOD
AIM: To create a webpage with CSS using ID selector method.
<!DOCTYPE html>
<html>
<head>
<title>CSS ID</title>
<style>
#para1{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p id="para1">Hello World</p>
<p>This paragraph should not be affected</p>
</body>
</html>
OUTPUT

CSS – CLASS SELECTOR METHOD
AIM: To create a webpage with CSS using class selector method.
<!DOCTYPE html>
<html>
<head>
<title>CSS Class</title>
<style>
.p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="p">Red and centre-aligned heading</h1>
<p class="p">Red and cetre-alignes heading</p>
</body>
</html>
OUTPUT

CSS-INLINE METHOD
AIM: To create a webpage through inline method
<!DOCTYPE html>
<html>
<head>
<title>CSS Inline</title>
</head>
<body>
<h1 style="color: red; margin-left: 30px;">This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
OUTPUT

CSS-FONT PROPERTIES
AIM: To create font style using CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS Font</title>
</head>
<body>
<p style="font-family: georgia, garamond, serif;">
This text is renderd in either georgia, garamound or
the default serif font depending on which font you have in your system
</p>
<p style="font-style: italic;">This text will be renderd in italic style</p>
<p style="font-variant: small-caps;">This will be renderd as small caps</p>
<p style="font-weight: bold;">This font will be bold</p>
<p style="font-size: 20px;">This font is 20 pixels</p>
<p style="font-size: small;">This font size is small</p>
<p style="font-size: large;">This font is large</p>
<p style="text-align: right;">This will be right aligned</p>
<p style="text-align: center;">This will be center aligned</p>
<p style="text-align: left;">THis will be left aligned</p>
</body>
</html>
OUTPUT

CSS-TEXT PROPERTIES
AIM: To create text style using CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS text</title>
<style>
h1{
letter-spacing: 3px;
}
h2{
letter-spacing: -3px;
}
h3{
word-spacing: 10px;
}
</style>
</head>
<body>
<h1>This heading 1-letter spacing</h1>
<h2>This heading 2-letter spacing</h2>
<h3>This heading 2-word spacing</h3>
<p style="direction: rtl;">This line will be from right to left</p>
<p style="text-align: right;">This must be right aligned</p>
<p style="text-align: center;">This must be center aligned</p>
<p style="text-align: left;">This must be left aligned</p>
<p style="text-decoration: overline;">This will be overline</p>
<p style="text-decoration: line-through;">This will be line through</p>
<p style="text-decoration: underline;">This will be underlined</p>
<p style="text-transform: uppercase;">This is Uppercased</p>
<p style="text-transform: lowercase;">This is Lowercased</p>
<p style="text-transform: capitalize;">This will be capitilized</p>
</body>
</html>

OUTPUT

CSS BACKGROUND PROPERTIES
AIM: To change background using CSS
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("chem.jpg");
background-repeat: repeat-y;
background-color: transparent;
background-position: right top;
margin-right: 200px;
}
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by style.</p>
<p>Mee too!</p>
<p>And me!</p>
</body>
</html>
OUTPUT
RESULT: Program executed successfully and the output obtained

CSS-LIST
AIM: To create ordered and unordered list using CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS List</title>
<style>
ul.a{
list-style: circle;
}
ul.b{
list-style: disc;
}
ul.c{
list-style: square;
}
ol.n{
list-style: lower-alpha;
}
ol.o{
list-style: lower-greek;
}
ol.p{
list-style: lower-latin;
}
ol.q{
list-style: lower-roman;
}
ol.r{
list-style: upper-alpha;
}
ol.u{
list-style: upper-roman;
}
ol.v{
list-style: none;
}
</style>
</head>
<body>
<h1>List-style-type Property</h1>

<ul class="a">
<li>Circle</li>
<li>Tea</li>
<li>Cola</li>
</ul>
<ul class="b">
<li>Disc</li>
<li>Tea</li>
<li>Cola</li>
</ul>
<ul class="c">
<li>Square</li>
<li>Tea</li>
<li>Cola</li>
</ul>
<ol class="n">
<li>lower alpha</li>
<li>Tea</li>
<li>Cola</li>
</ol>
<ol class="o">
<li>lower greek</li>
<li>Tea</li>
<li>Cola</li>
</ol>
<ol class="p">
<li>Lower latin</li>
<li>Tea</li>
<li>Cola</li>
</ol>
<ol class="q">
<li>Lower roman</li>
<li>Tea</li>
<li>Cola</li>
</ol>
<ol class="r">
<li>Upper alpha</li>
<li>Tea</li>
<li>Cola</li>
</ol>
<ol class="u">
<li>Upper roman</li>
<li>Tea</li>
<li>Cola</li>
</ol>
<ol class="V">
<li>None Type</li>
<li>Tea</li>
<li>Cola</li>
</ol>
</body>
</html>
OUTPUT
RESULT: Program executed successfully and the output obtained

Experiment No: Date:
JAVA ADDITION
AIM: To add 2 numbers using java.

<html>
<body>
<h2>JavaScript Operators</h2>
<p>x = 5, y = 2, calculate z = x + y, and display z:</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
OUTPUT

CALCULATOR
AIM: To make a calculator using java.
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<script>
function add1() {
var a,b,c;
a=Number(document.getElementById("first").value);
b=Number(document.getElementById("second").value);
c=a+b;
document.getElementById("result").value=c;
}
function div() {
var a,b,c;
a=document.getElementById("first").value;
b=document.getElementById("second").value;
c=a/b;
}
function mul() {
var a,b,c;
c=a*b;
}
function sub() {
var a,b,c;
c=a-b;
}
</script>
</head>
<body style="background-color: rgb(39, 36, 36); color: white; text-align: center;">
<h1 style="text-align: center;">Calculator</h1>
Enter First Number:<input type="text" id="first"><br><br>
Enter Second Number:<input type="text" id="second"><br><br>
<button onclick="add1()">Add</button>
<button onclick="sub()">Sub</button>
<button onclick="mul()">Mult</button>
<button onclick="div()">Div</button><br><br>
The Result is: <input type="text" id="result">
</body>
</html>
OUTPUT

PHONE NUMBER VALIDATION
AIM: Validate phone number using java.
<!DOCTYPE html>
<html>
<head>
<title>Phone Number Validation</title>
<script>
function Validation() {
var a=document.phone.no.value;
if(a==""){
window.alert("Phone number required");
document.phone.no.focus();
return false;
}
if(isNaN(a)){
window.alert("Phone number incorrect");
document.phone.no.focus();
return false;
}
if(a.length==10){
window.alert("Phone number has been Validated");
}
else
window.alert("Inssufitiant digits in Phone number");
}
</script>
</head>
<h1>Phone Number Validation</h1>
<form name="phone" method="POST" onsubmit="return Validation()">
<tr>
<td>Enter Phone no:</td>
<td><input type="text" name="no"></td>

</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
OUTPUT

USERNAME AND PASSWORD VALIDATION
AIM: Validate Username and password using java.
<!DOCTYPE html>
<html>
<head>
<title>Username Validation</title>
<script>
function validate() {
var name=document.form.name.value;
var password=document.form.password.value;
if(name==""||name==null){
alert("Name is Blank");
document.form.name.focus();
return false;
}
if(password.length<6){
alert("Password Must be 6 character");
document.form.password.focus();
return false;
}
else{
alert("Validation Successfull");
}
}
</script>
</head>
<h1>Username Validation</h1>
<form name="form" onsubmit="validate()">
<tr>
<td>Name:</td>
<td><input type="text" name="name"></td><br><br>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td></td><br><br>
<td><button type="submit" name="register" value="register">Register</button></td>
</tr>
</form>
</body>
</html>
OUTPUT

Sreerag Record

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

Sreerag Record

Uploaded by

Copyright:

Available Formats

SCMS COLLEGE OF POLYTECHNIC , VAIKKARA

Head of Section Lecturer in Charge

Internal Examiner External Examiner

Sl No Name of Experiment Date Page No Initial of

Dept. of Computer Engg. 2 SCMS College of Polytechnics

Experiment No: 1 Date:

WEB PAGE USING BASIC HTML TAGS

AIM: To create a webpage using basic HTML tags.

Dept. of Computer Engg. 3 SCMS College of Polytechnics

Dept. of Computer Engg. 4 SCMS College of Polytechnics

RESULT: Program executed successfully and the output obtained.

Dept. of Computer Engg. 5 SCMS College of Polytechnics

Experiment No: 2 Date:

<td align="center" height="40" width="120">DBMS</td>

RESULT: Program executed successfully and the output obtained.

Dept. of Computer Engg. 7 SCMS College of Polytechnics

Experiment No: 3 Date:

RESULT: Program executed successfully and the output obtained.

Dept. of Computer Engg. 9 SCMS College of Polytechnics

Experiment No: 4 Date:

AIM: To create an application form using HTML form tag.

Dept. of Computer Engg. 10 SCMS College of Polytechnics

RESULT: Program executed successfully and the output obtained.

Dept. of Computer Engg. 11 SCMS College of Polytechnics

Experiment No: 5 Date:

CSS-ELEMENT SELECTOR METHOD

AIM: To create a webpage with CSS using element selector method.

RESULT: Program executed successfully and the output obtained.

Dept. of Computer Engg. 12 SCMS College of Polytechnics

Experiment No: 6 Date:

CSS-ID SELECTOR METHOD

AIM: To create a webpage with CSS using ID selector method.

RESULT: Program executed successfully and the output obtained.

Dept. of Computer Engg. 13 SCMS College of Polytechnics

Experiment No: 7 Date:

CSS – CLASS SELECTOR METHOD

AIM: To create a webpage with CSS using class selector method.

RESULT: Program executed successfully and the output obtained.

Dept. of Computer Engg. 14 SCMS College of Polytechnics

Experiment No: 8 Date:

AIM: To create a webpage through inline method

RESULT: Program executed successfully and the output obtained.

Dept. of Computer Engg. 15 SCMS College of Polytechnics

Experiment No: 9 Date:

AIM: To create font style using CSS

RESULT: Program executed successfully and the output obtained.

Dept. of Computer Engg. 16 SCMS College of Polytechnics

Experiment No: 10 Date:

AIM: To create text style using CSS

Dept. of Computer Engg. 17 SCMS College of Polytechnics

RESULT: Program executed successfully and the output obtained.

Dept. of Computer Engg. 18 SCMS College of Polytechnics

Experiment No: 11 Date:

CSS BACKGROUND PROPERTIES

AIM: To change background using CSS

RESULT: Program executed successfully and the output obtained

Experiment No: 12 Date:

Dept. of Computer Engg. 20 SCMS College of Polytechnics

RESULT: Program executed successfully and the output obtained

Dept. of Computer Engg. 22 SCMS College of Polytechnics

Experiment No: Date:

AIM: To add 2 numbers using java.