Scribd
Upload
100 views37 pages

BCA Semester WT PRACTICAL FILE

Pra

Uploaded by

Lakshay Shishodia
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
100 views37 pages

BCA Semester WT PRACTICAL FILE

Pra

Uploaded by

Lakshay Shishodia
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/ 37

Trinity Institute of Professional Studies

Affiliated To Guru Gobind Singh Indraprastha University


SECTOR 16-C, DWARAKA, NEW DELHI

Submitted By Submitted To
Name of Student: JASMEHAR SINGH Dr. Krishna
Enrollment Number: 03424002024 Associate Professor
Semester: 1th CS & IT
Shift: 2st

1|Page
1) Make following five different web pages

i) Formatting Styles and Headings: Include Bold, italics, Underline, Strike, Subscript,
superscript and all six type of headings:-

<html >

<head>
<title>Text Formatting Example</title>
</head>

<body>

<p>
<em>Emphasized:</em>
This text is emphasized and italic.
</p>
<p>
<b>Bold:</b> This text is bold.
</p>
<p>
<i>Italic:</i> This text is italic.
</p>

</body>

0utput:-

2|Page
ii ) Font Styles and Image tag
< html>

<html>

<body>

<h2>lakshay</h2>

<p>Lakshay<p>

<font size="5"> Welcome </font>

<img src=

"https://www.edufever.com/wp-content/uploads/2020/04/image.png"

width="420" height="100" alt="TIPS">

</body>

</html>

Output:-
H

3|Page
iii) Marquee: Move text, image and hyperlink
< html>

<html >

<head>

<title>Marquee: Move Text, Image, and Hyperlink</title>

</head>

<body>

<h1>Marquee: Move Text, Image, and Hyperlink</h1>

<h2>Moving Text</h2>

<marquee behavior="scroll" direction="left" scrollamount="10">

This is a scrolling text example.

</marquee>

<h2>Moving Image</h2>

<marquee behavior="scroll" direction="right" scrollamount="5">

<img src="https://via.placeholder.com/100" alt="Placeholder Image"


class="marqueeimage">

</marquee>

<h2>Moving Hyperlink</h2>

<marquee behavior="scroll" direction="up" scrollamount="8">

<a href="https://www.example.com" class="marquee-link" target="_blank">

Visit Example Website!

</a>

</marquee>

</body>

</html>

4|Page
Output:-

5|Page
2) Create an unordered list nested inside ordered list html:-

<ol>

<li>Main Item 1

<ul><li>Sub-item A</li>

<li>Sub-item B</li>

<li>Sub-item C</li>

</ul>

</li>

<li>Main Item 2</li>

<li>Main Item 3

<ol>

<li>Sub-item 1.1</li>

<li>Sub-item 1.2

<ul>

<li>Sub-sub-item a</li>

<li>Sub-sub-item b</li>

</ul>

</li>

</ol>

</li>

<li>Main Item 4</li>

</ol>

6|Page
Output:-

7|Page
3) Design a table with row span and column span and make use of attributes colspan,
rowspan, width, height, cellpadding, cellspacing etc.
< html>

<head>

<title>Table with Rowspan, Colspan, and Other Attributes</title>

<style> table {

border: 1px solid black;

border-collapse: collapse;

width: 80%; margin:

20px auto;

} th, td { border:

1px solid black;

padding: 10px; text-

align: center;

</style>

</head>

<body>

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

<tr>

<th colspan="2" width="200" height="50">Header 1 & 2 (Colspan)</th>

<th rowspan="2" width="150" height="100">Header 3 (Rowspan)</th>

</tr>

<tr>

<td>Data 1</td>

<td>Data 2</td>

8|Page
</tr>

<tr>

<td colspan="2">Merged Data (Colspan)</td>

<td>Data 3</td>

</tr>

</table>

</body>

</html>

Output:-

9|Page
4) Make an image map showing the usage of shape, coords, href attributes in map
definition. Link each hotspot to their respective details. All the web pages should be
designed with proper background color, images, font styles and headings

< html>

<head>

<title>Page</title>

<style> body { font-

family: Arial, sans-serif;

background-color: #ecf0f1;

margin: 0; padding: 0;

header { background-

color: #34495e; color:

white; padding: 10px 0;

text-align: center;

.content {

padding: 20px;

footer {

background-color:

#34495e; color: white;

text-align: center; padding:

10px 0;

</style>

</head>

<body>

10 | P a g e
<header>

Page Details

</header>

<div class="content">

<h2>Welcome to Page 3</h2>

<p>This is the content of Page 3. You can link to other pages from here.</p>

</div>

<footer>

<p>&copy; 2024 Page 3</p>

</footer>

</body>

</html>

Output:-

11 | P a g e
5) Design Student registration form for admission in college:-

< html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>College Admission - Student Registration Form</title>

<style> body { font-family:

Arial, sans-serif; background-

color: #f4f4f9; margin: 0;

padding: 0;

header { background-color:

#2c3e50; color: white;

padding: 15px 0; text-align: center;

font-size: 28px;

.container { width: 60%; margin: 20px auto;

background-color: white; padding: 30px;


border-radius: 8px; box-shadow: 0 4px 8px
rgba(0, 0, 0, 0.1);

} h2 { text-

align: center; color:


#2c3e50;

form {
display: grid;

gap: 20px;
}

12 | P a g e
label { font-

weight: bold;

input, select, textarea {

width: 100%; padding:

10px; font-size: 16px;

border: 1px solid #ccc;

border-radius: 4px;

input[type="radio"], input[type="checkbox"] { width:

auto;
}

.form-group { display:

flex; flex-direction: column;


}

.form-group-inline { display: flex;

justify-content: space-between;

.form-group-inline input { width:


48%;

button { padding: 12px 20px;


background-color: #3498db;

color: white; border: none;

border-radius: 4px; font-size:

18px; cursor: pointer; width:

100%;
}

13 | P a g e
button:hover { background-color:
#2980b9;

.footer { background-color:

#2c3e50; color: white; text-

align: center; padding: 10px 0;


margin-top: 20px;

</style>

</head>

<body>

<header>

College Admission - Student Registration Form

</header>

<div class="container">

<h2>Student Registration</h2>

<form action="submit_form.php" method="POST">

<!-- Personal Details -->

<div class="form-group">

<label for="fullName">Full Name:</label>

<input type="text" id="fullName" name="fullName" required placeholder="Enter your


full name">

</div>

<div class="form-group">

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

<input type="date" id="dob" name="dob" required>

</div>

<div class="form-group-inline">

14 | P a g e
<div class="form-group">

<label for="gender">Gender:</label>

<div>

<input type="radio" id="male" name="gender" value="Male" required>

<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="Female" required>

<label for="female">Female</label>

<input type="radio" id="other" name="gender" value="Other" required>

<label for="other">Other</label>

</div>

</div>

<div class="form-group">

<label for="contact">Contact Number:</label>

<input type="tel" id="contact" name="contact" required placeholder="Enter your


phone number">

</div>

</div>

<!-- Address -->

<div class="form-group">

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

<textarea id="address" name="address" rows="4" required placeholder="Enter your


address"></textarea>

</div>

<!-- Academic Details -->

<div class="form-group">

<label for="highschool">High School/Previous Institution Name:</label>

<input type="text" id="highschool" name="highschool" required


placeholder="Enter your previous school name">

15 | P a g e
</div>

<div class="form-group">

<label for="passingYear">Year of Passing:</label>

<input type="number" id="passingYear" name="passingYear" required


placeholder="Enter the year you passed out">

</div>

<div class="form-group">

<label for="percentage">Percentage/Grade:</label>

<input type="text" id="percentage" name="percentage" required placeholder="Enter


your percentage/grade">

</div>

<!-- Course Details -->

<div class="form-group">

<label for="course">Select Course:</label>

<select id="course" name="course" required>

<option value="" disabled selected>Select your course</option>

<option value="BSc">BSc</option>

<option value="BCom">BCom</option>

<option value="BA">BA</option>

<option value="BTech">BTech</option>

<option value="MBA">MBA</option>

<option value="MSc">MSc</option>

</select>

</div>

<div class="form-group">

<label for="preferences">Course Preferences:</label>

<textarea id="preferences" name="preferences" rows="4" placeholder="Mention any


course preferences or remarks"></textarea>

16 | P a g e
</div>

<!-- Terms & Conditions -->

<div class="form-group">

<input type="checkbox" id="acceptTerms" name="acceptTerms" required>

<label for="acceptTerms">I agree to the terms and conditions.</label> </div>

<!-- Submit Button -->

<button type="submit">Submit Registration</button>

</form>

</div>

<footer class="footer">

<p>&copy; 2024 College Admissions. All rights reserved.</p>

</footer>

</body>

</html>

17 | P a g e
Output:-

18 | P a g e
6) Create a webpage and show the usage of inline and internal style sheet and external
style sheet?
< html>

<html >

<head>

<title>CSS Styling Demo</title>

<style>

/* Internal CSS: Style for elements in the page */ body


{ font-family: Arial, sans-serif;

background-color: #f0f0f0; color:

#333;

} h1 { color:

#2c3e50; text-align:
center;

.container { width: 80%; margin: 0 auto;


padding: 20px; background-color: white;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

.button { background-color:
#3498db; color: white;

padding: 10px 20px; border:


none; border-radius: 5px;
cursor: pointer; text-align: center;

.button:hover { background-color:

#2980b9;

19 | P a g e
</style>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h1>Welcome to CSS Styling Demo</h1>

<div class="container">

<p>This webpage demonstrates the usage of three types of CSS: Inline,


Internal, and External.</p>

<p style="font-size: 18px; color: #e74c3c;">This is an inline style applied to this


paragraph.</p>

<button class="button">Click Me (Styled via Internal and External


CSS)</button>

</div>

</body>

</html>

20 | P a g e
Output:-

21 | P a g e
7) Create a webpage containing a background image and apply all the background
styling attributes?
< html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Background Image Styling Example</title>

<style>

/* Apply a background image to the body */

body { font-family: Arial, sans-serif;

margin: 0; padding: 0;

background-image: url('https://via.placeholder.com/1200x800'); /* URL of the


background image */ background-repeat: no-repeat; /* Prevents the image from
repeating */ background-size: cover; /* Ensures the image covers the entire page
*/ background-position: center center; /* Centers the background image */

background-attachment: fixed; /* Makes the background image stay fixed while scrolling
*/ background-color: #f0f0f0; /* Fallback color if the image doesn't load */ height:

100vh; /* Makes the background cover the entire height of the viewport */

.content { position: absolute;

top: 50%; left: 50%;

transform: translate(-50%, -50%);

color: white; text-align: center;

padding: 20px; background: rgba(0, 0, 0, 0.5); /* Transparent black background

for text visibility */ border-radius: 10px;

} h1 { font-

size: 50px;

margin: 0;

22 | P a g e
} p{ font-

size: 20px;

margin-top: 10px;

</style>

</head>

<body>

<div class="content">

<h1>Welcome to Our Website</h1>

<p>This is an example of a webpage with a background image and multiple background


styling attributes applied.</p>

</div>

</body>

</html>

OUTPUT

23 | P a g e
8) Create a web page showing the usage of font styling attributes:-

<html>

<head>

<title>Font Tag in HTML</title>

</head>

<body>

<h2>Example of Font Tag in HTML using CSS </h2>

<p>Someone’s sitting in the shade today because someone plated a tree a long time ago. </p>

<p style="color : lightgreen;"> Someone’s sitting in the shade today because someone plated
a tree a long time ago.

</p>

<p style="font-family : Book Antiqua; color: blue; " > Someone’s sitting in the shade today
because someone plated a tree a long time ago.

</p>

<p style="font size:3px;"> Someone’s sitting in the shade today because someone
plated a tree a long time ago.

</p>

</body>

</html>

24 | P a g e
Output:-

25 | P a g e
9) Create a web page and apply all Text styling attributes use Id and class selector:-
< html>

<head>

<title>Text Styling with ID and Class Selectors</title>

</head>

<body>

<!-- Main header with ID selector -->

<h1 id="main-header">Welcome to Text Styling</h1>

<!-- Subheading with class selector -->

<h2 class="subheading">Exploring Different Text Styles Using ID and Class


Selectors</h2>

<!-- Paragraph with class selector -->

<p class="paragraph">

This webpage demonstrates the usage of various text styling properties, including font
family, font size, font weight, line height, letter spacing, and more. We are using ID and class
selectors to apply different styles to text elements on the page. Each style is unique and
customizable.

</p>

<!-- Highlighted text with ID selector -->

<p id="highlighted">

This text is highlighted with a custom background color and bold styling.

</p>

<!-- Footer with class selector -->

<p class="footer-text">

Thank you for visiting! You can learn more about text styling in CSS.

</p>

<!-- Link with class selector -->

26 | P a g e
<p>

Visit <a href="https://www.w3schools.com" class="custom-link">W3Schools</a> for


more CSS tutorials.

</p>

</body>

</html>

Output:-

27 | P a g e
10) Create a webpage and implement all list styling attributes:-
<html >

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>List Styling Example</title>

<style>

/* Global Body Styling */

body { font-family: Arial,

sans-serif; margin: 0;

padding: 0; background-

color: #f0f0f0;

} h1 { text-

align: center;

color: #2c3e50;

margin-top: 20px;

} h2 { color:

#34495e; margin-

top: 30px;

.unordered-list { list-style-type: square;

/* Square bullet */ padding-left: 20px;

.ordered-list { list-style-type: upper-roman; /*

Roman numeral */ padding-left: 20px;

28 | P a g e
.custom-ordered-list { list-style-type: none; /*

Disable default list marker */ padding-left: 20px;

.custom-ordered-list li {

list-style-image: url('https://www.svgrepo.com/show/179923/heart.svg'); /* Custom


image for list marker */ padding-left: 30px;

/* Definition List Styling */

.definition-list dt {

font-weight: bold;

color: #2c3e50; margin-

top: 15px;

.definition-list dd {

margin-left: 20px;

color: #7f8c8d;

/* Additional List Styling - Indentation and Spacing */

ul, ol {

margin: 20px;

padding: 10px;

/* Lists with List Style Position */

29 | P a g e
.list-position-inside { list-style-position: inside; /*

Marker inside the list item */

.list-position-outside { list-style-position: outside; /*

Marker outside the list item */

li {

border: 1px solid

#ecf0f1; margin: 5px;

padding: 5px;

background-color: #ffffff;

border-radius: 5px;

li:hover { background-

color: #ecf0f1;

</style>

</head>

<body>

<h1>List Styling Example</h1>

<h2>Unordered List</h2>

<ul class="unordered-list">

<li>Item 1 - Square Bullet</li>

<li>Item 2 - Square Bullet</li>

<li>Item 3 - Square Bullet</li>

</ul>

<h2>Ordered List (Roman Numerals)</h2>

30 | P a g e
<ol class="ordered-list">

<li>Item 1 - Roman numeral</li>

<li>Item 2 - Roman numeral</li>

<li>Item 3 - Roman numeral</li>

</ol>

<h2>Custom Ordered List (Image as Bullet)</h2>

<ol class="custom-ordered-list">

<li>Item 1 - Heart marker</li>

<li>Item 2 - Heart marker</li>

<li>Item 3 - Heart marker</li>

</ol>

<h2>Definition List</h2>

<dl class="definition-list">

<dt>HTML</dt>

<dd>The standard markup language for creating web pages.</dd>

<dt>CSS</dt>

<dd>A style sheet language used to describe the presentation of a document written in
HTML.</dd>

<dt>JavaScript</dt>

<dd>A programming language commonly used to create interactive effects within web
browsers.</dd>

</dl>

<h2>List Styling - Positioning of List Markers</h2>

<ul class="list-position-inside">

<li>Item 1 - Marker inside the list item</li>

<li>Item 2 - Marker inside the list item</li>

<li>Item 3 - Marker inside the list item</li>

</ul>

31 | P a g e
<ul class="list-position-outside">

<li>Item 1 - Marker outside the list item</li>

<li>Item 2 - Marker outside the list item</li>

<li>Item 3 - Marker outside the list item</li>

</ul>

</body>

</html>

OUTPUT

32 | P a g e
11) Create a Webpage with three equal columns:-
< html>

<head>

<title>Three Equal Columns</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="container">

<div class="column">

<h2>Column 1</h2>

<p>This is the content for the first column.</p>

</div>

<div class="column">

<h2>Column 2</h2>

<p>This is the content for the second column.</p>

</div>

<div class="column">

<h2>Column 3</h2>

<p>This is the content for the third column.</p>

</div>

</div>

</body>

</html>

33 | P a g e
OUTPUT

34 | P a g e
12) Create a webpage containing bootstrap table:-

< html>

<head>

<title>Bootstrap Table Example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

</head>

<body>

<div class="container mt-5">

<h2 class="mb-4">Employee Information</h2>

<table class="table table-striped table-bordered">

<thead>

<tr>

<th scope="col">#</th>

<th scope="col">Name</th>

<th scope="col">Position</th>

<th scope="col">Office</th>

<th scope="col">Age</th>

<th scope="col">Start date</th>

<th scope="col">Salary</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">1</th>

<td>JASMEHAR SINGH</td>

35 | P a g e
<td>Software Engineer</td>

<td>New York</td>

<td>28</td>

<td>2019/05/01</td>

<td>$120,000</td>

</tr>

<tr>

<th scope="row">2</th>

<td>ARSHJOT</td>

<td>Project Manager</td>

<td>London</td>

<td>35</td>

<td>2017/09/15</td>

<td>$95,000</td>

</tr>

<tr>

<th scope="row">3</th>

<td>PIYUSH</td>

<td>UX Designer</td>

<td>San Francisco</td>

<td>29</td>

<td>2018/03/22</td>

<td>$110,000</td>

</tr>

<tr>

<th scope="row">4</th>

<td>DEV</td>

36 | P a g e
<td>Data Scientist</td>

<td>Los Angeles</td>

<td>32</td>

<td>2016/07/09</td>

<td>$130,000</td>

</tr>

</tbody>

</table>

</div>

<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></scri pt>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

</body>

</html>

OUTPUT

37 | P a g e

You might also like