Green University of Bangladesh Department of Computer Science and Engineering (CSE)

Green University of Bangladesh
Department of Computer Science and Engineering (CSE)

Faculty of Sciences and Engineering
Semester: (Spring, Year:2022), B.Sc. in CSE (Day)
LAB REPORT NO 1
Course Title: Web Programming Lab
Course Code: CSE 302 Section: D4
Lab Experiment Name: Implement of type attribute, definition list and HTML &
CSS responsive Table.
Student Details
Name ID
1. Sudiptya Chanda 201002042
Lab Date : 16th June,2022

Submission Date : 23th June,2022
Course Teacher’s Name : Md. Ansarul Islam
[For Teachers use only: Don’t Write Anything inside this box]
Lab Report Status

Marks: ………………………………… Signature:.....................
Comments:.............................................. Date:..............................
TITLE OF THE LAB EXPERIMENT
Implement of type attributes, definition list and HTML & CSS responsive Table.
OBJECTIVES/AIM
After completing this experiment I’m able to implement various type attributes like
Numerical, Small/Capital Alphabet, Small/Capital Roman etc. also I’m going to
implement responsive table.
PROCEDURE / ANALYSIS / DESIGN

Here in this experiment, my mission is to implement three different things,
Firstly, Type attributes it defines that the specifies the kind of marker to use in the
list. Some Example am 1, A, a, I, i. For initial this attribute I need ordered list tag
so if I define <ol type="A"> then HTML show the list marker in Upper case
alphabet. For others I just need to replace “A” and give “1”/ “a” etc. for desire
output.
Secondly, the <dl> tag defines a description list. The <dl> tag is used in
conjunction with <dt> (defines terms/names) and <dd> (describes each
term/name).
Finally, A responsive table will display a horizontal scroll bar if the screen is too
small to display the full content. To create a responsive table, add a container
element with (margin: auto) around the <table>.
IMPLEMENTATION
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lab Report</title>
</head>
<body style="background: slateblue;">
<h1 style=" color: white; text-align: center; "> <u>Lab Report </u></h1>
<h2 style="color: white; text-align: center;"> TASK 1 </h2>
<h3 style="color: white; text-align: center;">Type Attributes</h3>
<br>
<br>
<h3>Ordered List Tag with Type Attribute LoIr Case Alphabets</h3>
<ol type="a"style=" color: white; font-size: 20px;">
<li>Dhaka</li>
<li>Chittagong</li>
<li>Sylhet</li>
<li>Cumilla</li>
<li>Chandpur</li>
<li>Rajshahi</li>
<li>Khulna</li>
<li>Bagherhat</li>
</ol>
<h3>Ordered List Tag with Type Attribute Lower Case Alphabets</h3>
<ol type="A"style=" color: white; font-size: 20px;">
<li>Mango</li>
<li>Jack Fruit</li>
<li>Orange</li>
<li>Guava</li>
<li>Banana</li>
<li>Apple</li>
<li>Dragon Fruit</li>
<li>Grapes</li>
</ol>
<h3>Ordered List Tag with Type Attribute Lower Case Roman</h3>
<ol type="i"style=" color: white; font-size: 20px;">
<li>Poppers</li>
<li>Coca-cola</li>
<li>Pepsi</li>
<li>Casew Nut</li>
<li>Alooz</li>
<li>Dry Fruits</li>
</ol>
<h3>Ordered List Tag with Type Attribute Upper Case Roman</h3>
<ol type="I" style=" color: white; font-size: 20px;">
<li>Dhaka Division</li>
<li>Rajshahi Division</li>
<li>Khulna Division</li>
<li>Chittagong Division</li>
<li>Sylhet Division</li>
<li>Barishal Division</li>
<li>Rangpur Division</li>
<li>Mymensingh Division</li>
</ol>
<h3>Ordered List Tag with Type Attribute Numerical</h3>
<ol type="1"style=" color: white; font-size: 20px;">
<li>Dhaka</li>
<li>Chittagong</li>
<li>Sylhet</li>
<li>Cumilla</li>
<li>Chandpur</li>
<li>Rajshahi</li>
<li>Khulna</li>
<li>Bagherhat</li>
</ol>
<h3>This is the demonstration of ordered list where the list items starts with
4</h3>
<ol start="4" style=" color: white; font-size: 20px;">
<li>Dhaka Division</li>
<li>Rajshahi Division</li>
<li>Khulna Division</li>
<li>Chittagong Division</li>
<li>Sylhet Division</li>
<li>Barishal Division</li>
<li>Rangpur Division</li>
<li>Mymensingh Division</li>
</ol>
<br><br><br><br>
<h3 style="color: white; text-align: center;">Definition List</h3>
<h3 style="font-size: 20px;">This is the demonstration of definition
List</h3>
<dl style=" color: white; font-size: 20px;">
<dt>AP</dt>
<dd>Dhaka</dd>
<dt>KA</dt>
<dd>Khulna</dd>
<dt>TS</dt>
<dd>Chittagong</dd>
<dt>UP</dt>
<dd>Cox's Bazar</dd>
<dt>RP</dt>
<dd>Rangpur</dd>
</dl>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h3 style="color: white; text-align: center;"> HTML & CSS responsive
table</h3>
<br><br><br><br>
<table border="2" cellpadding="20" style="margin: auto; width: 80%;
border-collapse: collapse; background: white;">
<tr style="background: green; color: white; font-size: 18px;">
<th> Name </th>
<th>Salary</th>
<th>Code</th>
</tr>
<tr style="text-align: right; color: red; font-size: 20px;">
<td>ABC</td>
<td>200</td>
<td>P1</td>
</tr>
<td>XYZ</td>
<td>700</td>
<td>P2</td>
</tr>
<td colspan ="3">Total:900</td>
</tr>
</table>
</body>
</html>
TEST RESULT / OUTPUT

ANALYSIS AND DISCUSSION
So, after all the hard work and implementation I found my desire output.
Those implementations teach me some new things of HTML. How to
implement various types of type attributes. So, it can be very helpful for
my future work.

Green University of Bangladesh Department of Computer Science and Engineering (CSE)

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

Green University of Bangladesh Department of Computer Science and Engineering (CSE)

Uploaded by

Copyright:

Available Formats

Green University of Bangladesh

Department of Computer Science and Engineering (CSE)

1. Sudiptya Chanda 201002042

Lab Date : 16th June,2022

Lab Report Status

PROCEDURE / ANALYSIS / DESIGN

TEST RESULT / OUTPUT

You might also like