Scribd
Upload
22 views

S ASI

The document demonstrates the use of frame tags to create a biodata profile in multiple frames. Frame 1 contains basic personal details like name, address, mobile number and email. Frame 2 and 3 repeat the same biodata details. Frame 4 adds additional details on hobbies. Together the frames create a full biodata profile using HTML frame tags.

Uploaded by

keyeb13618
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
22 views

S ASI

The document demonstrates the use of frame tags to create a biodata profile in multiple frames. Frame 1 contains basic personal details like name, address, mobile number and email. Frame 2 and 3 repeat the same biodata details. Frame 4 adds additional details on hobbies. Together the frames create a full biodata profile using HTML frame tags.

Uploaded by

keyeb13618
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 26

SCMS COLLEGE OF POLYTECHNIC , VAIKKARA

PERUMBAVOOR , ERNAKULAM-683549

LABORATORY RECORD

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


\
INDEX

Sl No Name of Experiment Date Page No Initial of


Teacher
1 WEBPAGE 1

2 TIME TABLE 4

3 FRAME 7

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 20

12 CSS LIST 21
WEB TECHNOLOGY LAB (3138)

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 College of Polytecnics</title>
</head>
<body style="background-color: rgb(87, 87, 87); color: rgb(247, 238, 221); font-family: 'Courier
New', Courier, monospace;">
<h1 style="text-align: center;">SCMS College of Polytecnics, Perumbavoor</h1>
<h2>Genesis</h2>
<img src="Nayar.jpg">
<h3>Dr. G.P.C Nayar Cairman, SCMS Group</h3>
<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>
<img src="Pradeep.jpg">

<h3>Dr. Pradeep P. Thevannoor Former Vice Chairman of SCMS Group</h3>


<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

Dept. of Computer 1 SCMS College of


WEB TECHNOLOGY LAB (3138)

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 align="center">
<th>Branches</th>
<td>CT</td>
<td>CE</td>
<td>EEE</td>
</tr>
<tr align="center">
<th>Seat</th>
<td>20</td>
<td>11</td>
<td>12</td>
</tr>
<tr align="center">
<th>Total</th>
<td colspan="3" align="center">46</td>
</tr>
</table>

Dept. of Computer 2 SCMS College of


WEB TECHNOLOGY LAB (3138)

<a href="https://scmsgroup.org/scmspoly/genesis">Reference Link</a>


</body>
</html>

OUTPUT

RESULT: Program executed successfully and the output obtained.

Dept. of Computer 3 SCMS College of


WEB TECHNOLOGY LAB (3138)

Experiment No: 2 Date:

TIME TABLE
AIM: To create a Time table using table tag.

<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body style="background-color: darkslategray; font-family: 'Courier New', Courier, monospace; color:
floralwhite;">
<h1 align="center">CT Timetable 2022-2023</h1>
<table border="1" cellspacing="1" align="center">
<tr>
<th>Day</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th></th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<td>Monday</td>
<td>C</td>
<td>DBMS</td>
<td>DCF</td>
<td>B</td>
<td>Hardware</td>
<td>Lab</td>
</tr>

Dept. of Computer 4 SCMS College of


WEB TECHNOLOGY LAB (3138)

<tr>
<td>Tuesday</td>
<td>CO</td>
<td>DBMS </td>
<td>Lab</td>
<td>R</td>
<td>Hardware</td>
<td>C</td>
</tr>
<tr>
<td>Wednesday</td>
<td>DBMS</td>
<td>Lab</td>
<td>C</td>
<td>E</td>
<td>Hardware</td>
<td>DCF</td>
</tr>
<tr>
<td>Thursday</td>
<td>DCF Lab</td>
<td>DBMS</td>
<td>C Lab</td>
<td>A</td>
<td>CO</td>
<td>Hardware</td>
</tr>
<tr>
<td>Friday</td>
<td>DCF Lab</td>

Dept. of Computer 5 SCMS College of


WEB TECHNOLOGY LAB (3138)

<td>CO</td>
<td>Hardware</td>
<td>K</td>
<td>C Lab</td>
<td>WT Lab</td>
</tr>
</table>
</body>
</html>

OUTPUT

RESULT: Program executed successfully and the output obtained.

Dept. of Computer 6 SCMS College of


WEB TECHNOLOGY LAB (3138)

Experiment No: 3 Date:

FRAME
AIM: To create Biodata using frame tag.

<!DOCTYPE html>
<html>
<head>
<title>Biodata</title>
</head>
<body>
<h1 align="center">Biodata</h1>
<p>Name:Yousaf</p>
<p>Address:Pendanath (H)<br>
&emsp;&emsp;&emsp;&nbsp;&nbsp;Pezhakkapilly P.O<br>
&emsp;&emsp;&emsp;&nbsp;&nbsp;Muvattupuzha</p>
<p>Mobile no:8129155371</p>
<p>Email:[email protected]</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Biodata</title>
</head>
<body>
<h1 align="center">Biodata</h1>
<p>Name:Yousaf</p>
<p>Address:Pendanath (H)<br>
&emsp;&emsp;&emsp;&nbsp;&nbsp;Pezhakkapilly P.O<br>
&emsp;&emsp;&emsp;&nbsp;&nbsp;Muvattupuzha</p>
<p>Mobile no:8129155371</p>

Dept. of Computer 7 SCMS College of


WEB TECHNOLOGY LAB (3138)

<p>Email:[email protected]</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Biodata</title>
</head>
<body>
<h1 align="center">Biodata</h1>
<p>Name:Yousaf</p>
<p>Address:Pendanath (H)<br>
&emsp;&emsp;&emsp;&nbsp;&nbsp;Pezhakkapilly P.O<br>
&emsp;&emsp;&emsp;&nbsp;&nbsp;Muvattupuzha</p>
<p>Mobile no:8129155371</p>
<p>Email:[email protected]</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Extras</title>
</head>
<body>
<h1 align="center">Additionnal Activities</h1>
<p><b>Hobbies: Coding <br>
&emsp;&emsp;&emsp;&emsp;Football <br>
&emsp;&emsp;&emsp;&emsp;Drawing</p>
</body>

Dept. of Computer 8 SCMS College of


WEB TECHNOLOGY LAB (3138)

</html>

<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

OUTPUT

RESULT: Program executed successfully and the output obtained.

Dept. of Computer 9 SCMS College of


WEB TECHNOLOGY LAB (3138)

Experiment No: 4 Date:

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>

Dept. of Computer 1 SCMS College of


WEB TECHNOLOGY LAB (3138)

OUTPUT

RESULT: Program executed successfully and the output obtained

Dept. of Computer 1 SCMS College of


WEB TECHNOLOGY LAB (3138)

Experiment No: 5
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("s.png");
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

RESULT: Program executed successfully and the output obtained.

Dept. of Computer 1 SCMS College of


WEB TECHNOLOGY LAB (3138)

Experiment No: 6 Date:

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

RESULT: Program executed successfully and the output obtained.

Dept. of Computer 1 SCMS College of


WEB TECHNOLOGY LAB (3138)

Experiment No: 7 Date:

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

RESULT: Program executed successfully and the output obtained.

Dept. of Computer 1 SCMS College of


WEB TECHNOLOGY LAB (3138)

Experiment No: 8 Date

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

RESULT: Program executed successfully and the output obtained.

Dept. of Computer 1 SCMS College of


WEB TECHNOLOGY LAB (3138)

Experiment No: 9 Date

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>

Dept. of Computer 1 SCMS College of


WEB TECHNOLOGY LAB (3138)

OUTPUT

RESULT: Program executed successfully and the output obtained.

Dept. of Computer 1 SCMS College of


WEB TECHNOLOGY LAB (3138)

Experiment No: 10 Date

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>

Dept. of Computer 1 SCMS College of


WEB TECHNOLOGY LAB (3138)

<p style="text-transform: capitalize;">This will be capitilized</p>


</body>
</html>

OUTPUT

RESULT: Program executed successfully and the output obtained.

Dept. of Computer 1 SCMS College of


WEB TECHNOLOGY LAB (3138)

Experiment No: 11 Date:


CSS BACKGROUND PROPERTIES

AIM: To change background using CSS

<!DOCTYPE html>
<html>
<head>
<title>Background CSS</title>
<style>
body{
background-image: url("black.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>Me too!</p>
<p>and me!</p>
OUTPUT

RESULT: Program executed successfully and the output obtained.

Dept. of Computer 2 SCMS College of


WEB TECHNOLOGY LAB (3138)

Experiment No: 12 Date:

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{

Dept. of Computer 2 SCMS College of


WEB TECHNOLOGY LAB (3138)

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">

Dept. of Computer 2 SCMS College of


WEB TECHNOLOGY LAB (3138)

<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>

Dept. of Computer 2 SCMS College of


WEB TECHNOLOGY LAB (3138)

</html>

OUTPUT

RESULT: Program executed successfully and the output obtained.

Dept. of Computer 2 SCMS College of

You might also like