20BCE2904 - Lab Assignment 2

School of Computer Science and
Engineering
CSE3002-Internet and Web Programming
Fall 2022-23
Slot: - L19 + L20
Lab Assignment 2
HTML and CSS
Submitted By:
BIJAN SHRESTHA
B.Tech Computer Science and Engineering
Reg No. : 20BCE2904
SUBMITTED TO:
PROF. Dr. Rajkumar R
Asst. Prof. Grade 2
School of Computer Science and Engineering
VIT University
Vellore-14, INDIA
Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

ACTIVITY 2 Frames in HTML
AIM: To learn about HTML and CSS
1. Create a webpage which should divide page into two equal frames
Code:
Output:

2. Create a webpage and divide it to frames as follows
Frame Frame 2
1 Frame
3
Code:
Output:

3. Create a webpage divide into frames as follows
Code:
Output:

4. Create a web page having two frames; one contains links and another with
contents of the link. When link is clicked appropriate contents should be
displayed on frame.
Code:
Output:

5. Design a form using all input type
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
</head>
<body>
<form action="post">
<h1>All types of Input</h1>
Button: <input type="button" value="Hello Bijan"><br><br>
Check Box: <input type="checkbox" id="1"><input type="checkbox" id="2"><input
type="checkbox" id="3"> <br><br>
color: <input type="color"><br><br>
Date: <input type="date"><br><br>
datetime-local: <input type="datetime-local"><br><br>
Email: <input type="email" value="email"><br><br>
files: <input type="file"><br><br>
Hidden: <input type="hidden"><br><br>
Image: <input type="image"><br><br>
Month: <input type="month"><br><br>
Number: <input type="number"><br><br>
Password: <input type="password"><br><br>
Radio: <input type="radio"><input type="radio"><input type="radio"><br><br>
Value Range: <input type="range"><br><br>
Reset: <input type="reset" value="Reset"><br><br>
Search: <input type="search"><br><br>
Submit: <input type="submit" value="Submit"><br><br>
Tel: <input type="tel"><br><br>
Text: <input type="text"><br><br>
Time: <input type="time"><br><br>
URL: <input type="url"><br><br>
Week: <input type="week"><br><br>
</form>
</body>
</html>

Output:
6. Create a form accepting

Name
Register number
Course code
Date of registration
Email id
Submit button
Code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<h1>Form</h1>
<label for="name">Name</label>
<input type="text" id="name" ><br><br>
<label for="regno">Registration No.</label>
<input type="text" id="regno"><br><br>
<label for="course">Course Code</label>
<select name="course" id="course">
<option value="CSE1001">CSE1001</option>
<option value="other">Other</option>
</select><br><br>
Date of Registration: <input type="date"><br><br>
<label for="mail">Email Id</label>
<input type="email" id="mail"><br><br>
<input type="button" value="Submit">
</form>
</body>
</html>
Output:

ACTIVITY 2 Form with HTML and CSS
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Registration Form
</title>
<style>
body {
background-color: rgb(4, 102, 248);
font-family: Verdana;
text-align: center;
}
form {
background-color: #fff;
max-width: 500px;
border-radius: 50px;
margin: 50px auto;
padding: 30px 20px;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}
.form-control {
text-align: left;
margin-bottom: 25px;
}
/* Styling form-control Label */

.form-control label {
display: block;
}
/* Styling form-control input,

select, textarea */
.form-control input,
.form-control select,
.form-control textarea {
border: 1px solid #777;
border-radius: 5px;
font-family: inherit;
padding: 10px;
display: block;

width: 95%;
}
/* Styling form-control Radio

button and Checkbox */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
}
/* Styling Button */
button {
background-color: lightblue;
border: 1px solid rgb(0, 217, 255);
border-radius: 5px;
font-size: 25px;
display: block;
width: 100%;
margin-top: 50px;
}
</style>
</head>
<body>

<form id="form">
<img src="logo.jpg" alt="no image" width="150" height="150">
<h1>VIT Registration Form</h1>
<div class="form-control">
<label for="name" id="label-name">
Name
</label>
<input type="text" id="name" placeholder="Enter your name" />
</div>
<label for="email" id="label-email">
Email
</label>
<input type="email" id="email" placeholder="Enter your email" />
</div>
<label>
Gender
</label>
<label for="recommed-1">
<input type="radio" id="recommed-1" name="recommed">Male</input>
</label>

<input type="radio" id="recommed-2"name="recommed">Female</input>
</label>
<input type="radio" id="recommed-3" name="recommed">Other</input>
</label>
</div>
<label for="DOB" id="Date of bith">
Date of Birth
</label>
<input type="Date" id="Date of birth" placeholder="DOB" />
</div>
<label for="phone" id="label-phone">
Phone Number
</label>
<input type="number" id="number" placeholder="(+91)" />
</div>
<label for="address" id="label-address">
Address
</label>
<input type="text" id="address" placeholder="Enter your address" />
</div>
<label for="username" id="label-username">
Username
</label>
<input type="text" id="username" placeholder=" Your registration number" />
</div>
<label for="password" id="label-password">
Password
</label>
<input type="Password" id="Password" placeholder="Enter your password" />
</div>
<label for="branch" id="label-branch">
Branch
</label>
<select name="branch" id="branch">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="CIVIL">CIVIL</option>
<option value="other">Other</option>
</select>
</div>
<label for="branch" id="label-branch">

Upload Image:
</label>
<input type="file">
</div>
<input type="checkbox"name="inp"> I agree Rules and Regulations.
</div>
<label for="comment">
Comments
</label>
<textarea width="40" height="50" name="comment" id="comment" placeholder="Enter
your comment here">
</textarea>
</div>
<button type="submit" value="submit">

Submit
</button>
<button type="reset" value="reset">
Reset
</button>
</form>
</body>
</html>

Output:

ACTIVITY 3 HTML and CSS
Color Picker and Video
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<label for="color">Select your color: </label>
<input type="color" name="color" id="color"> <br> <br>
<video width="320" height="240" controls
src="https://www.youtube.com/watch?v=4OiXfDdbtnM&t=138s&ab_channel=ScenicRelaxation"
type="video/mp4">No video</video>
</form>
</body>
</html>
Output:

Paragraph with CSS.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-color: blue;
}
h1{
color: white;
text-align: center;
}
p{
font-family: 'Times New Roman', Times, serif;
font-size: 20px;
}
</style>
</head>
<body>
<h1>my first CSS example</h1>
<p>This is Paragraph<br>
Hello Bijan Shrestha
</p>
</body>
</html>
Output:

Border.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p.dotted{border-style: dotted;}
p.dash{border-style: dashed;}
p.solid{border-style: solid;}
p.double{border-style: double;}
p.groove{border-style: groove;}
p.ridge{border-style: ridge;}
p.inset{border-style: inset;}
p.outset{border-style: outset;}
p.none{border-style: none;}
p.hidden{border-style: hidden;}
p.mix{border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style property</h2>
<p>This property specifies what kind of border to display: </p>
<p class="dotted">A dotted border. </p>

<p class="dash">A dashed border. </p>
<p class="solid">A solid border. </p>
<p class="double">A double border. </p>
<p class="groove">A groove border. </p>
<p class="ridge">A ridge border. </p>
<p class="inset">An inset border. </p>
<p class="outset">An ouset border. </p>
<p class="none">A none border. </p>
<p class="hidden">A hidden border. </p>
<p class="mix">A mix border. </p>
</body>
</html>

Output:
Table, Marque, strike, blink.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table{
border-collapse: collapse;
}
table, td, th{
border: 2px solid blue;
}
</style>
</head>
<body>
<h2>let the border collapse:</h2>

<table>
<tr>
<th>First Name:</th>
<th>Last Name:</th>
</tr>
<tr>

<td><img src="" alt=""></td>
<td>Bijan Shrestha</td>
</tr>
<tr>
<td>Anmol</td>
<td>guragain</td>
</tr>
</table>
<p><b>Note:</b> if a !DocTYPE is not specified</p>
<marquee>Bijan Shrestha</marquee>
<strike>vit</strike>
<blink><h1>VIT</h1></blink>
</body>
</html>
Output:

Paragraph Implementation.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: system-ui;
}
.labParagraph {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.labParagraph h1,
.labParagraph h2 {
margin: 0;
}
.labParagraph p {
margin: 0;
}
h2 {
opacity: .5;
}
.labParagraph-inner {
display: inline-flex;
flex-direction: column;
gap: 16px;
min-width: 350px;
width: fit-content;
max-width: 100%;
}
.labParagraph-title {
width: fit-content;
}

.labParagraph-description {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 90%;
width: 0;
max-width: 90%;
text-align: justify;
}
.labParagraph-description-icon {
align-self: stretch;
display: flex;
align-items: center;
min-width: 96px;
}
.labParagraph-description path {
fill: #f8b807;
}
</style>
</head>
<body>
<div class="labParagraph">
<div class="labParagraph-inner">
<div class="labParagraph-title">
<h2>IWP lab</h2>
<h1>Paragraph</h1>
</div>
<div class="labParagraph-description">
<div class="labParagraph-description-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">

<path xmlns="http://www.w3.org/2000/svg" d="M21.85 30.45 33.5 18.8 31.1 16.45
22 25.55 16.9 20.5 14.45 22.95ZM24 45Q16.55 43.1 11.775 36.45Q7 29.8 7 21.85V9.25L24 2.9L41.1
9.25V21.85Q41.1 29.8 36.275 36.45Q31.45 43.1 24 45Z"/>
</svg>
</div>
<p>
Hello Guys wel come to VIT
</p>
</div>
</div>
</div>

</body>
</html>
Output:

ACTIVITY 5 HTML 5 INTRODUCTION
1) Design a website using following HTML 5 tags
i. <figure>
ii. <header>
iii. <footer>
iv. <audio>
v. <embed>
vi. <canvas>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>web Page</title>
<style>
footer {
text-align: center;
padding: 3px;
color: white;
text-decoration: none;
}
header {
text-align: center;
padding: 3px;
color: rgb(240, 6, 6);
}
</style>
</head>
<body>
<header>
<h1>Header Tag</h1>
<p>Assignment</p>
<p>Hello I am Bijan</p>
</header>
<h1>The audio element</h1>

<p>Click on the play button to play a sound:</p>
<audio controls>
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<h1>The figure and figcaption element</h1>
<figure>
<img src="img.jpg" alt="logo" style="width:100%">
<figcaption>Fig.1 - Hotel Scene</figcaption>
</figure>
<h1>The embed element</h1>

<embed type="text/html" src="form.html" width="500" height="200">
<h1>The canvas element</h1>

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>
<footer>
<p>Author: Bijan Shrestha<br>
<a href="bijan.shrestha7170@gmail.com">GMAIL</a></p>
</footer>
</body>
</html>
Output:

2) Apply HTML 5 validation for form of ‘activity-4’
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Registration Form
</title>
<style>
body {
font-family: Verdana;
text-align: center;
}
form {
max-width: 500px;
margin: 50px auto;
padding: 30px 20px;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}
.form-control {
text-align: left;
}
/* Styling form-control Label */

.form-control label {
display: block;
}
/* Styling form-control input,

select, textarea */
.form-control input,
.form-control select,
.form-control textarea {
border-radius: 5px;
padding: 10px;
display: block;
width: 95%;

}
/* Styling form-control Radio

button and Checkbox */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
width: auto;
}
/* Styling Button */
button {
background-color: lightblue;
border-radius: 5px;
font-size: 25px;
display: block;
width: 100%;
margin-top: 50px;
}
</style>
</head>
<body>

<form id="form">
<h1>VIT Form</h1>
<label for="name" id="label-name">
Name
</label>
<input type="text" id="name" placeholder="Enter your name" required />
</div>
<label for="email" id="label-email">
Email
</label>
<input type="email" id="email" placeholder="Enter your email" required />
</div>
<label>
Gender
</label>
<input type="radio" id="recommed-1" name="recommed"> Male
<input type="radio" id="recommed-2"name="recommed"> Female
<input type="radio" id="recommed-3" name="recommed"> Other</label>

</div>
<label for="DOB" id="Date of bith">
Date of Birth
</label>
<input type="Date" id="Date of birth" placeholder="DOB" />
</div>
<label for="phone" id="label-phone">
Phone Number
</label>
<input type="number" id="number" placeholder="(+91)" required/>
</div>
<label for="address" id="label-address">
Address
</label>
<input type="text" id="address" placeholder="Enter your address" required/>
</div>
<label for="username" id="label-username">
Username
</label>
<input type="text" id="username" placeholder=" Your registration number"
required/>
</div>
<label for="password" id="label-password">
Password
</label>
<input type="Password" id="Password" placeholder="Enter your password" required
/>
</div>
<button type="submit" value="submit">

Submit
</button>
<button type="reset" value="reset">
Reset
</button>
</form>
</body>
</html>

Output:

ACTIVITY 6 CSS STYLING LISTS
1) Design a web page with styling list
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>style list</title>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>

<ul class="a">
<li>Bijan Shrestha</li>
<li>Anurag Karki</li>
<li>Pramit Karki</li>
</ul>
<ul class="b">
</ul>
<p>Example of ordered lists:</p>

<ol class="c">

</ol>
<ol class="d">
</ol>
</body>
</html>
Output:

ACTIVITY 7 ROUNDED CORNERS
1) Write CSS code to create rounded corners in your web page
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>corner style</title>
<style>
#rcorners1 {
background: #05e0e7;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border: 2px solid #faaf0c;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
background: url(download.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background color:</p>

<p id="rcorners1">Hello Bijan Shrestha</p>
<p>Rounded corners for an element with a border:</p>
<p>Rounded corners for an element with a background image:</p>
</body>

</html>
Output:

ACTIVITY 8 DROP DOWN LIST
1) Write CSS code to design a web page with drop down menu
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>menu down</title>
<style>
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #0a9df1;}

</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Course Code</button>
<div class="dropdown-content">
<a href="#">CSE1001</a>
<a href="#">CSE1002</a>
<a href="#">CSE1003</a>
<a href="#">CSE1004</a>
<a href="#">CSE1005</a>
</div>
</div>
</body>
</html>
Output:

ACTIVITY 10 STYLING TABLE WITH CSS
1) Design a table using HTML and CSS code
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table and CSS</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
</style>
</head>
<body>
<center>
<h2>Time Table</h2>
<p>VIT Class time table</p>
</center>
<table style="width:100%">
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>

<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Output:

ACTIVITY 11 STYLING TABLE WITH CSS
Create java script to do the following
1) Prompt user for his name
2) Use popup to welcome by name
2) Display current date on page
3) Put some useful advice in the status line of browser
1) Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>prompt</title>
</head>
<body>
<script type="text/javascript">
var name = window.prompt("Enter your name: ");
alert("Your name is " + name);
</script>
</body>
</html>
Output:

2) Code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<form name="alertform">
Enter your name:
<input type="text" name="yourname">
<input type="button" value= "Go" onClick="window.alert('Hello ' +
document.alertform.yourname.value);">
</form>
</body>
</html>
Output:

3)Code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Date And Time</h2>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">Display
Date and Time.</button>
<p id="demo"></p>
</body>
</html>
1)
Output:
3)Code:
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Window status Property
</title>

function UpdateStatusBar (over) {
if (over)
window.status = "The mouse is over the text.";
else

window.status = window.defaultStatus;
}
function ChangeDefStatus () {
window.defaultStatus = "Default Status.";
}
</script>
</head>
<body>
<div onmousemove="UpdateStatusBar(true);"
onmouseout="UpdateStatusBar(false);">
A message is seen on the status bar at the bottom
of the page when mouse is placed over the text
</div><br>
<button onclick="ChangeDefStatus();">
Change default status
</button>
<br><br>
<a href="dateandtime.html">
When mouse move over, the browser
will display the URL
</a>
</body>
</html>
Output:

Addition, Multiplication, subtraction, and division
Code:
<!doctype html>
<html>
<head>
<script>
var numOne, numTwo, res, temp;
function fun()
{
numOne = parseInt(document.getElementById("one").value);
numTwo = parseInt(document.getElementById("two").value);
if(numOne && numTwo)
{
temp = document.getElementById("res");
temp.style.display = "block";
res = numOne + numTwo;
document.getElementById("add").value = res;
res = numOne - numTwo;
document.getElementById("subtract").value = res;
res = numOne * numTwo;
document.getElementById("multiply").value = res;
res = numOne / numTwo;
document.getElementById("divide").value = res;
}
}
</script>
</head>
<body>
<p id="input">Enter First Number: <input id="one">

<br/><br/>
Enter Second Number: <input id="two"></p>
<p><button onclick="fun()">Add, Subtract, Multiply, Divide</button></p>
<p id="res" style="display:none;">
Addition Result = <input id="add"><br/><br/>
Subtraction Result = <input id="subtract"><br/><br/>
Multiplication Result = <input id="multiply"><br/><br/>
Division Result = <input id="divide"></p>
</body>
</html>

Output:
Alert
Code:
<html>
<head><title>My Page</title></head>
<body>
<p>
<a href="alert.html">Bijan Shrestha</a>
<br />
<a href="alert.html"
onMouseover="window.alert('Hello Bijan Shrestha');">
Bijan Shrestha</A>
</p>
</body>
</html>
Output:

Marks with total, Average and result
Code:
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript">
function calc(){
var m1,m2,m3,avg = 0,total = 0, result = "",grade = "";
m1 = parseInt(document.form1.wp.value);
m2 = parseInt(document.form1.ap.value);
m3 = parseInt(document.form1.cg.value);
m4 = parseInt(document.form1.bp.value);
m5 = parseInt(document.form1.cp.value);
m6 = parseInt(document.form1.dp.value);
total = m1+m2+m3+m4+m5+m6;
avg = total/6;
if( m1 < 35 || m2 < 35 || m3 < 35 || m4 < 35 || m5 < 35 || m6 < 35){
result = "fail";grade = "D";
}
else if(avg >= 75){
result = "Distinction";grade = "A+";
}
else if(avg >= 60 && avg < 75){
result = "First class";grade = "A";
}else if(avg >= 50 && avg < 60){
result = "Second class";grade = "B";
}else if(avg >=35 && avg < 50){
result = "Pass class";grade = "C";}
else if (avg < 35){
result = "Fail";Grade = "D";
}
document.form1.result.value = result;
document.form1.grade.value = grade;
document.form1.total.value = total;
document.form1.average.value = avg;
}
</script>
</head>
<body>
<form name = "form1"><table border = "1">
<tr><td> Student Name</td><td><input type = "text" /></td>
</tr><tr><td colspan = "2" align = "center">Subject Marks</td>
</tr><tr><td>Web Programming</td><td><input type = "text" name = "wp" /></td>
</tr><tr><td>Computer Graphics</td><td><input type = "text" name = "cg" /></td>
</tr><tr><td>Java Programming</td><td><input type = "text" name = "ap" /></td>
</tr><tr><td>C Programming</td><td><input type = "text" name = "bp" /></td>
</tr><tr><td>C++ Programming</td><td><input type = "text" name = "cp" /></td>

</tr><tr><td>python Programming</td><td><input type = "text" name = "dp" /></td>
</tr><tr><td colspan = "2" align = "center"><input type = "button" onclick = "calc()"
value = "calculate" /></td> </tr>
<tr><td>Total</td><td><input type = "text" name = "total"/></td>
</tr><tr><td>Average</td><td><input type = "text" name = "average" /></td>
</tr><tr><td>Result</td><td><input type = "text" name = "result" /></td>
</tr><tr><td>Grade</td><td><input type = "text" name = "grade"/></td>
</tr>
</table>
</form>
</body>
</html>
Output:
Redirect
Code:
<html>
<head>
function Redirect() {
window.location="http://www.vit.ac.in";
}
</script>
</head>
<body>

<p>Click the following button, you will be redirected to home page.</p>
<form>
<input type="button" value="Redirect Me" onclick="Redirect();" />
</form>
</body>
</html>
Output:
Javascript string
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript String toLowerCase() and toUpperCase() function</title>
</head>
<body>
var str = "Hello Bijan Shrestha";
document.write(str.toUpperCase() + "<br />");
document.write(str.toLowerCase());
</script>
</body>
</html>
Output:

20BCE2904 - Lab Assignment 2

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

20BCE2904 - Lab Assignment 2

Uploaded by

Copyright:

Available Formats

School of Computer Science and

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

6. Create a form accepting

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

<input type="button" value="Submit">

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

/* Styling form-control Label */

/* Styling form-control input,

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

/* Styling form-control Radio

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

<button type="submit" value="submit">

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

<p class="dotted">A dotted border. </p>

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Table, Marque, strike, blink.

<h2>let the border collapse:</h2>

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

<h1>The audio element</h1>

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

<h1>The embed element</h1>

<h1>The canvas element</h1>

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

/* Styling form-control Label */

/* Styling form-control input,

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

/* Styling form-control Radio

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

<button type="submit" value="submit">

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

<p>Example of unordered lists:</p>

<p>Example of ordered lists:</p>

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

<p>Rounded corners for an element with a specified background color:</p>

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #0a9df1;}

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904

Bijan Shrestha CSE3002-IWP Lab Reg no. 20BCE2904