Scribd
Upload
12 views53 pages

Practical File..(Web Technology)Final

Uploaded by

divyanshsingla1947
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views53 pages

Practical File..(Web Technology)Final

Uploaded by

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

PRACTICAL FILE

OF
INTRODUCTION TO WEB TECHNOLOGY (ITWT)
BCA Program (Second Semester)

Submitted To: Submitted By:


Manish Kumar Hooda Name:
Assistant Professor Course:
Department of Computer Application Roll No.
Reg No.

Program: BCA
Semester: Second
Course: (Pr)-Introduction to Web Technology
Course Code: B23-CAP-202

1|Page
2|Page
LIST OF PROGRAMS
Program
Sr. No. Programs Name Date Signature
1. Create a web page using an ordered list and an
unordered list.
2. Design a web page to show your institute with
hyperlinks.
3. Create your resume on an HTML page.
4. Create a web page and divide the web page into
four frames. In one frame create three links that
will display different HTML forms in the
remaining three frames respectively.
5. Create a web page to show the college record in
the form of a table.
6. Write an HTML code to add internal CSS on a
webpage
7. Design a blog-style personal website.
8. Design a web page to display your college with
hyperlinks.
9. Write a JavaScript function to calculate the sum of
two numbers.
10. Write a JavaScript program to find the maximum
number in an array.
11. Write a JavaScript function to check if a given
string is a palindrome (reads the same forwards
and backward).
12. Write a CSS file and attach it to any 3 HTML web
pages.
13. Use Div and span in a page and color two words
with the same colors.
14. Using HTML, CSS create a styled checkbox with
animation on state change
15. Design a web page that is like a compose page
of e-mail. It should have:
a) Text boxes for To, CC, and BCC respectively.
b) Text field for the message.
c) Send button.
d) Option for selecting a file for attachment
16. After clicking the send button a new page should
open with the display message “Message has been
sent”.

3|Page
Program No.-1
Create a web page using an ordered list and an unordered list.
<html>
<head>

<title>Ordered and Unordered Lists Example</title>


</head>
<body>

<h1>My Favorite Fruits</h1>

<!-- Unordered List -->


<h2>Unordered List (Fruits I like)</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Strawberry</li>
</ul>

<h2>Ordered List (Fruits I Don't Like)</h2>


<!-- Ordered List -->
<ol>
<li>Mango.</li>
<li>Papaya.</li>
<li>Grapes.</li>
</ol>
</body>

4|Page
</html>
OUTPUT

5|Page
Program-2

Design a web page to show your institute with hyperlinks.

<html>

<head>

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

<title>My College</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f8fb;

margin: 0;

padding: 0;

header {

background-color: #004080;

color: white;

padding: 20px;

text-align:

center;

nav {

background-color: #007acc;

display: flex;

justify-content: center;

6|Page
padding: 10px;

7|Page
}

nav a {

color: white;

text-decoration: none;

margin: 0 15px;

font-weight: bold;

nav a:hover {

text-decoration: underline;

section

{ padding:

20px;

text-align: center;

footer {

background-color: #004080;

color: white;

text-align: center;

padding: 10px;

</style>

</head>

<body>

8|Page
9|Page
<header>

<h1>Welcome to My College</h1>

</header>

<nav>

<a href="https://www.sgi.ac.in/about">About Us</a>

<a href="https://www.sgi.ac.in/courses">Courses</a>

<a
href="https://www.sgi.ac.in/assets/images/Image%20Carousel/landscape2.png">Admissions
</a>

<a href="https://www.sgi.ac.in/gallery">Campus Life</a>

<a href="https://www.sgi.ac.in/contact">Contact</a>

</nav>

<section id="about">

<h2>About Us</h2>

<p>My College is a prestigious institution committed to academic excellence and


innovation.</p>

</section>

<section id="courses">

<h2>Courses</h2>

<p>We offer undergraduate and postgraduate programs in science, arts, commerce, and
technology.</p>

</section>

10 | P a g e
<section id="admissions">

<h2>Admissions</h2>

<p>Apply now to be part of an inspiring educational journey. Admissions are open for
the 2025-26 session.</p>

</section>

<section id="campus">

<h2>Campus Life</h2>

<p>Our campus offers a vibrant community with clubs, events, sports, and cultural
activities.</p>

</section>

<section id="contact">

<h2>Contact Us</h2>

<p>Email: [email protected] | Phone: +1 234-567-890</p>

</section>

<footer>

<p>&copy; 2025 My College. All rights reserved.</p>

</footer>

</body>

</html>

11 | P a g e
OUTPUT

12 | P a g e
Program: 3

Create your resume on an HTML page.

<html>

<head>

<title>My Resume</title>

</head>

<body>

<h1>Muskan..</h1>

<p>Email: [email protected] </p>

<h2>Objective</h2>

<p>Passionate software developer with 3+ years of experience in full-stack


development.</p>

<h2>Education</h2>

<ul>

<li><strong> Master of Computer Application</strong> DCRUST </li>

<li><strong>Bachelor of Science in Computer Science</strong> MDU</li>

</ul>

<h2>Work Experience</h2>

<ul>

<li><strong>Software Developer</strong>

13 | P a g e
<ul>

<li>Developed web applications using JavaScript, React, and Node.js.</li>

<li>Collaborated with cross-functional teams to design and implement new


features.</li>

</ul>

</li>

</ul>

<h2>Skills</h2>

<ul>

<li>Programming Languages: JavaScript, Python, Java</li>

<li>Web Technologies: HTML, CSS, React, Node.js</li>

</ul>

<h2>Hobbies</h2>

<ul>

<li>Reading tech blogs and articles</li>

<li>Traveling and photography</li>

</ul>

</body>

</html>

14 | P a g e
OUTPUT

15 | P a g e
Program: 4

Create a web page and divide the web page into four frames. In one frame create three
links that will display different HTML forms in the remaining three frames
respectively.

<html>

<head>

<meta charset="UTF-8" />

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

<title>My second page</title>

<style>

body, html

{ margin: 10;

height: 100%;

.grid-container

{ display: grid;

grid-template-columns: 1fr 1fr;

grid-template-rows: 1fr 1fr;

height: 100vh;

.frame {

border: 5px solid #333;

padding: 20px;

box-sizing: border-box;

.frame1 { background-color: #f8b400; }

16 | P a g e
.frame2 { background-color: #6a2c70; color: white; }

.frame3 { background-color: #1e90ff; color: white; }

.frame4 { background-color: #28df99; }

</style>

</head>

<body>

<div class="grid-container">

<div class="frame frame1">Frame 1</div>

<div class="frame frame2">Frame 2</div>

<div class="frame frame3">Frame 3</div>

<div class="frame frame4">Frame 4</div>

</div>

</body>

</html>

OUTPUT

17 | P a g e
Program: 5
Create a web page to show the college record in the form of a table.
<html>

<head>

<meta charset="UTF-8">

<title>Samlkha Group of Institutions</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

padding: 40px;

h1 {

text-align: center;

table {

margin: 0 auto;

width: 80%;

border-collapse: collapse;

background-color: #fff;

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

th, td {

border: 1px solid #ddd;

padding: 12px 15px;

text-align: center;

18 | P a g e
}

th {

background-color: #4CAF50;

color: white;

tr:nth-child(even)

{ background-color:

#f9f9f9;

tr:hover {

background-color: #f1f1f1;

</style>

</head>

<body>

<h1>College Record</h1>

<table>

<thead>

<tr>

<th>Roll No</th>

<th>Student Name</th>

<th>Course</th>

<th>Year</th>

<th>Grade</th>

</tr>

</thead>
19 | P a g e
20 | P a g e
<tbody>

<tr>

<td>2418007</td>

<td>Shubham</td>

<td>BCA</td>

<td>2025</td>

<td>A+</td>

</tr>

<tr>

<td>102</td>

<td>NIkhil</td>

<td>BCA</td>

<td>2025</td>

<td>B+</td>

</tr>

</tbody>

</table>

</body>

</html>

OUTPUT

21 | P a g e
Program: 6

Write an HTML code to add internal CSS on a webpage

<html >

<head>

<title>Internal CSS Example</title>

<style>

body {

background-color: #f0f0f0;

font-family: Arial, sans-serif;

color: #333;

text-align: center;

padding: 50px;

h1 {

color: #4CAF50;

p{

font-size: 18px;

.highlight {

22 | P a g e
background-color: yellow;

padding: 5px;

</style>

</head>

<body>

<h1>Welcome to My Webpage</h1>

<p>This is a paragraph styled with internal CSS.</p>

<p class="highlight">This paragraph has a highlighted background.</p>

</body>

</html>

OUTPUT

23 | P a g e
Program: 7

Design a blog-style personal website.

24 | P a g e
Program: 8

Design a web page to display your college with hyperlinks.

<html >

<head>

<meta charset="UTF-8">

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

<title>My Institute</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

text-align: center;

background-color: #f4f4f4;

header {

background-color: #005f73;

color: white;

padding: 20px;

font-size: 24px;

nav {

background: #0a9396;

padding: 10px;

25 | P a g e
nav a {

color: white;

margin: 0 15px;

text-decoration: none;

font-size: 18px;

section

{ margin:

20px;

padding: 20px;

background: white;

border-radius: 10px;

box-shadow: 2px 2px 10px rgba(0,0,0,0.1);

footer {

background: #005f73;

color: pink;

padding:10px;

margin-top: 20px;

</style>

</head>

<body>

<header>

Welcome to Samalkha Group of Institutions

</header>
26 | P a g e
27 | P a g e
<nav>

<a href="#about">About Us</a>

<a href="#courses">Courses</a>

<a href="#admissions">Admissions</a>

<a href="#contact">Contact Us</a>

</nav>

<section id="about">

<h2>About Us</h2>

<p>Our institute is committed to excellence in education and research. We offer a range of


courses to help students achieve their goals</p>.

<p>At SGI, We Make You Believe In Yourself! Think Different - Think Samalkha</p

</section>

<section id="courses">

<h2>Courses</h2>

<p>We offer a variety of courses in technology(BBA,BCA,MBA,B.Tech(CSE+Aero.


+Electrical+Civil),Diploma(Civil+Mechanical). Explore our programs to find the best fit for you.</p>

</section>

<section id="admissions">

<h2>Admissions</h2>

<p>Join our institute by following our easy admission process. Apply online and start your
journey with us.</p>

</section>

<section id="contact">

<h2>Contact Us</h2>

<p>Email: [email protected]</p>

<p>Phone: 9873440268</p>

28 | P a g e
</section>

<footer>

&copy; 2025 My Institute | All rights reserved

</footer>

</body>

</html>

OUTPUT

29 | P a g e
Program: 9

Write a JavaScript function to calculate the sum of two numbers.

<html>

<head>

<meta charset="UTF-8">

<title>Sum of Two Numbers</title>

<script>

function calculateSum() {

// Get the values from the input fields

var num1 = parseFloat(document.getElementById("number1").value);

var num2 = parseFloat(document.getElementById("number2").value);

// Calculate the sum

var sum = num1 + num2;

// Display the result

document.getElementById("result").innerText = "Sum: " + sum;

</script>

</head>

<body>

<h2>Calculate Sum of Two Numbers</h2>

<input type="number" id="number1" placeholder="Enter first number">

<input type="number" id="number2" placeholder="Enter second number">

30 | P a g e
<button onclick="calculateSum()">Calculate</button>

<p id="result"></p>

</body>

</html>

OUTPUT

31 | P a g e
Program: 10

Write a JavaScript program to find the maximum number in an array.

<html>

<head>

<title>Find Maximum Number in Array</title>

</head>

<body>

<h1>Find the Maximum Number</h1>

<p id="arrayDisplay"></p>

<button onclick="findMax()">Find Maximum</button>

<p id="result"></p>

<script>

// Example array

const numbers = [23, 45, 67, 89, 12, 99, 34];

// Display the array

document.getElementById('arrayDisplay').innerText = "Array: " + numbers.join(", ");

// Function to find maximum

function findMax() {

const maxNumber = Math.max(...numbers);

32 | P a g e
document.getElementById('result').innerText = "Maximum number is: " +
maxNumber;

</script>

</body>

</html>

OUTPUT

33 | P a g e
Program: 11

Write a JavaScript function to check if a given string is a palindrome (reads the same
forwards and backward)

<html>

<head>

<title>Palindrome Checker</title>

<style>

body {

font-family: Arial, sans-serif;

padding: 20px;

input, button

{ padding:

8px; margin:

5px 0;

</style>

</head>

<body>

<h1>Palindrome Checker</h1>

<input type="text" id="textInput" placeholder="Enter text here">

<button onclick="checkPalindrome()">Check</button>

34 | P a g e
35 | P a g e
<p id="result"></p>

<script>

function checkPalindrome() {

const input = document.getElementById('textInput').value;

const cleanInput = input.toLowerCase().replace(/[^a-z0-9]/g,

''); const reversedInput = cleanInput.split('').reverse().join('');

if (cleanInput === reversedInput && cleanInput !== "")

{ document.getElementById('result').textContent = `"${input}" is a palindrome!`;

} else {

document.getElementById('result').textContent = `"${input}" is not a palindrome.`;

</script>

</body>

</html>

36 | P a g e
OUTPUT

37 | P a g e
Program: 12

Write a CSS file and attach it to any 3 HTML web pages

<html>

<head>

<title>Home Page</title>

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

</head>

<body>

<nav>

<a href="https://sgi.ac.in/">Home</a>

</nav>

<h1>Welcome to the Home Page</h1>

<p>This is the homepage of our simple website. Enjoy your stay!</p>

</body>

</html>

<html>

<head>

<title>About Us</title>

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

38 | P a g e
</head>

<body>

<nav>

<a href="https://sgi.ac.in/courses">About</a>>

</nav>

<h1>About Us</h1>

<p>We are a team dedicated to building simple and effective web pages using HTML and
CSS.</p>

</body>

</html>

<html>

<head>

<title>Contact Us</title>

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

</head>

<body>

<nav>

<a href="https://sgi.ac.in/contact">Contact</a>

39 | P a g e
</nav>

<h1>Contact Us</h1>

<p>If you have any questions, feel free to reach out via email or social media!</p>

</body>

</html>

OUTPUT

40 | P a g e
Program: 13

Use Div and span in a page and color two words with the same colors.

<html>
<head>
<style>
.highlight
{ color: blue;
}
</style>
</head>
<body>

<div>
This is a <span class="highlight">blue</span> word in a div.
</div>

<span>
Here is another <span class="highlight">blue</span> word in a span.
</span>

</body>
</html>
OUTPUT

41 | P a g e
Program: 14

Using HTML, CSS create a styled checkbox with animation on state change

<html>
<head>
<title>Animated Checkbox</title>
<style>
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}

.checkbox-wrapper {
display: flex;
align-items: center;
cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"]
{ display: none;
}

.custom-checkbox {
width: 24px;
height: 24px;
border: 2px solid #555;

42 | P a g e
border-radius: 6px;
position: relative;
transition: background-color 0.3s, border-color 0.3s;
}

.custom-checkbox::after {
content: '';
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}

input[type="checkbox"]:checked + .custom-checkbox
{ background-color: #4CAF50;
border-color: #4CAF50;
}

input[type="checkbox"]:checked + .custom-checkbox::after
{ transform: rotate(45deg) scale(1);
opacity: 1;
}

.label-text {

43 | P a g e
margin-left: 10px;
font-size: 16px;
}
</style>
</head>
<body>

<label class="checkbox-wrapper">
<input type="checkbox" id="checkbox">
<span class="custom-checkbox"></span>
<span class="label-text">I agree</span>
</label>
</body>
</html>

44 | P a g e
OUTPUT

45 | P a g e
Program: 15

Design a web page that is like a compose page of e-mail. It should have:
a) Text boxes for To, CC, and BCC respectively.
b) Text field for the message.
c) Send button.
d) Option for selecting a file for attachment

<html>

<head>

<title>Email Compose Page</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 40px;

.form-group {

margin-bottom: 15px;

label {

display: inline-block;

width: 60px;

input[type="text"], input[type="email"], textarea

{ width: 400px;

padding: 8px;

font-size: 14px;

46 | P a g e
}

textarea

{ height:

200px; resize:

vertical;

.button {

padding: 10px 20px;

font-size: 16px;

background-color: #007bff;

color: white;

border: none;

cursor: pointer;

.button:hover {

background-color: #0056b3;

</style>

</head>

<body>

<h2>Compose Email</h2>

<form action="#" method="post" enctype="multipart/form-data">

<div class="form-group">

<label for="to">To:</label>

47 | P a g e
<input type="email" id="to" name="to" required>

48 | P a g e
</div>

<div class="form-group">

<label for="cc">CC:</label>

<input type="email" id="cc" name="cc">

</div>

<div class="form-group">

<label for="bcc">BCC:</label>

<input type="email" id="bcc" name="bcc">

</div>

<div class="form-group">

<label for="message">Message:</label><br>

<textarea id="message" name="message" placeholder="Write your message


here..."></textarea>

</div>

<div class="form-group">

<label for="attachment">Attach:</label>

<input type="file" id="attachment" name="attachment">

</div>

<div class="form-group">

<button type="submit" class="button">Send</button>

</div>

</form>

</body>

49 | P a g e
</html>

OUTPUT

50 | P a g e
Program: 16

After clicking the send button a new page should open with the display
message “Message has been sent”.
<html>

<head>

<title>Send Message</title>

<script>

function sendMessage() {

const newWindow = window.open('', '_blank');

newWindow.document.write(`

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Sent</title>

</head>

<body>

<h1>Message has been sent</h1>

</body>

</html>

`);

newWindow.document.close();

</script>

</head>

51 | P a g e
<body>

<h2>Contact Form</h2>

<form onsubmit="sendMessage(); return false;">

<label for="message">Your Message:</label><br>

<textarea id="message" name="message" rows="4" cols="30"></textarea><br><br>

<button type="submit">Send</button>

</form>

</body>

</html>

OUTPUT

–––––

52 | P a g e
53 | P a g e

You might also like