Scribd
Upload
35 views

Web Programming

Uploaded by

jahidul.cse.gub
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views

Web Programming

Uploaded by

jahidul.cse.gub
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Green University of Bangladesh

Department of Computer Science and Engineering (CSE)


Faculty of Sciences and Engineering
Semester: (Fall, Year:2024), B.Sc. in CSE (Day)

Lab Report NO # 01
Course Title : Web Programming Lab
Course Code : CSE 302
Section : 221 D5

Lab Experiment Name: Creating Lists, Table, Forms using HTML Tags.

Student Details

Name ID

1. Jahidul Islam 221002504

Lab Date : 06/09/2024


Submission Date : 13/09/2024
Course Teacher’s Name : Mahbubur Rahman

Lab Report Status


Marks: ………………………………… Signature:.....................
Comments:.............................................. Date:..............................
1. TITLE OF THE LAB REPORT EXPERIMENT:
Creating Lists, Table, Forms using HTML Tags.

2. OBJECTIVES:
Through proper learning of this lab task we will be able
• To create HTML tables and use rowspan and colspan to merge rows and columns.
• Design and implement a functional form with various input elements in HTML.

3. DESIGN:

Table Design:
1. Structure:
o table created using <table> tag, rows defined by <tr>, table headers by <th>,
and table data by <td>.
2. Attribute:
o rowspan: To combines two or more rows into a single cell.
o colspan: To combines two or more columns into a single cell.
o Used the border, cellpadding, and cellspacing attributes.
3. Code: Routine.html file is added as text in the implementation section.

Form Design:
1. Structure:
o Form created using <form> tag, with input like <input>, <textarea>, <select>
2. Input Fields:
o Text Fields: <input type="text"> for basic text input.
o Email/Password: <input type="email">, <input type="password"> for specific
types of data.
o Radio Buttons/Checkboxes: To select options.
o File Upload: <input type="file"> for attaching documents or images.
o Text Area: <textarea> for multi-line text input.
3. Buttons:
o Submit: To send form data for processing.
o Reset: To clear the form input fields.
4. Code is added in the implementation section named: StudentAdmissionForm.html
4. IMPLEMENTATION:

1. Routine.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Class Schedule</title>
</head>
<body>
<h2 style="text-align: center">Class Schedule</h2>
<h2 style="text-align: center">Green University Of Bangladesh</h2>
<h4 style="text-align: center">
Department of Computer Science of Engineering
</h4>
<h3 style="text-align: center">Student Name: Jahidul Islam</h3>
<h3 style="text-align: center">Student ID: 221002504</h3>

<table
border="1"
width="100%"
cellpadding="8"
align="center"
cellspacing="4"
style="text-align: center"
>
<tr>
<th>day</th>
<th rowspan="2">08:30-09:45</th>
<th rowspan="2">09:45-11:00</th>
<th rowspan="2">11:00-12:15</th>
<th rowspan="2">12:15-01:30</th>
<th rowspan="2">02:00-03:15</th>
<th rowspan="2">03:15-04:30</th>
</tr>
<tr>
<th>time</th>
</tr>
<tr>
<td>Monday</td>
<td></td>
<td></td>
<td></td>
<td>CSE 302 <br />Web Programming<br />221 D7</td>
<td>CSE 311 <br />Computer Networking<br />222 D4</td>
<td></td>
</tr>
<tr>
<td>Tuesday</td>
<td></td>
<td>CSE 323 <br />Computer and Cyber Security<br />221 D3</td>
<td></td>
<td>CSE 302 <br />Web Programming<br />221 D7</td>
<td>CSE 311 <br />Computer Networking<br />222 D4</td>
<td>GED 401 <br />Financial and Managarial Accounting<br />221 D12</td>
</tr>
<tr>
<td>Wednesday</td>
<td></td>
<td></td>
<td colspan="2">
CSE 324 <br />
Integrated Design Project<br />221 D21
</td>

<td></td>
<td>
CSE 403 <br />
Information and System Design <br />221 D10
</td>
</tr>
<tr>
<td>Thursday</td>
<td></td>
<td>CSE 323 <br />Computer and Cyber Security<br />221 D3</td>
<td colspan="2">CSE 312 <br />Computer Networking Lab<br />221 D9</td>

<td></td>
<td>GED 401 <br />Financial and Managarial Accounting<br />221 D12</td>
</tr>
<tr>
<td>Friday</td>
<td></td>
<td colspan="2">CSE 302 <br />Web Programming Lab<br />221 D5</td>

<td></td>
<td></td>
<td>
CSE 403 <br />
Information and System Design <br />221 D10
</td>
</tr>
</table>
</body>
</html>

2. Student Admission Form:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registration Form</title>
</head>
<body>
<h2 style="text-align: center">Student Admission Form</h2>

<form style="width: 400px; margin: auto">


<div style="text-align: center; margin-bottom: 20px">
<img
src="./gublogo.svg"
alt="Student Image"
style="width: 40%; height: ; margin-bottom: 10px"
/>
</div>

<label for="student-name">Student Name:</label><br />


<input
type="text"
id="student-name"
name="student-name"
style="width: 100%; margin-bottom: 10px"
placeholder="Enter your name"
/><br />

<label for="student-id">Student ID:</label><br />


<input
type="number"
id="student-id"
name="student-id"
style="width: 100%; margin-bottom: 10px"
placeholder="Enter a number"
/><br />

<label for="email">Email:</label><br />


<input
type="email"
id="email"
name="email"
style="width: 100%; margin-bottom: 10px"
placeholder="Enter your email"
/><br />

<label for="username">Username:</label><br />


<input
type="text"
id="username"
name="username"
style="width: 100%; margin-bottom: 10px"
placeholder="Enter your username"
/><br />

<label for="password">Password:</label><br />


<input
type="password"
id="password"
name="password"
style="width: 100%; margin-bottom: 10px"
placeholder="Enter your password"
/><br />

<label for="dob">Date of Birth:</label><br />


<input
type="date"
id="dob"
name="dob"
style="width: 100%; margin-bottom: 10px"
/><br />

<label>Gender:</label><br />
<input type="radio" id="male" name="gender" value="Male" /> Male
<input type="radio" id="female" name="gender" value="Female" /> Female
<br /><br />

<label>Language:</label><br />
<input type="checkbox" id="bengali" name="language" value="Bengali" />
Bengali
<input type="checkbox" id="english" name="language" value="English" />
English
<input type="checkbox" id="other" name="language" value="Other" /> Other
<br /><br />

<label for="country">Country:</label><br />


<select
id="country"
name="country"
style="width: 100%; margin-bottom: 10px">
<option value="" disabled selected>Please select your country</option>
<option value="Bangladesh">Bangladesh</option>
<option value="USA">USA</option>
<option value="UK">UK</option></select
><br />

<label for="address">Address:</label><br />


<textarea
id="address"
name="address"
rows="4"
style="width: 100%; margin-bottom: 10px"
placeholder="Enter your present address"
></textarea
><br />

<label for="documents">Student Image</label><br />


<input
type="file"
id="documents"
name="documents"
style="width: 100%; margin-bottom: 10px"
/><br />

<input
type="submit"
value="Submit"
style="width: 40%; margin-right: 4%"
/>
<input type="reset" value="Reset" style="width: 40%" />
</form>
</body>
</html>
5. OUTPUT:

1. Routine.html

Figure 01: Output of the routine.html file.


2. Student Admission Form:

Figure 02: Output of the StudentAdmissionForm.html file.


6. ANALYSIS AND DISCUSSION:
I faced a problem while creating a live server view for these two codes. First I created the routine
of my current semester class routine with the concept of table tag in HTML in the Routine.html
file.
I successfully created the basic structure. After that, I added some inline style to make the code
look good.
Finally, I started with the Student Admission Form Creation Problem. Making a basic form with
HTML is pretty complicated. However, once I got the proper idea, I completed the whole
registration form as a student admission form.
Here, I tried to make the form fields dynamic with some inbuilt attributes for input tags, such as
type, id, name, and value.
I used labels for each form so that an individual gets to know what type of info the input field can
take.

You might also like