Exercises:: Assignment-1

SOUHARDYA SARKAR CS_2171027
Assignment-1
Exercises:
1. Definition: Create a webpage which provides the importance of “what is
computer science and engineering?" with use of all the text formatting tags,
heading tags, paragraph tags and horizontal row tag.
File Name: a_1.html
Code of file
<!DOCTYPE html>
<html>
<head>
<title>2171027_Ex.1</title>
</head>
<body bgcolor="#ece435">
<font color="red" face="Time New Roman">
<br>
<hr color="Blue" size="5">
<h1>What is Computer Science and Engineering?</h1>
<hr color="Blue" size="2"></font>
<b><u>Computer Science and Engineering</u></b> is the study of computer in overall,

<em>i.e.,</em> the Hardware as well as the Software.<br>
<p><font face="comic sans ms" color="brown">One of the most sought after courses
amongst engineering students,<i> Computer Science Engineering (CSE)</i> is an academic
programme which integrates the field of Computer Engineering and Computer Science. The
programme, which emphasises the basics of computer programming and networking,
comprises a plethora of topics. The said topics are related to <sammp>computation,
IP-ASSIGNMENT 1(MID-SEM1) 1
algorithms, programming languages, program design, computer software, computer hardware,

etc.</sammp></font></p>
<font face="jokerman" color="purple"><p>Computer science engineers are involved in

many aspects of computing, from the design of individual microprocessors, personal
computers, and supercomputers to circuit designing and writing software that powers
them.</p></font>
<font face="candara" color="brown"><p>The course is offered by technical institutes across

<var>India</var> and Abroad at the
<pre>1. UG (Undergraduate)
2. PG (Postgraduate)</pre> level where students are awarded <big>BTech and MTech</big>

degree respectively. Students pursuing the course will be taught about design,
implementation, and management of information system of <small>computer
hardware and software.</small></p></font>
<hr size="4" color="green">
<strong><font face="Monotype Corsiva" size="14">Skills Required are:</font></strong>
<font face="comic sans ms" color="brown">
<h2>Analytical Skills</h2>
<h3>Good Programming Skills</h3>
<h3>Strong Data Structures and Algorithms skills</h3>
<h4>Basic web development knowledge</h4>
<h5>Basics of Machine Learning</h5>
<h5>Basics of security, vulnerabilities, and cryptography</h5>
<h6>Ability to grasp the knowledge quickly</h6></font>
<hr size="4" color="green">
</body>
</html>
Screenshot of output
2. Definition: Mahi wants to create a webpage for ICT Branches & she wants to
add three branches as BDA, CBA & CS. Also, she wants to add dynamic links
as per given:
BDA: https://www.ict.gnu.ac.in/content/about-1
CBA: https://www.ict.gnu.ac.in/content/about
CS: https://www.ict.gnu.ac.in/content/about-course
Create a webpage as per given scenario & open every linked page in the
new tab.
File Name: a_2.html
Code of file
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="black">
<h1><font color="Red" face="Algerian">ICT Branches</font></h1>
<ol style="color: Blue">
<font size="5em">
<li><a href="https://www.ict.gnu.ac.in/content/about-1" target="_blank"><dfn

title="Big Data Analytics">BDA</dfn></a></li>
<li><a href="https://www.ict.gnu.ac.in/content/about" target="_blank"><dfn

title="Cloud Based Applications">CBA</dfn></a></li>
<li><a href="https://www.ict.gnu.ac.in/content/about-course" target="_blank"><dfn

title="Cyber Security">CS</dfn></a></li>
</ol>
</body>
</html>
3. Definition: Sam needs to store 9 photos of his childhood in a webpage for

future memory. How can he build a webpage with 9 images as per following?
Image - 1
Image - 2 Image - 3
Image - 4 Image - 5 Image - 6
Image - 7 Image - 8 Image – 9
File Name: a_3.html
Code of file
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table cellspacing="10" cellpadding="10">
<tr>
<td><img src="D:\Souhardya\Snapseed\PSX_20190517_213042.jpg"
height="350px" width="550px"></td>
<td><img src="D:\Souhardya\Snapseed\IMG_20190417_173854-01.jpeg"
</tr>
<tr>
<td><img src="D:\Souhardya\Snapseed\IMG_20190418_070117-03.jpg"
</tr>
<tr>
</tr>
</table>
</body>
</html>
4. Definition: Enlist the types of lists in HTML. Implement a HTML code for a
given nested list.
File Name: a_4.html
Code of file
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul type="none">
<li>Verbs:</li>
<ol type="1">
<li>Conjugation</li>
<ol type="a">
<li>Present Tense</li>
<ol type="i">
<li>3 Letter Verbs</li>
<ol type="1">
<li>Regular</li>
<ol type="a">
<li>Middle letter is a consonant</li>
<li>See Chart in notebook for conjugations</li>
<li>"I form" determines conjugation and is different from

infinitive form.</li>
<li>You(m) - They switches harakes of the first two

letters.</li>
<li>Exceptions</li>
<ol type="i">
<li>2ija (to come) has alif masourah</li>
<ol type="1">
<li>Skips alif when conjugating</li>
<li>Alif masourah turns into a ya when

conjugating</li>
<li>You (p) and they switches "ya" with

"wow"</li>
</ol>
</ol>
</ol>
<li>Irregular</li>
<ol type="a">
<li>Middle letter is alif or consonant with shaddeh +

fatha</li>
<ol type="i">
<li>Alif - swithces to wow or ya</li>
<li>Shaddeh - fatha switches to kasra</li>
</ol>
<li>See Chart in notebook for conjugations</li>
<li>Exceptions</li>
</ol>
</ol>
</ol>
<li>Past Tense</li>
<li>Present Continuous</li>
<li>Past Continuous</li>
<li>Future Tense</li>
<li>Far Past</li>
</ol>
</ol>
<li>Imperative</li>
</ul>
</body>
</html>
5. Definition: Differentiate between <td> & <th>. Implement a HTML code for
given table structure.
Make images clickable & your image will be redirect to the next page, which
shows the description as per following:
1 image: Add description about attributes of <td> & <th> tags.

st
2 image: Add description about importance of <thead> & <tfoot> tags.

nd
File Name: a_5.html , a_5.1.html, a_5.2.html
Code of file
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="5" cellspacing="5">
<thead>
<tr>
<th colspan="4" align="center">Purchased Equipments (June,2006)</th>
</tr>
<tr align="center">
<th rowspan="2">Item Num#</th>
<th rowspan="2">Item Picture</th>
<th>Item Description</th>
<th>Price</th>
</tr>
<tr>
<th>Shipping Handling, Installation, etc</th>
<th>Expense</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1.</td>
<td rowspan="2"><a href="a_5.1.html"><img

src="C:\Users\hp\Documents\GUNI ICT\IP\a_5.png"></a></td>
<td>IBM Clone Computer</td>
<td>$ 400.00</td>
</tr>
<tr>
<td>Shipping Handling, Installation, etc</td>
<td>$ 20.00</td>
</tr>
<tr>
<td rowspan="2">2.</td>
<td rowspan="2"><a href="a_5.2.html"><img

src="C:\Users\hp\Documents\GUNI ICT\IP\a_5.1.png"></a></td>
<td>1 GB RAM Module for Computer</td>
<td>$ 50.00</td>
</tr>
<tr>
<td>Shipping Handling, Installation, etc</td>
<td>$ 14.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4" align="center">Purchased Equipments (June,2006)</th>
</tr>
</tfoot>
</table>
</body>
</html>
Code 5.1
<!DOCTYPE html>
<html>
<head>
<title>2171027_Ex.5.1</title>
</head>
<body>
<samp style="font-size: 2.5em">
Attributes of <td> & <th><br><br>
<samp>colspan</samp><br>
Description:- This tag is used to merge cols in a particular row into a single row.
<br><br>
<samp>rowspan</samp><br>
Description:- This tag is used to merge rows in a particular column into a single column.
<br><br>
<samp>headers</samp><br>
Description:- This tag is used to define relation between one or more cell or header cells.
</samp>
</body>
</html>
Code 5.2
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<samp style="font-size: 2.5em">
<thead><br>
Description:- This tag is used to define a table head section. It is of Importance when we have to
make a particular section of the Table displayed at the <big><b>TOP</b></big> of every content in the
table (just like a heading of a Chapter).
<br><br>
<tfoot><br>
Description:- This tag is used to define a table footer section. It is of Importance when we have to
make a particular section of the Table displayed at the <big><b>BOTTOM</b></big> of every content in
the table (just like a heading of a Chapter)
</samp>
</body>
</html>
6. Definition: Hypex.pvt.ltd wants to create form for their employees. Consider the
given details for “Employee Details” form & implement a HTML code for
the same. (Note: Add input fields in right column according to label of
left column)
Employee Details
Name
Email
Contact No.
Gender
City (Create drop down list with 10 cities of Gujrat)
Address
Hobbies
Photo (Add Picture)
Resident Proof (Add File)
Submit Cancel
File Name: a_6.html
Code of file
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<table border="4" cellpadding="4" cellspacing="0">
<tr>
<th colspan="2">Employee Details</th>
</tr>
<tr>
<td height="30px" width="50%"><label id="name">Name</label></td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td><label id="email">Email</label></td>
<td><input type="Email" id="email"></td>
</tr>
<tr>
<td><label id="num">Contact No.</label></td>
<td><input type="number" id="num"></td>
</tr>
<tr>
<td><label id="gen">Gender</label></td>
<td><input type="radio" id="gen" value="Male">Male<br><input type="radio"

id="gen" value="Female">Female</td>
</tr>
<tr>
<td><label id="city">City</label></td>
<td><select>
<option>select</option>
<option>Ahmedabad</option>
<option>Gandhinagar</option>
<option>Vadodara</option>
<option>Jamnagar</option>
<option>Rajkot</option>
<option>Bhavnagar</option>
<option>Porbandar</option>
<option>Mehsana</option>
<option>Dwarka</option>
<option>Bhuj</option>
</select></td>
</tr>
<tr>
<td><label id="add">Address</label></td>
<td><textarea id="add" rows="5" cols="30" placeholder="Enter

Address"></textarea></td>
</tr>
<tr>
<td><label id="hob">Hobbies</label></td>
<td><textarea id="add" rows="5" cols="30"></textarea></td>
</tr>
<tr>
<td><label id="pic">Photo</label></td>
<td><input type="file" id="pic" placeholder="(Add Picture)"></td>
</tr>
<tr>
<td><label id="rp">Resident Proof</label></td>
<td><input type="file" id="rp" placeholder="(Add File)"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="submit"><input

type="reset" id="reset" value="Cancel"></td>
</tr>
</table>
</form>
</body>
</html>
7. Definition: Create a mentioned structure using HTML frames & set target
according to following:
Target Area
Gray
Orange
Yellow
(Note: Open gray, orange & yellow colors in target area.)
File Name: a_7.html, a_7.1.html, a_7_grey.html, a_7_orange.html,

a_7_yellow.html
Code of file
<!DOCTYPE html>
<html>
<head>
</head>
<frameset cols="33%,*,33%">
<frameset rows="20%,*,20%,20%">
<frame src=""></frame>
</frameset>
<frameset rows="20%,*,20%,20%">
<frame src="a_7.1.html"></frame>
</frameset>
<frame name="demo"></frame>
</frameset>
</html>
Code 7.1
<!DOCTYPE html>
<html>
<head>
<title>2171027_Ex.7_1</title>
<style type="text/css">
body
font-size: 2.5em;
</style>
</head>
<body>
<a href="a_7_grey.html" target="demo">Gray</a><br>
<a href="a_7_orange.html" target="demo">Orange</a><br>
<a href="a_7_yellow.html" target="demo">Yellow</a>
</body>
</html>
Code 7.1_grey
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="grey">
</body>
</html>
Code 7.1_orange
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="orange">
</body>
</html>
Code 7.3_yellow
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="yellow">
</body>
</html>
8. Definition: Explain different pop-up boxes used in JavaScript with example.
Name Description
Alert Box Opens a pop up box relaying urgent information which the
user must know
Confirm Box Opens a pop up box which asks the User to confirm the
data submission.
Prompt Box Opens a pop up box and asks for user data
File Name: a_8.1.html, a_8.2.html, a_8.3.html

Code of file
Code for Alert Box
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
alert("This is an Alert Box");
</script>
</head>
<body>
</body>
</html>
Code for Confirm Box
<!DOCTYPE html>
<html>
<head>
confirm("Are you sure to submit?");
</script>
</head>
<body>
</body>
</html>
Code for Prompt Box
<!DOCTYPE html>
<html>
<head>
prompt("Enter a Number: ");
</script>
</head>
<body>
</body>
</html>
9. Definition: Write a JavaScript code fir test() using number type parameter
which returns weather passed number is Armstrong or not.
File Name: a_9.html
Code of file
<!DOCTYPE html>
<html>
<head>
function test(n)
{
var t=parseInt(n);
var sum=0;
while(t>0)
{
var a=t%10;
sum+=a*a*a;
t=t/10;
t=parseInt(t);
}
if(parseInt(sum)==parseInt(n))
document.write("It is an Armstrong Number");
else
document.write("It is not a Armstrong Number");
}
</script>
</head>
<body>
<script>
var x= prompt("Enter the Number");

test(x);
</script>
</body>
</html>

Exercises:: Assignment-1

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

Exercises:: Assignment-1

Uploaded by

Copyright:

Available Formats

SOUHARDYA SARKAR CS_2171027

File Name: a_1.html

<font color="red" face="Time New Roman">

<hr color="Blue" size="5">

<h1>What is Computer Science and Engineering?</h1>

<hr color="Blue" size="2"></font>

<b><u>Computer Science and Engineering</u></b> is the study of computer in overall,

algorithms, programming languages, program design, computer software, computer hardware,

<font face="jokerman" color="purple"><p>Computer science engineers are involved in

<font face="candara" color="brown"><p>The course is offered by technical institutes across

2. PG (Postgraduate)</pre> level where students are awarded <big>BTech and MTech</big>

<hr size="4" color="green">

<strong><font face="Monotype Corsiva" size="14">Skills Required are:</font></strong>

<font face="comic sans ms" color="brown">

<h3>Good Programming Skills</h3>

<h3>Strong Data Structures and Algorithms skills</h3>

<h4>Basic web development knowledge</h4>

<h5>Basics of Machine Learning</h5>

<h5>Basics of security, vulnerabilities, and cryptography</h5>

<h6>Ability to grasp the knowledge quickly</h6></font>

<hr size="4" color="green">

File Name: a_2.html

<h1><font color="Red" face="Algerian">ICT Branches</font></h1>

<ol style="color: Blue">

<li><a href="https://www.ict.gnu.ac.in/content/about-1" target="_blank"><dfn

<li><a href="https://www.ict.gnu.ac.in/content/about" target="_blank"><dfn

<li><a href="https://www.ict.gnu.ac.in/content/about-course" target="_blank"><dfn

3. Definition: Sam needs to store 9 photos of his childhood in a webpage for

Image - 4 Image - 5 Image - 6

Image - 7 Image - 8 Image – 9

File Name: a_3.html

<table cellspacing="10" cellpadding="10">

File Name: a_4.html

<li>3 Letter Verbs</li>

<li>Middle letter is a consonant</li>

<li>See Chart in notebook for conjugations</li>

<li>"I form" determines conjugation and is different from

<li>You(m) - They switches harakes of the first two

<li>2ija (to come) has alif masourah</li>

<li>Skips alif when conjugating</li>

<li>Alif masourah turns into a ya when

<li>You (p) and they switches "ya" with

<li>Middle letter is alif or consonant with shaddeh +

<li>Alif - swithces to wow or ya</li>

<li>Shaddeh - fatha switches to kasra</li>

<li>See Chart in notebook for conjugations</li>

<li>4 Letter Verbs</li>

<li>5 Letter Verbs</li>

<li>2 Letter Verbs</li>

1 image: Add description about attributes of <td> & <th> tags.

2 image: Add description about importance of <thead> & <tfoot> tags.

File Name: a_5.html , a_5.1.html, a_5.2.html

<table border="5" cellspacing="5">

<th colspan="4" align="center">Purchased Equipments (June,2006)</th>

<th rowspan="2">Item Num#</th>

<th rowspan="2">Item Picture</th>

<th>Shipping Handling, Installation, etc</th>

<td rowspan="2"><a href="a_5.1.html"><img

<td>IBM Clone Computer</td>

<td>Shipping Handling, Installation, etc</td>

<td rowspan="2"><a href="a_5.2.html"><img

<td>1 GB RAM Module for Computer</td>

Attributes of <td> & <th><br><br>