Web Technology Lab: For The Academic Year 2021-22

Web Technology Lab
For the academic year 2021-22
Rajkiya Engineering College, Kannauj

B.TECH. THIRD YEAR
KCS - 652
Name: AMAN MOURYA
Roll no: 1908390100010
Faculty In-charge: Miss. Richa Prakash
1|Page
Table of Contents
S.No Title Page

1 Write an HTML code to display the following time table in a tabular 03
format.
2 Write an HTML code to display your CV on a web page. 06

Write an HTML code to illustrate the usage of the following:
3 10
∙ Ordered List
∙ Unordered List
∙ Definition List
Rewrite question 1 code where: All the text indicating lab is written in
4 green and all the blank cells are filled with orange.
13
5 Write an HTML code to create a login form. On submitting the form, 16
the user should get navigated to a profile page
6 Write an HTML code to demonstrate the usage of inline CSS 19

7 Write an HTML code to demonstrate the usage of internal CSS 20
8 Write an HTML code to demonstrate the usage of external CSS 21
9 Write an HTML code to create a frame having header, navigation and 22
content
2|Page
Experiment 1
Objective: Write an HTML code to display the following time
table in a tabular format.
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
<metaname="viewport"content="width=device-width, initial-
scale=1.0"/>
<styletype="text/css">
tabletd {
border: 1pxsolidblack;
text-align: center;
}
</style>
</head>
<body>
<tablecellspacing="0">
<colgroupspan="2"width="69"></colgroup>
<colgroupwidth="112"></colgroup>
<tr>
<tdcolspan="10"height="21">
<b>B.Tech (Dept. Of Computer Science & Engineering)
Even Semester (2021-22) Time Table</b>
</td>
<td>w.e.f: 17/02/2022</td>
</tr>
<tr>
<tdheight="21"><b>Branch</b></td>
<td><b>Timing</b></td>
<td><b>10:00-10:50</b></td>
<td><b>10:50-11:00</b></td>
<tdrowspan="6">B<br/>R<br/>E<br/>A<br/>K</td>
<td><b>11:50-12:40</b></td>
<td><b>12:40-1:30</b></td>
3|Page
<tdrowspan="6">L<br/>U<br/>N<br/>C<br/>H</td>
<td><b>2:30-3:20</b></td>
<td><b>3:20-4:10</b></td>
<td><b>4:10-5:00</b></td>
</tr>
<tr>
<tdrowspan="6"height="126"><b>CSE-3</b></td>
<td><b>M</b></td>
<td><br/></td>
<td><br/></td>
<tdcolspan="2">KCS 652 (B1) RC KCS 651 (B2) (VS, DS)</td>
<td>KOE 069 (DCS)</td>
<td>KCS 603 (AB)</td>
<td>KCS 601 (VS)</td>
</tr>
<tr>
<td><b>T</b></td>
<td>KCS 602 (RC)</td>
<td>KCS 062 (NT)</td>
<tdcolspan="2">KCS 653 (B1) (AB, DS)</td>
</tr>
<tr>
<td><b>W</b></td>
<td><br/></td>
<td><br/></td>
<tdcolspan="2">KCS 652 (DS)</td>
</tr>
<tr>
<td><b>Th</b></td>
<tdcolspan="2">KCS 653 (B2) (AB, DS)</td>
<td>KNC 602 (VC)</td>
<td><br/></td>
</tr>
<tr>
<td><b>F</b></td>
<tdcolspan="2">KCS 651 (B1) (VS, DS)</td>
4|Page
</tr>
<tr>
<td><b>S</b></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
</tr>
</table>
</body>
</html>
Output:
5|Page
Experiment 2
Objective: Write an HTML code to display your CV on a web page.
<!DOCTYPEhtml>
<html>
<head>
<title>CV – AMAN MOURYA</title>

<style>
table,tr, td {
border: 1px solid black;
border-collapse: collapse;
}
h3{
margin-bottom: -15px;
}
ul{
margin-top: 0px;
}
</style>
</head>
<body>
<div>
<h1>Aman Mourya</h1>
<ahref="mailto:[email protected]"target="_blank">
[email protected] </a>
</div>
<divclass="left"></div>
<divclass="right">
<h3>CV Highlights</h3>
<ul>
<li>Learnt basic Python, JavaScript, HTML, CSS .</li>
<li>Good Communication Skills, Presentation Skills, attitude

towards leadership, authorisation and delegation,conflict resolution
and negotiation and a very good team worker.
</li>
</ul>
<h3>Educational Qualifications</h3>
<table>
<tr>
<th>Qualification</th>
<th>Board</th>
6|Page
<th>Percentage / Grades</th>
<th>Year</th>
</tr>
<tr>
<td>B.Tech</td>
<td>UPTU</td>
<td>75%</td>
<td>2019-23</td>
</tr>
<tr>
<td>Intermediate (Science Stream)</td>
<td>CBSE</td>
<td>81%</td>
<td>2018</td>
</tr>
<tr>
<td>Highschool</td>
<td>CBSE</td>
<td>9.6/10</td>
<td>2016</td>
</tr>
</table>
<h3>Programming Skills:</h3>
<ul>
<li><span></span>HTML, C++, Python, learning java and js
</li>
</ul>
<h3>Personal Information:</h3>
<ul>
<li>A young, determined hard and smart working person. I
believe in task based roles and complete ownership of work.
</li>
<li><span>Hobbies:</span> Reading , Playing Chess ,

Programming.
</li>
</ul>
</div>
</body>
</html>
7|Page
Output:
8|Page
Experiment 3
Objective:Write an HTML code to illustrate the usage of the
following:
 Ordered List
 Unordered List
 Definition List
<!DOCTYPEhtml>
<htmllang="en">
<head>
scale=1.0"/>
<title>List Example</title>
</head>
<body>
<div>
<p>Ordered List Example</p>
<ol>
<li>Apple</li>
<li>Grapes</li>
<li>Pineapple</li>
<li>Mango</li>
<li>Pomegranate</li>
</ol>
</div>
<hr>
<div>
<p>Unordered List Example</p>
<ul>
<li>Apple</li>
<li>Grapes</li>
<li>Pineapple</li>
<li>Mango</li>
<li>Pomegranate</li>
</ul>
</div>
<hr>
<div>
<p>Detailed List Example</p>
<dl>
<dt>Apple</dt>
<dd>An apple is an edible fruit produced by an apple tree
(Malus domestica).</dd>
<dt>Grapes</dt>
9|Page
<dd>
People have cultivated grapes for 8000 years. Grapes come
in a range of colors and types, have been turned
into jams and jellies, and made into wine.
</dd>
<dt>Pineapple</dt>
<dd>
The pineapple is a tropical plant with an edible fruit; it
is the most economically significant plant in the
family Bromeliaceae. The pineapple is indigenous to South
America, where it has been cultivated for many
centuries.
</dd>
<dt>Mango</dt>
<dd>
A mango is an edible stone fruit produced by the tropical
tree Mangifera indica which is believed to have
originated from the region between northwestern Myanmar,
Bangladesh, and northeastern India.
</dd>
<dt>Pomegranate</dt>
<dd>
The pomegranate is a fruit-bearing deciduous shrub in the
family Lythraceae, subfamily Punicoideae, that grows
between 5 and 10 m tall. The pomegranate was originally
described throughout the Mediterranean region.
</dd>
</dl>
</div>
</body>
</html>
10 | P a g e
Output:
11 | P a g e
Experiment 4
Objective:Rewrite question 1 code where:
All the text indicating lab is written in green and all the blank
cells are filled with orange.
<!DOCTYPEhtml>
<htmllang="en">
<head>
scale=1.0"/>
<styletype="text/css">
tabletd {
border: 1pxsolidblack;
text-align: center;
}
.blank {
background-color: orange;
}
.green {
color: green;
}
</style>
</head>
<body>
<tablecellspacing="0">
<tr>
<tdcolspan="10"height="21">
<b>B.Tech (Dept. Of Computer Science & Engineering)
Even Semester (2021-22) Time Table</b>
</td>
<td>w.e.f: 17/02/2022</td>
</tr>
<tr>
12 | P a g e
<tdheight="21"><b>Branch</b></td>
<td><b>Timing</b></td>
<td><b>10:00-10:50</b></td>
<td><b>10:50-11:00</b></td>
<tdrowspan="7">B<br/>R<br/>E<br/>A<br/>K</td>
<td><b>11:50-12:40</b></td>
<td><b>12:40-1:30</b></td>
<tdrowspan="7">L<br/>U<br/>N<br/>C<br/>H</td>
<td><b>2:30-3:20</b></td>
<td><b>3:20-4:10</b></td>
<td><b>4:10-5:00</b></td>
</tr>
<tr>
<tdrowspan="6"height="126"><b>CSE-3</b></td>
<td><b>M</b></td>
<tdclass="blank"><br/></td>
<tdcolspan="2"class="green">KCS 652 (B1) RC KCS 651 (B2)
(VS, DS)</td>
</tr>
<tr>
<td><b>T</b></td>
<tdcolspan="2"class="green">KCS 653 (B1) (AB, DS)</td>
</tr>
<tr>
<td><b>W</b></td>
<tdcolspan="2"class="green">KCS 652 (DS)</td>
</tr>
<tr>
<td><b>Th</b></td>
<tdcolspan="2"class="green">KCS 653 (B2) (AB, DS)</td>
13 | P a g e
</tr>
<tr>
<td><b>F</b></td>
<tdcolspan="2"class="green">KCS 651 (B1) (VS, DS)</td>
</tr>
<tr>
<td><b>S</b></td>
</tr>
</table>
</body>
</html>
Output:
14 | P a g e
Experiment 5
Objective:Write an HTML code to create a login form. On

submitting the form, the user should get navigated to a profile
page.
<!DOCTYPEhtml>
<htmllang="en">
<head>
scale=1.0"/>
<linkrel="stylesheet"href="loginstyle.css"/>
<title>Login</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Franklin Gothic Medium", "Arial Narrow",
Arial, sans-serif;
}
/* Bordered form */
form {
border: 3pxsolid#f1f1f1;
width: 400px;
/* text-align: center; */
margin: auto;
margin-top: 40px;
}
/* Full-width inputs */
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px20px;
margin: 8px0;
display: inline-block;
border: 1pxsolid#ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
15 | P a g e
button {
background-color: #ffb700;
color: white;
padding: 14px20px;
margin: 8px0;
border: none;
cursor: pointer;
width: 100%;
}
/* Add a hover effect for buttons */
button:hover {
opacity: 0.8;
}
.imgcontainer {
text-align: center;
margin: 24px012px0;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
@mediascreen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
}
</style>
</head>
<body>
<form>
<divclass="imgcontainer">
<h2>LOGIN</h2>
</div>
<divclass="container">
<formaction="profile.php">
<labelstyle="margin: 0px 0px 0px 5px"><b>Email
Address</b></label>
<inputtype="text"placeholder="Enter
Email"name="email"required/>
<labelstyle="margin: 0px 0px 0px
5px"><b>Password</b></label>
<inputtype="password"placeholder="Enter
Password"name="psw"required/>
16 | P a g e
<buttonid="loginBtn"type="submit">Login</button>
</form>
</div>
</form>
</body>
</html>
Output:
17 | P a g e
Experiment 6
Objective:Write an HTML code to demonstrate the usage of

inline CSS.
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
scale=1.0">
<title>Document</title>
</head>
<body>
<h2style="color: red; margin: 10px;">This is h2 heading</h2>
<pstyle="background-color: blue; font-family: sans-serif;">This is
a paragraph which is background-color and font change using inline
css</p>
</body>
</html>
Output:
18 | P a g e
Experiment 7

internal CSS.
<!DOCTYPEhtml>
<htmllang="en">
<head>
scale=1.0"/>
<style>
h2 {
color: red;
margin: 10px;
}
p {
color: white;
background-color: blue;
font-family: sans-serif;
}
</style>
</head>
<body>
<h2>This is h2 heading</h2>
<p>This is a paragraph which is background-color and font change
using inline css</p>
</body>
</html>
19 | P a g e
Experiment 8

external CSS.
Index.html
<!DOCTYPEhtml>
<htmllang="en">
<head>
scale=1.0"/>
<linkrel="stylesheet"href="externalcss.css"/>
</head>
<body>
<h2>This is h2 heading</h2>
<p>This is a paragraph which is background-color and font change
using inline css</p>
</body>
</html>
Externalcss.css
h2 {
color: red;
margin: 10px;
}
p {
color: white;
background-color: blue;
font-family: sans-serif;
}
20 | P a g e
Experiment 9
Objective:Write an HTML code to create a frame having

header, navigation and content.
<!DOCTYPEhtml>
<html>
<head>
<title>HTML Frames</title>
</head>
<framesetrows="10%,80%,10%">
<framename="top"src="/html/top_frame.html"/>
<framename="main"src="/html/main_frame.html"/>
<framename="bottom"src="/html/bottom_frame.html"/>
<noframes>
<body>
This browser does not support frames.
</body>
</noframes>
</frameset>
</html>
21 | P a g e

Web Technology Lab: For The Academic Year 2021-22

Uploaded by

Copyright:

Available Formats

Web Technology Lab: For The Academic Year 2021-22

Uploaded by

Document Information

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

Web Technology Lab: For The Academic Year 2021-22

Uploaded by

Copyright:

Available Formats

Web Technology Lab

For the academic year 2021-22

Rajkiya Engineering College, Kannauj

Name: AMAN MOURYA

Roll no: 1908390100010

Faculty In-charge: Miss. Richa Prakash

S.No Title Page

2 Write an HTML code to display your CV on a web page. 06

6 Write an HTML code to demonstrate the usage of inline CSS 19

<title>CV – AMAN MOURYA</title>

<li>Good Communication Skills, Presentation Skills, attitude

<li><span>Hobbies:</span> Reading , Playing Chess ,

Objective:Write an HTML code to create a login form. On

/* Set a style for all buttons */

Objective:Write an HTML code to demonstrate the usage of

Objective:Write an HTML code to demonstrate the usage of

Objective:Write an HTML code to demonstrate the usage of

Objective:Write an HTML code to create a frame having

You might also like