Scribd
Upload
11 views

WebTech LabAssessment

Uploaded by

Kumari Anjali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

WebTech LabAssessment

Uploaded by

Kumari Anjali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

COER UNIVERSITY

7th K.M. on Roorkee Haridwar Road (NH-58),


Post Box No. 27, Vardhmanpuram,
Roorkee- 247667 District. Haridwar (Uttarakhand)
Website: www.coeruniversity.in

Lab Assessment File

Submitted By:
Submitted To: Mr. Shalendra Thakur
Department: Computer Science and Applications
Semester: II
Academic Session: 2024-2025
Subject name: Web Technology Lab
Subject code: BCA283
INDEX
Student Name:…………………….. Roll No………………………
Sub Name:…………………………… Code:…………………………
Course:……........ Semester:…………. Section:…………..

S.No. Assessment Date Faculty Remarks


Signature
1 Assessment 1
2 Assessment 2
3 Assessment 3
4 Assessment 4
5 Assessment 5
6 Assessment 6
7 Assessment 7
8 Assessment 8
9 Assessment 9
10 Assessment 10
11 Assessment 11
12 Assessment 12
13 Assessment 13
14 Assessment 14
15 Assessment 15
16 Assessment 16
17 Assessment 17
18 Assessment 18
19 Assessment 19
20 Assessment 20
Assessment 1
1.Create exact table using appropriate tags which includes color, font, paragraph etc.

The Three Most Popular JavaScript Libraries

Library jQuery Bootstrap Modernizer

Market Share 96.1% 17.0% 14.3%

Absolute
70.4% 12.4% 10.5%
Usage

Market Share refers to the percentage of sites using


any JavaScript library that use the specified
library. Absolute Usage is the percent of websites
surveyed, including those that use no JavaScript
libraries, that use the specified library. All data comes
from Amazon and was accurate in June of 2016.

<!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>Document</title>
</head>

<body>
<table>
<caption>The Three Most Popular JavaScript Libraries</caption>
<thead>
<tr>
<th>Library</th>
<th>jQuery</th>
<th>Bootstrap</th>
<th>Modernizr</th>
</tr>
</thead>
<tbody>
<tr>
<td>Market Share</td>
<td>96.1%</td>
<td>17.0%</td>
<td>14.3%</td>
</tr>
<tr>
<td>Absolute Usage</td>
<td>70.4%</td>
<td>12.4%</td>
<td>10.5%</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><em>Market Share</em> refers to the percentage of
sites using any JavaScript library
that use the specified library. <em>Absolute Usage</em> is the
percent of websites surveyed,
including those that use no JavaScript libraries, that use the
specified library. All data comes
from <a
href="https://amazon.com/technologies/overview/javascript_library/all"
target="_blank">Amazon</a> and was accurate in June of
2016.</td>
</tr>
</tfoot>
</table>

</body>

</html>
Assessment 2

2.Create exact table using appropriate tags which includes color, font, paragraph etc.
A complex table
Invoice #123456789 14 January 2025
Pay to: Customer:
Acme Billing Co. John Smith
123 Main St. 321 Willow Way
Cityville, NA 12345 Southeast Northwestershire, MA 54321
Name / Description Qty. @ Cost
Paperclips 1000 0.01 10.00
Staples (box) 100 1.00 100.00
Subtotal 110.00
Tax 8% 8.80
Grand Total $ 118.80

<!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>Document</title>
</head>

<body>
<table border="1">
<caption>A complex table</caption>
<thead>
<tr>
<th colspan="3">Invoice #123456789</th>
<th>14 January 2025
</tr>
<tr>
<td colspan="2"> <strong>Pay to:</strong><br> Acme Billing Co.<br>
123 Main St.<br> Cityville, NA 12345
</td>
<td colspan="2"> <strong>Customer:</strong><br> John Smith<br> 321
Willow Way<br> Southeast
Northwestershire, MA 54321 </td>
</tr>
</thead>
<tbody>
<tr>
<th>Name / Description</th>
<th>Qty.</th>
<th>@</th>
<th>Cost</th>
</tr>
<tr>
<td>Paperclips</td>
<td>1000</td>
<td>0.01</td>
<td>10.00</td>
</tr>
<tr>
<td>Staples (box)</td>
<td>100</td>
<td>1.00</td>
<td>100.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">Subtotal</th>
<td> 110.00</td>
</tr>
<tr>
<th colspan="2">Tax</th>
<td> 8% </td>
<td>8.80</td>
</tr>
<tr>
<th colspan="3">Grand Total</th>
<td>$ 118.80</td>
</tr>
</tfoot>
</table>

</body>

</html>
Assessment 3

3.Create exact table using appropriate tags which includes font, paragraph etc.

Life Expectancy By Current Age


65 40 20
Men Women Men Women Men Women
82 85 78 82 77 81

<!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>Document</title>
</head>

<body>
<table border="1">
<caption>
Life Expectancy By Current Age
</caption>
<tr>
<th colspan="2">65</th>
<th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
</body>
</html>
Assessment 4

4.Create exact table using appropriate tags which includes font, paragraph etc.
Invoice
Item / Desc. Qty. @ Price
Paperclips (Box) 100 1.15 115.00
Paper (Case) 10 45.99 459.90
Wastepaper Baskets 2 17.99 35.98
Subtotal 610.88
Tax 7% 42.76
Total 653.64

<!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>Document</title>
</head>

<body>
<table border="1">
<caption>
Invoice
</caption>
<tr>
<th>Item / Desc.</th>
<th>Qty.</th>
<th>@</th>
<th>Price</th>
</tr>
<tr>
<td>Paperclips (Box)</td>
<td>100</td>
<td>1.15</td>
<td>115.00</td>
</tr>
<tr>
<td>Paper (Case)</td>
<td>10</td>
<td>45.99</td>
<td>459.90</td>
</tr>
<tr>
<td>Wastepaper Baskets</td>
<td>2</td>
<td>17.99</td>
<td>35.98</td>
</tr>
<tr>
<th colspan="3">Subtotal</th>
<td>610.88</td>
</tr>
<tr>
<th colspan="2">Tax</th>
<td>7%</td>
<td>42.76</td>
</tr>
<tr>
<th colspan="3">Total</th>
<td>653.64</td>
</tr>
</table>
</body>
</html>
Assessment 5

1.Create exact table using appropriate tags which includes font, paragraph etc.

Favorite and Least Favorite Things


Bob Alice
Color Blue Purple
Favorite
Flavor Banana Chocolate
Color Yellow Pink
Least Favorite
Flavor Mint Walnut

<!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>Document</title>
</head>

<body>
<table border="2">
<caption>
Favorite and Least Favorite Things
</caption>
<tr>
<th></th>
<th></th>
<th>Bob</th>
<th>Alice</th>
</tr>
<tr>
<th rowspan="2">Favorite</th>
<th>Color</th>
<td>Blue</td>
<td>Purple</td>
</tr>
<tr>
<th>Flavor</th>
<td>Banana</td>
<td>Chocolate</td>
</tr>
<tr>
<th rowspan="2">Least Favorite</th>
<th>Color</th>
<td>Yellow</td>
<td>Pink</td>
</tr>
<tr>
<th>Flavor</th>
<td>Mint</td>
<td>Walnut</td>
</tr>
</table>
</body>
</html>
Assessment 6

6.Create exact table using appropriate tags which includes color, font, paragraph etc.

BCA WebTechnology
Table with Col span

Name Class
Mahima Gupta 1
Sri Krishn 3
Shivika Goyal 5

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>HTML Table with Colspan</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Table</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}

table {
width: 100%;
border: 1px solid #100808;
border-collapse: collapse;
}

th,
td {
padding: 10px;
border: 2px solid black;

}
</style>
</head>
<body>
<h1>BCA WebTechnology</h1>
<h3>Table with Colspan
</h3>

<table>
<thead>
<tr>
<th colspan="2">Name</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>Gupta</td>
<td>1</td>
</tr>
<tr>
<td>Sri</td>
<td>Krishn</td>
<td>3</td>
</tr>
<tr>
<td>Shivika</td>
<td>Goyal</td>
<td>5</td>
</tr>
</tbody>
</table>

</body>

</html>
Assessment 7

7.Create exact table using appropriate tags which includes color, font, paragraph etc.

BCA WebTechnology
HTML Table Rowspan

Name Class

Radha 10 MVM School

Ankur 11

<!DOCTYPE html>
<html>

<head>
<title>HTML rowspan</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

h1 {
color: green;
}

table {
width: 70%;
}

table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
</head>
<body>
<h1>BCA WebTechnology</h1>
<h2>HTML Table Rowspan</h2>
<table>
<tr>
<th>Name</th>
<th>Class</th>
<th rowspan="3">MVM School</th>
</tr>
<tr>
<td>Radha</td>
<td>10</td>
</tr>
<tr>
<td>Ankur</td>
<td>11</td>
</tr>
</table>
</body>

</html>
Assessment 8

8.Create exact table using appropriate tags which includes color, font, paragraph etc.

Web Technology
Table with Rowspan and Colspan

Name Class School


11
Mahima Gupta MVM School
A
3
Sri Krishn LMS School
B
5
Shivika Goyal SCPM School
A

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Table with Rowspan and Colspan</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}

table {
width: 100%;
border: 1px solid #100808;
border-collapse: collapse;
}

th,
td {
padding: 10px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>Web Technology</h1>
<h3>Table with Rowspan and Colspan</h3>
<table>
<thead>
<tr>
<th colspan="2">Name</th>
<th>Class</th>
<th>School</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Mahima</td>
<td rowspan="2">Gupta</td>
<td>11</td>
<td rowspan="2">MVM School</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td rowspan="2">Sri</td>
<td rowspan="2">Krishn</td>
<td>3</td>
<td rowspan="2">LMS School</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td rowspan="2">Shivika</td>
<td rowspan="2">Goyal</td>
<td>5</td>
<td rowspan="2">SCPM School</td>
</tr>
<tr>
<td>A</td>
</tr>
</tbody>
</table>
</body>

</html>
Assessment 9

9.Create List using appropriate tags which includes color, font etc.

Welcome To Web Tech Learning


List of available courses

 Data Structures & Algorithm


 Web Technology
 Aptitude & Logical Reasoning
 Programming Languages

Data Structures topics

1. Array
2. Linked List
3. Stacks
4. Queues
5. Trees
6. Graphs

<!DOCTYPE html>
<html>

<head>
<title>Web Technology</title>
</head>

<body>
<h2>Welcome To Web Tech Learning</h2>
<h5>List of available courses</h5>
<ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
<li>Programming Languages</li>
</ul>
<h5>Data Structures topics</h5>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
</body>

</html>
Assessment 10

10.Create List using appropriate tags which includes font etc.

Example of unordered list in circle


o sachin
o manoj

Example of unordered list in disk


 Priya
 Mohit

Example of unordered list in square


 Pinky
 Punam

Example of unordered list in none


 Mukti
 Dhama

<html>
<head>
<title>unordered list</title>
</head>
<body>
<h2>Example of unordered list in circle</h2>
<ul style="list-style-type:circle;">
<li>sachin</li>
<li>manoj</li>
</ul>
<h2>Example of unordered list in disk</h2>
<ul style="list-style-type:disk;">
<li>Priya</li>
<li>Mohit</li>
</ul>
<h2>Example of unordered list in square</h2>
<ul style="list-style-type:square;">
<li>Pinky</li>
<li>Punam</li>
</ul>
<h2>Example of unordered list in none</h2>
<ul style="list-style-type:none;">
<li>Mukti</li>
<li>Dhama</li>
</ul>
</body>
</html>

You might also like