WD 1
(4.5CS07O101)
LAB FILE
Submitted by: Duke Dhawan
(Roll No):- 2K25CSUN01270
Submitted to:
(Assistant Professor)
DEPARTMENT OF COMPUTER SCIENCE & TECHNOLOGY
MANAV RACHNA UNIVERSITY
Sector-43, Aravali Hills, Faridabad
July 2025 – Dec 2025
INDEX
Lect .no LAB Topics Date of Conduct Remarks
1 HTML5.0 Basic Tags
2 HTML5.0: DOM & Forms
3 HTML5.0: Canvas &SVG
4 HTML5.0: Plugins
5 CSS
6 CSS
7 CSS
8 JavaScript
9 JavaScript
10 JavaScript
11 Minor Project
Practical No. 1
Aim: Introduction to Web Development and W3C guidelines.
1. Introduction:
Supported by all web browsers and CSS-based compatibility improvements.
It is a lightweight and hence widely used framework for creating responsive sites.
It's easily customizable.
It has a simple and effective grid system.
2. Theory: HTML (HyperText Markup Language) is the standard markup language for creating web pages.
Below are the fundamental tags used to structure a document:
<html>: The root element of the page; all other elements are contained within it.
<head>: Contains meta-information about the document (like the title).
<title>: Sets the title of the web page (shown in the browser tab).
<body>: Contains the visible content of the webpage, such as text, images, and links.
<h1> to <h6>: Heading tags, where <h1> is the largest/most important and <h6> is the smallest.
<p>: Defines a paragraph of text.
<a> (Anchor): Used to create hyperlinks. The href attribute specifies the destination URL.
<ul>, <ol>, <li>: Used for lists. <ul> creates an unordered (bulleted) list, and <li> defines each item.
Source Code:
HTML
<html>
<head>
<title>Practical 1: Basic HTML Tags</title>
</head>
<body>
<h1>Introduction to HTML</h1>
<p>HTML stands for HyperText Markup Language. It is the standard markup language for creating Web
pages.</p>
<p>HTML allows us to format text, such as making it <b>bold</b>, <i>italic</i>, or
<u>underlined</u>.</p>
<h3>Web Development Topics:</h3>
<ul>
<li>HTML (Structure)</li>
<li>CSS (Styling)</li>
<li>JavaScript (Logic)</li>
</ul>
<h3>Useful Link:</h3>
<p>Click here to visit <a href="[Link]
</body>
</html>
Output:
Practical No. 2
Aim: To create a Registration Form using HTML5 Tags (Forms & DOM structure).
Source Code:
HTML
<html>
<head>
<title>Practical 2: HTML Forms</title>
</head>
<body>
<h1>Student Registration Form</h1>
<form>
<label>Full Name:</label>
<input type="text" placeholder="Enter your name">
<br><br>
<label>Email ID:</label>
<input type="email" placeholder="Enter your email">
<br><br>
<label>Gender:</label>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
<br><br>
<label>Interests:</label>
<input type="checkbox"> Coding
<input type="checkbox"> Sports
<input type="checkbox"> Music
<br><br>
<label>Select Course:</label>
<select>
<option>[Link] CSE</option>
<option>[Link] AI & ML</option>
<option>BCA</option>
</select>
<br><br>
<input type="submit" value="Register Now">
</form>
</body>
</html>
Output:
Practical No. 3
Aim: To demonstrate HTML5 Graphics using Canvas and SVG.
Source Code:
HTML
<html>
<head>
<title>Practical 3: Canvas and SVG</title>
</head>
<body>
<h1>HTML5 Canvas Graphics</h1>
<p>Canvas is used to draw graphics, on the fly, via scripting (usually JavaScript).</p>
<canvas id="myCanvas" width="200" height="100" style="border:2px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link] = "blue";
[Link](10, 10, 150, 80); // Draws a blue rectangle
</script>
<hr>
<h1>HTML5 SVG Graphics</h1>
<p>SVG stands for Scalable Vector Graphics.</p>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Output:
Practical No. 4
Aim: To demonstrate HTML5 Plugins and Media elements.
Source Code:
HTML
<html>
<head>
<title>Practical 4: Plugins & Media</title>
</head>
<body>
<h1>HTML5 Plugins & Media</h1>
<h3>1. Using Embed Tag (to display a website/image)</h3>
<p>The embed tag defines a container for an external resource.</p>
<embed src="[Link] width="300" height="200">
<hr>
<h3>2. Using Object Tag</h3>
<p>The object tag is also used to support plugins.</p>
<object data="[Link] width="300" height="200"></object>
<hr>
<h3>3. HTML5 Video (Modern Standard)</h3>
<p>Instead of Flash plugins, HTML5 uses the video tag.</p>
<video width="320" height="240" controls>
<source src="[Link] type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Output:
Practical No. 5
Aim: To demonstrate the implementation of CSS (Cascading Style Sheets) using Inline
and Internal methods.
Source Code:
<html>
<head>
<title>Practical 5: CSS Basics</title>
<style>
body {
background-color: #f4f4f9; /* Light gray background */
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
.internal-text {
color: #333;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Introduction to CSS</h1>
<h3>1. Internal CSS</h3>
<p class="internal-text">
This paragraph is styled using <b>Internal CSS</b> (written in the <head> section).
It creates a clean look for the whole page.
</p>
<hr>
<h3>2. Inline CSS</h3>
<p style="color: red; font-weight: bold; font-size: 20px;">
This paragraph is styled using <b>Inline CSS</b>.
The style is written directly inside the tag. It is useful for quick, specific changes.
</p>
</body>
</html>
Output:
Practical No. 6
Aim: To demonstrate CSS Selectors (Class & ID) and Table Styling.
Source Code:
HTML
<html>
<head>
<title>Practical 6: CSS Selectors & Tables</title>
<style>
/* Element Selector: Styles all h1 tags */
h1 {
text-align: center;
color: #333;
}
/* ID Selector: Used for unique elements (starts with #) */
#unique-header {
background-color: navy;
color: white;
padding: 10px;
}
/* Class Selector: Can be used on multiple elements (starts with .) */
.highlight {
background-color: yellow;
font-weight: bold;
}
/* CSS for Table (Syllabus Requirement) */
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse; /* Removes double borders */
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50; /* Green Header */
color: white;
}
</style>
</head>
<body>
<h2 id="unique-header">Student Data Table (ID Selector)</h2>
<p>Below is a list of students styled using <span class="highlight">CSS Classes and Table
properties</span>.</p>
<table>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Branch</th>
<th>Grade</th>
</tr>
<tr>
<td>101</td>
<td>Duke Dhawan</td>
<td>AI & ML</td>
<td class="highlight">A+</td>
</tr>
<tr>
<td>102</td>
<td>Rahul Sharma</td>
<td>CSE</td>
<td>A</td>
</tr>
<tr>
<td>103</td>
<td>Priya Singh</td>
<td>CSE</td>
<td>B+</td>
</tr>
</table>
</body>
</html>
Output:
Practical No. 7
Aim: To demonstrate the CSS Box Model (Margin, Border, and Padding).
Source Code:
HTML
<html>
<head>
<title>Practical 7: CSS Box Model</title>
<style>
body {
font-family: Arial, sans-serif;
}
/* Box 1: Demonstrating the Box Model parts */
.box-model {
width: 300px; /* Content Width */
background-color: lightblue;/* Content Background */
padding: 40px; /* Space INSIDE the border (around content) */
border: 5px solid navy; /* The border itself */
margin: 50px; /* Space OUTSIDE the border */
text-align: center;
font-weight: bold;
}
/* Box 2: Just to show the gap caused by margin */
.reference-box {
width: 300px;
background-color: lightgray;
padding: 20px;
margin-left: 50px; /* Aligning with the box above */
border: 2px dashed black;
}
</style>
</head>
<body>
<h1>CSS Box Model Demonstration</h1>
<p>The Box Model consists of: <b>Content</b>, <b>Padding</b>, <b>Border</b>, and
<b>Margin</b>.</p>
<div class="box-model">
This is the Content.<br>
(Padding is the space around this text, inside the Blue Border)
</div>
<div class="reference-box">
Second Box.<br>
(Notice the gap between this box and the blue box? That is the Margin.)
</div>
</body>
Output:
Practical No. 8
Aim: Introduction to JavaScript (Variables, Operators, and Dialog Boxes).
Source Code:
HTML
<html>
<head>
<title>Practical 8: JavaScript Basics</title>
</head>
<body>
<h1>JavaScript Basics</h1>
<p>Click the buttons below to see JavaScript in action.</p>
<button onclick="showAlert()">Show Welcome Alert</button>
<br><br>
<button onclick="calculateSum()">Calculate 10 + 20</button>
<p id="result" style="color: blue; font-weight: bold;"></p>
<script>
// Function 1: Shows a Pop-up Alert
function showAlert() {
alert("Hello! Welcome to JavaScript learning.");
}
// Function 2: Variables and Operators
function calculateSum() {
var a = 10; // Variable 1
var b = 20; // Variable 2
var sum = a + b; // Operator (+)
// Displaying result on the webpage using ID
[Link]("result").innerHTML = "The Sum of 10 + 20 is: " + sum;
}
</script>
</body>
</html>
Output:
Practical No. 9
Aim: To demonstrate Control Structures (If-Else) and Functions in JavaScript.
Source Code:
HTML
<html>
<head>
<title>Practical 9: If-Else and Functions</title>
<style>
body { font-family: sans-serif; text-align: center; margin-top: 50px; }
input { padding: 10px; }
button { padding: 10px 20px; cursor: pointer; background-color: #4CAF50; color: white; border: none; }
#msg { margin-top: 20px; font-weight: bold; font-size: 20px; }
</style>
</head>
<body>
<h1>JavaScript If-Else Logic</h1>
<p>Enter your age to check if you are eligible to Vote.</p>
<input type="number" id="ageInput" placeholder="Enter your age">
<button onclick="checkVotingEligibility()">Check Eligibility</button>
<p id="msg"></p>
<script>
// Function definition (Syllabus: Creating & Calling Functions)
function checkVotingEligibility() {
// Getting value from input
var age = [Link]("ageInput").value;
// If-Else Structure (Syllabus: Condition checking)
if (age >= 18) {
[Link]("msg").innerHTML = "You are Eligible to Vote! ✅";
[Link]("msg").[Link] = "green";
} else {
[Link]("msg").innerHTML = "You are NOT Eligible yet. ❌";
[Link]("msg").[Link] = "red";
}
}
</script>
</body>
</html>
Output:
Practical No. 10
Aim: To demonstrate JavaScript Arrays and Loops (For Loop).
Source Code:
HTML
<html>
<head>
<title>Practical 10: Arrays & Loops</title>
</head>
<body>
<h1>JavaScript Arrays & Loops</h1>
<p>Click the button to print the list of Subjects from an Array.</p>
<button onclick="printSubjects()">Show Subjects</button>
<ul id="subjectList"></ul>
<script>
function printSubjects() {
// 1. Creating an Array (List of items)
var subjects = ["Web Development", "C Programming", "Mathematics", "Physics", "Soft Skills"];
var listContent = "";
// 2. Using For Loop to go through the Array
// Start at 0; go until the end of array; increase by 1
for (var i = 0; i < [Link]; i++) {
listContent += "<li>" + subjects[i] + "</li>";
}
// Display the result inside the <ul> tag
[Link]("subjectList").innerHTML = listContent;
}
</script>
</body>
</html>
Output:
Practical No. 11 (Part A)
Aim: To create a Simple Calculator using JavaScript (Standard Layout).
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Practical 11: Standard Calculator</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f3f3f3;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.calculator {
background-color: #f9f9f9; /* Light background like Windows Calc */
padding: 15px;
border-radius: 10px;
box-shadow: 0px 5px 15px rgba(0,0,0,0.2);
width: 320px;
border: 1px solid #ccc;
}
#display {
width: 100%;
height: 80px;
font-size: 40px; /* Large text */
text-align: right;
border: none;
background-color: transparent;
color: #333;
margin-bottom: 10px;
outline: none;
font-weight: bold;
padding-right: 10px;
box-sizing: border-box;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 Columns */
gap: 5px;
}
button {
padding: 20px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
border: 1px solid #e5e5e5;
border-radius: 5px;
background-color: #fff; /* White buttons */
color: #333;
transition: background-color 0.2s;
}
button:hover {
background-color: #e6e6e6; /* Light gray hover */
}
/* Specific Styles for Operators */
.operator {
background-color: #f9f9f9;
font-size: 20px;
}
/* The Equal Button (Blue) */
.equal {
background-color: #0067c0; /* Windows Blue */
color: white;
border: none;
}
.equal:hover {
background-color: #005a9e;
}
/* The Clear/Delete Buttons */
.action-btn {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" value="0" readonly>
<div class="buttons">
<button class="action-btn" onclick="clearDisplay()">C</button>
<button class="action-btn" onclick="deleteLast()">DEL</button>
<button class="operator" onclick="appendToDisplay('%')">%</button>
<button class="operator" onclick="appendToDisplay('/')">/</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button class="operator" onclick="appendToDisplay('*')">x</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button class="operator" onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button class="operator" onclick="appendToDisplay('+')">+</button>
<button onclick="toggleSign()">+/-</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculateResult()" class="equal">=</button>
</div>
</div>
<script>
let display = [Link]('display');
// 1. Add numbers/operators
function appendToDisplay(value) {
if([Link] === '0') {
[Link] = value;
} else {
[Link] += value;
}
}
// 2. Clear everything
function clearDisplay() {
[Link] = '0';
}
// 3. Delete last character
function deleteLast() {
if ([Link] > 1) {
[Link] = [Link](0, -1);
} else {
[Link] = '0';
}
}
// 4. Calculate Result
function calculateResult() {
try {
// Handling the 'x' symbol for multiplication
let expression = [Link]('x', '*');
[Link] = eval(expression);
} catch (error) {
alert("Invalid Calculation");
[Link] = '0';
}
}
// 5. Simple Toggle +/- (Optional, but present in your image)
function toggleSign() {
if([Link] !== '0') {
if([Link]('-')) {
[Link] = [Link](1);
} else {
[Link] = '-' + [Link];
}
}
}
</script>
</body>
</html>
Output:
Practical No. 11 (Part B)
Aim: To create a Simple To-Do List using JavaScript.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Practical 11B: To-Do List</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #eef2f3;
display: flex;
justify-content: center;
padding-top: 50px;
}
.todo-container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
width: 350px;
}
h2 { text-align: center; color: #333; }
/* Input and Button Styling */
input {
width: 70%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px;
width: 25%;
background-color: #28a745; /* Green color */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover { background-color: #218838; }
/* List Styling */
ul { list-style-type: none; padding: 0; }
li {
background: #f9f9f9;
border-bottom: 1px solid #ddd;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
li:hover { background: #f1f1f1; }
/* Delete (X) Styling */
.close {
color: red;
cursor: pointer;
font-weight: bold;
}
</style>
</head>
<body>
<div class="todo-container">
<h2>My To-Do List</h2>
<div>
<input type="text" id="myInput" placeholder="Task...">
<button onclick="newElement()">Add</button>
</div>
<ul id="myUL">
<li>Complete Web Design Lab</li>
<li>Study for Maths Test</li>
</ul>
</div>
<script>
// Function to create a new list item
function newElement() {
var inputValue = [Link]("myInput").value;
if (inputValue === '') {
alert("You must write something!");
} else {
// Create <li> tag
var li = [Link]("li");
var t = [Link](inputValue);
[Link](t);
// Create 'X' button to delete
var span = [Link]("span");
var txt = [Link]("\u00D7"); // Unicode for X
[Link] = "close";
[Link] = function() {
var div = [Link];
[Link] = "none";
};
[Link](txt);
[Link](span);
// Add to list
[Link]("myUL").appendChild(li);
}
// Clear input box
[Link]("myInput").value = "";
}
// Activate delete for existing items
var close = [Link]("close");
// (Simple logic handled in creation function for new items)
</script>
</body>
</html>
Output: