Scribd
Upload
64 views

Web Development

The document is a lab file submission for a Web Based Programming course at Indira Gandhi Delhi Technical University for Women. It contains code submissions and outputs for 4 questions related to HTML and CSS formatting, including creating a webpage with different CSS styles, different CSS selectors, a form with various input elements and validation, and embedding various media elements like audio, video, documents and YouTube videos.

Uploaded by

kajal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
64 views

Web Development

The document is a lab file submission for a Web Based Programming course at Indira Gandhi Delhi Technical University for Women. It contains code submissions and outputs for 4 questions related to HTML and CSS formatting, including creating a webpage with different CSS styles, different CSS selectors, a form with various input elements and validation, and embedding various media elements like audio, video, documents and YouTube videos.

Uploaded by

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

Indira Gandhi Delhi Technical University for Women

(Established by Govt. of Delhi vide Act 09 of 2012)


(Formerly Indira Gandhi Institute of Technology)
Kashmere Gate, Delhi - 110006

LAB FILE
For
Web Based Programming

MCA (III Semester)


MCA-223

Submitted by:
Chinmay Chahar
Roll no: 01404092022
Ques 1) Create a webpage with a basic text formatting tag which includes 3 different kind
of CSS in a single page. The page should include the following points
● Image of university
● Introduction of university
● In Introduction part the university name should be bold and italic, colour
should be red
● The page should be in 3 paragraphs. Each paragraph should contains
different kind of CSS

Code:

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<style>

/* CSS for the second paragraph */


.vision {
font-size: 16px;
color: rgb(6, 32, 6);
padding: 5px;
font-weight:bold;
}

</style>
<title>Welcome to IGDTUW</title>
</head>
<body>
<img class="logo" src="logo.jpg" alt="University logo" width="300">
<h1 class="university-name" >INDIRA GANDHI DELHI TECHNICAL UNIVERSITY FOR
WOMEN</h1>
<!-- Introduction -->
<div class="introduction" style="font-size: 16px; padding:5px ; color: red;">
<h3>INTRODUCTION</h3>
<p>Indira Gandhi Delhi Technical University for Women <u>(IGDTUW) </u>was
established by the Govt. NCT of Delhi in May, 2013 vide Delhi Act 09 of 2012, as a
non-affiliating University to facilitate and promote studies, research, technology, innovation,
incubation and extension work in emerging areas of professional education among women, with
focus on engineering, technology, applied sciences, architecture and its allied areas with the
objective to achieve excellence in these and related fields.Erstwhile Indira Gandhi Institute of
Technology (IGIT) was established in 1998 by Directorate of Training and Technical Education,
Govt. of NCT of Delhi as the first engineering college for women only. In 2002, the college
became the first constituent college of Guru Gobind Singh Indraprastha University. Over the
years erstwhile IGIT has significantly contributed to the growth of quality technical education in
the country and has become not only one of the premier institutions of Delhi but as the most
prestigious college of north India

</p>
</div>
<!-- University vision -->
<div >
<h3>VISION</h3>
<p class="vision">To make India a Knowledge Society and Knowledge Economy by
empowering the women of our country through education in Engineering, Science, Management
and Technology and To become one of the top technical Universities in the country known for its
value based, quality technical education supported with industry relevant research, with focus
on environmental and social issues.</p>
</div>
<!-- university-mission -->
<div >
<h3>MISSION</h3>
<p class="mission" > To foster an environment for excellence in professional
education and ensure active participation of women in the field of Engineering, Science,
Management and Technology, while striking out a work-life balance.
To start new professional courses for women in sun-rise disciplines and forge
alliances with industry to impart industry relevant education.
To emancipate women through pursuit of knowledge enabling them to gain equal
status in society through realization of their rights and responsibilities
To develop sustainable systems and state-of-the-art infrastructure to enable the
Indian women to become the future leaders, managers, researchers and productive team
players in the field of science, technology and management.</p>
</div>

</body>
</html>

Index.css

h3{
color: rgb(6, 102, 6);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.logo{
width: 200px;
height: 200px;
padding-left:45%;
padding-top:3%;
}

/* CSS for the university name in the introduction */


.university-name {
font-weight: bold;
color:rgb(22, 114, 22);
text-align: center;
}

/* CSS for the third paragraph */


.mission {
font-size: 16px;
padding: 5px;
font-style: italic;
}

Output:
Ques 2) Write an HTML Script to differentiate between 3 selectors in a single web page.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for the first selector */
#id-selector {
background-color: #4a387c;
color: white;
padding:10px;
margin:10px;
}

/* CSS for the second selector */


.class-selector {
background-color: #554ab8;
color: white;
padding:10px;
margin:10px;
}

/* CSS for the third selector */


p{
background-color: #699de0;
color: white;
padding:10px;
margin: 10px;
font-weight: bold;
}
</style>
<title>Types of selectors"></title>
</head>
<body>
<h1 style="text-align :center ;">TYPES OF SELECTORS </h1>
<!-- First Selector (ID) -->
<div id="id-selector">
<h3>This is an ID Selector</h3>

</div>
<!-- Second Selector (Class) -->
<div class="class-selector">
<h3>This is the Class selector</h3>
</div>

<!-- Third Selector (Element) -->


<p> This is the Element Selector</p>
</body>
</html>

Output:

Ques 3) Make a form which is having the name of university in legend, and must have the
following elements
● TextBox - should not accept more than 10 characters
● TextArea - should not accept more than 500 characters
● CheckBox - At Least 4 checkboxes, only maximum 3 can be selected
● Submit button - redirect to another page with a message
● Email
● Radio button - select one at a time
● Contact number - proper validation should be implemented
Validation should apply for every field. Validation should be applied using regular
expression

Code:

Index.html

<!DOCTYPE html>
<html>
<head>
<title>Question -3</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form id="universityForm" onsubmit="return validateForm();" action="submit.html">
<fieldset>
<legend>Indira Gandhi Delhi Technical University For Women </legend>
<br>
<label for="UniversityRollno">University Rollno:</label>
<input type="text" id="UniversityRollno" name="UniversityRollno" maxlength="10"
required>
<br>
<label>Select your department:</label>
<input type="radio" name="radio" value="radio"> CSE
<input type="radio" name="radio" value="radio"> IT
<input type="radio" name="radio" value="radio"> AI/ML
<br>
<label>Choose Your Subjects:</label>
<input type="checkbox" name="checkbox"> Web Deveopment
<input type="checkbox" name="checkbox"> Programming with java
<input type="checkbox" name="checkbox"> SQL
<input type="checkbox" name="checkbox"> Machine Learning
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="contactNumber">Contact Number:</label>
<input type="tel" id="contactNumber" name="contactNumber" pattern="[0-9]{10}"
required>
<br>
<label for="comments">How is your experience about the University (up to 500
characters):</label>
<textarea id="comments" name="comments" rows="5" cols="40" maxlength="500"
required></textarea><br>
<br>
<input type="submit" value="Submit">

</fieldset>
</form>
<script src="script.js"></script>
</body>
</html>

Script.js
function validateForm() {
// Checkbox validation
let checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
if (checkboxes.length > 3) {
alert("You can select a maximum of 3 checkboxes.");
return false;
}

// Contact number validation using regular expression


let contactNumberInput = document.getElementById('contactNumber');
let contactNumberValue = contactNumberInput.value;
let contactNumberPattern = /^[0-9]{10}$/;
if (!contactNumberPattern.test(contactNumberValue)) {
alert("Please enter a valid 10-digit contact number.");
return false;
}

return true;
}

Style.css

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

fieldset {
width:70%;
margin: 10 auto;
border: 2px solid #0a0202;
padding: 20px;
}

label, input, textarea {


display: inline;
margin: 7px 7px;
}
Output:

Ques 4) Create a webpage with all media elements following are the formats.
● Audio file should be in mp3 format
● Video file in mp4
● Data file should be in word format
● Embed any document or image or file as per your choice
● Use iframe to attach any youtube video with autoplay and muted property.

Code:

Index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Media Elements</h1>

<h2>Audio (MP3)</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<h2>Video (MP4)</h2>
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>

<h2>Data File (Word)</h2>


<a href="document.docx" download>Download Word Document</a>

<h2>Embedded Document/Image/File</h2>
<embed src="sample.pdf" type="application/pdf" width="500" height="400">

<h2>Embedded YouTube Video</h2>


<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1" frameborder="0"
allowfullscreen></iframe>
</body>
</html>

Style.css

body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}

h1, h2 {
margin-top: 20px;
}

audio, video {
width: 80%;
max-width: 640px;
display: block;
margin: 20px auto;
}

a{
display: inline-block;
margin: 20px;
font-size: 18px;
text-decoration: none;
background-color: #0078d4;
color: white;
padding: 10px 20px;
border-radius: 5px;
}

a:hover {
background-color: #00549b;
}

Output:
Ques 5) Make a responsive webpage with 3, 6, 8, 12 columns

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Responsive Grid</title>
</head>
<body>
<div class="container">
<h1>Responsive Grid</h1>

<!-- 3 Columns -->


<div class="row">
<div class="col-md-4">
<div class="box">1</div>
</div>
<div class="col-md-4">
<div class="box">2</div>
</div>
<div class="col-md-4">
<div class="box">3</div>
</div>
</div>

<!-- 6 Columns -->


<div class="row">
<div class="col-md-2">
<div class="box">1</div>
</div>
<div class="col-md-2">
<div class="box">2</div>
</div>
<div class="col-md-2">
<div class="box">3</div>
</div>
<div class="col-md-2">
<div class="box">4</div>
</div>
<div class="col-md-2">
<div class="box">5</div>
</div>
<div class="col-md-2">
<div class="box">6</div>
</div>
</div>

<!-- 8 Columns -->


<div class="row">
<div class="col-md-3">
<div class="box">1</div>
</div>
<div class="col-md-3">
<div class="box">2</div>
</div>
<div class="col-md-3">
<div class="box">3</div>
</div>
<div class="col-md-3">
<div class="box">4</div>
</div>
</div>

<!-- 12 Columns -->


<div class="row">
<div class="col-md-4">
<div class="box">1</div>
</div>
<div class="col-md-4">
<div class="box">2</div>
</div>
<div class="col-md-4">
<div class="box">3</div>
</div>
</div>
</div>
</body>
</html>

Output:

Ques 6) Implement any javascript function and reflect the changes in the html

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* (Same CSS styles as in the previous example) */
/* ... */
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="column col-3">
<div class="content">
3 Columns
</div>
</div>
<div class="column col-6">
<div class="content">
6 Columns
</div>
</div>
<div class="column col-8">
<div class="content">
8 Columns
</div>
</div>
<div class="column col-12">
<div class="content">
12 Columns
</div>
</div>
</div>
<button id="changeColorButton">Change Colors</button>
</div>

<script>
// JavaScript function to change column colors
document.getElementById('changeColorButton').addEventListener('click', function () {
var columns = document.querySelectorAll('.column');

// Define an array of new colors


var newColors = ['#ffcccb', '#b3e0ff', '#caffbf', '#ffd700'];

for (var i = 0; i < columns.length; i++) {


columns[i].style.backgroundColor = newColors[i];
}
});
</script>
</body>
</html>

Output:
Ques 7) Implement any javascript call back function and reflect the changes in the html

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="column col-12">
<div class="content">
<p id="contentToChange">Click the button to change me!</p>
</div>
</div>
</div>
<button id="changeContentButton">Change Content</button>
</div>

<script>
// JavaScript callback function to change the content of an HTML element
function changeContent() {
const contentElement = document.getElementById('contentToChange');
contentElement.textContent = 'Content has been changed!';
}

// Add an event listener to the button


document.getElementById('changeContentButton').addEventListener('click',
changeContent);
</script>
</body>
</html>

Output:

Ques 8) Implement any javascript asynchronous function and reflect the changes in the
html

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="column col-12">
<div class="content">
<h2 id="dataDisplay">Data will be displayed here</h2>
</div>
</div>
</div>
<button id="getDataButton">Get Data</button>
</div>

<script>
// JavaScript asynchronous function to fetch and display data
async function fetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
document.getElementById('dataDisplay').textContent = `Data: ${data.title}`;
} catch (error) {
console.error('Error:', error);
}
}

// Add an event listener to the button


document.getElementById('getDataButton').addEventListener('click', fetchData);
</script>
</body>
</html>

Output:

You might also like