Noida Institute of Engineering & Technology,
Greater Noida
(An Autonomus Institute)
LAB FILE
Session: 2025-2026
Branch: Computer Science Semester: IV
Subject Name:Web Technology Subject Code: BCSC0455
Student Name: Devansh Chandra Faculty: Mr. Anshul Varshney
Roll no:2401330120050
Department of Computer Science
School of Computer science & Emerging Technologies
NOIDA INSTITUTE OF ENGINEERING & TECHNOLOGY
19, KNOWLEDGE PARK-II, INSTITUTIONAL AREA,
GREATER NOIDA, (U. P.) - 201 306, INDIA
INDEX
Program no. Program Name Date Signature Remark/
Grade
Overview and Installation of various code editors.
1
Overview and Installation of various web domain
2 servers.
Implementing HTML program that represent in the
3 document as a start tag, which gives the name and
attributes
Implementing HTML program that represents a
4 document
Implementing HTML program to display your
5 simple CV
Creating html document that represents document
6 object model
Creating html document that represents document
7 object model
Apply various colors to suitably distinguish
keywords , also apply font styling like italics,
8 underline and two other fonts to words you find
appropriate , also use header tags.
Create a webpage with HTML describing your
9 department use paragraph and list tags
Implementing HTML program that for Heading
10
Implementing program that implement paragraph
11 and line-break
Use tables to provide layout to your HTML page
12 describing your college infrastructure
Use <span> and <div> tags to provide a layout to
13 the above page instead of a table layout
Create links on the words e.g. ―Wi-Fi and ―LAN to
14 link them to Wikipedia pages
Insert an image and create a link such that clicking
15 on image takes user to other page
Change the background color of the page; At the
16 bottom create a link to take user to the top of the
page.
Creating HTML program to implement three
17 articles with independent,self-contained content
Creating a XML document that defines the self-
18 descriptive tags
Designing XML document that store various book
19 data such as: book category, title, author, year and
price
To Describe the various types of XML key
20 components
Program 1: Overview and Installation of various code editors.
Aim: To study different code editors used in web development and understand the installation
process.
Theory / Overview: A code editor is a software application used by programmers to write and edit
source code. Code editors provide features such as syntax highlighting, auto-completion,
debugging tools, and extensions that help developers write code efficiently.
Code editors are widely used in web development to create and manage files like HTML, CSS,
JavaScript, and backend scripts.
Some commonly used code editors are:
1. Visual Studio Code (VS Code)
2. Sublime Text
3. Notepad++
These editors support many programming languages and provide plugins/extensions for better
development.
Sublime Text is a fast and lightweight code editor used for writing code in multiple programming
languages.
Features: Fast performance, Fast performance, Syntax highlighting, Plugin Support
Installation Steps:
1. Go to [Link] and download it.
2. Run the installer, complete installation and open sublime text.
Program 2: Overview and Installation of various web domain servers.
Aim: To study different web domain servers and understand their installation process.
Theory / Overview: A web server is software that stores, processes, and delivers web pages to
users through a web browser. When a user enters a website URL, the web server sends the
requested web page to the user's browser using the HTTP/HTTPS protocol. Web servers are used
to host websites and web applications so that they can be accessed over the internet or locally.
Some commonly used web servers are:
Apache HTTP Server
XAMPP Server
WAMP Server
XAMPP Server is a free and open-source software package that includes Apache, MySQL, PHP,
and Perl. It is commonly used for local web development.
Features:
Cross-platform (Windows, Linux, Mac)
Provides a control panel to start/stop services
Installation Steps
1. Go to [Link] and download the XAMPP installer for windows.
2. Run the setup file, follow the installation instruction.
3. Open XAMPP Control Panel and start Apache and MySQL.
Program 3: Implementing HTML program that represent in the document as a start tag, which
gives the name and attributes.
CODE:
<html>
<head>
<title>Goodreads Page</title>
</head>
<body>
<h1>Goodreads</h1>
<p>A web page by Devansh Chandra (2401330120050)</p>
</body>
</html>
Output:
Program 4: Implementing HTML program that represents a document
Code:
<!DOCTYPE html>
<html>
<head>
<center><title>Booklog Document</title></center>
</head>
<body>
<h1>Goodreads</h1>
<p>This is a simple HTML document.</p>
</body>
</html>
Output:
Program 5: Implementing HTML program to display your simple CV
Code:
<html>
<head>
<title>C.V.</title>
<style>body{background-color: lightcoral;}
Table,tr,td,th{border: 1px solid brown; border-collapse:collapse ; }
table{width: 100%;height: 90%;}
body{margin: 20px; }
table { border-radius: 8px; overflow: hidden; }
</style>
</head><body><table border="1" cellpadding="10">
<tr><td width="15%"><img src="[Link]" height="130" width="150"></td>
<td style = "text-align: center;"> <h1>Circular Vitae</h1></td>
</tr><tr><td>Name</td><td>Devansh Chandra</td></tr>
<tr><td>Educational Qualification</td><td>Pursuing [Link]</td></tr>
<tr><td>Working Languages</td><td>Python, C++, HTML, CSS, Javascript</td></tr>
<tr><td>Skills Aquired</td>
<td>Problem Solving <br> Command in Data Structures and Algorithms<br> Data
Analysis</td></tr>
<tr><td>Working Tools</td>
<td>Dev C++, Vs Code, Excel, Power BI</td></tr><tr>
<td>Leetcode Questions</td><td>40</td></tr>
<tr><td>Objectivity</td>
<td>To leverage my coding skills in solving real-world problems and
<td>Interested Domains</td> <td>Web Development, Data Science</td> </tr>
<tr><td>Hobbies</td><td>Playing and watching sports, Reading, Movies And Web Shows</td</tr>
</table></body></html>
Program6: Creating html document that represents document object model
Explanation: In the Document Object Model, the HTML document is structured like a tree:
html → Root element
head → Contains title information
body → Contains visible content
h1, p, ul, li → Child elements of body
This hierarchical structure forms the DOM tree.
Code:
<html>
<head><title>DOM Example</title></head>
<body><h1>Goodreads</h1>
<h2>Popular Books</h2>
<ul><li>Crime and Punishment</li><li>1984</li><li>The Alchemist</li></ul></body>
</html>
Output:
Program 7: To Create a table to show your class time table.
Code:
<html>
<head><title>Time Table</title><style>
body { font-family: Arial, sans-serif; background-color: white; margin: 40px; }
table, tr, td, th { border: 1px solid brown; border-collapse: collapse; }
table { width: 90%; margin: auto; text-align: center; }th, td { padding: 12px; }
caption { font-size: 26px; margin-bottom: 10px; text-decoration: underline; }
</style></head>
<body><table><caption><b>TIME TABLE</b></caption>
<tr style="background-color:yellow"><th>Days/Timing</th> <th>9:10-12:30</th> <th>12:30-
1:30</th><th>1:30-2:30</th> <th>2:30-3:20</th> <th>3:20-4:10</th> <th>4:10-5:00</th></tr>
<tr style="background-color:lightblue"><th>Monday</th> <td>Web Technologies</td>
<td rowspan="5" style="background-color:violet;">Recess</td>
<td colspan="2">DBMS Lab</td> <td>DSA-II</td> <td>Data Analytics</td></tr>
<tr style="background-color:lightgreen"><th>Tuesday</th> <td>Web Technologies</td>
<td colspan="2">Project</td> <td colspan="2">DSA-II Lab</td></tr>
<tr style="background-color:lightpink">
<th>Wednesday</th> <td>Web Technologies</td>
<td>DBMS</td> <td>BDA</td> <td>TC</td> <td>AICE</td></tr>
<tr style="background-color:lightgoldenrodyellow">
<th>Thursday</th> <td>Web Technologies</td>
<td colspan="2">ESD</td> <td>DBMS</td> <td>BDA</td></tr>
<tr style="background-color:lightseagreen">
<th>Friday</th> <td>Web Technologies</td>
<td>DBMS</td> <td>DA</td> <td>DSA-II</td> <td>AICE</td></tr>
</table></body></html>
Output:
Program 8:
Code:
<html>
<head><title>Styled Web Page</title></head>
<body><h1 style="color:blue;">Goodreads</h1>
<h2 style="color:green;">Book Lovers Platform</h2>
<p style="color:red;">This is a <b>simple web page</b> demonstrating different
<font face="Arial">fonts</font> and <font face="Courier">styles</font>.</p><p>
<i>Reading books improves knowledge.</i></p><p>
<u>A web page by Devansh Chandra (2401330120050)</u></p>
</body></html>
Output:
Program 9: Create a webpage with HTML describing your department use paragraph and list tags
Code:
<html>
<head><title>Department Page</title></head>
<body><h1>Computer Science and Emerging Technologies</h1>
<p>The Computer Science and Engineering Department focuses on developing technical knowledge in
programming, data structures, databases, web development and data analytics. The department provides
students with practical skills and theoretical knowledge required for modern technology industries.</p>
<h2>Subjects in the Department</h2>
<ul><li>Data Structures and Algorithms</li><li>Database Management System</li><li>Web
Technologies</li><li>Data Analytics</li><li>Artificial Intelligence</li>
</ul><h2>Facilities Provided</h2>
<ol><li>Computer Laboratories</li><li>High Speed Internet</li><li>Project Development
Support</li><li>Technical Workshops</li></ol>
<p>A web page by Devansh Chandra (2401330120050)</p>
</body>
</html>
Output:
Program 10: Implementing HTML program that for Heading
Code:
<html>
<head><title>Heading Example</title></head>
<body>
<h1>Goodreads</h1><h2>Welcome to the Book Community</h2><h3>Discover New
Books</h3>
<h4>Read Reviews</h4><h5>Share Your Thoughts</h5>
<h6>A web page by Devansh Chandra (2401330120050)</h6>
</body>
</html>
Output:
Program 11: Implementing program that implement paragraph and line-break
Code:
<html>
<head><title>Paragraph and Line Break</title></head>
<body>
<h1>Goodreads</h1>
<p>Goodreads is a platform where readers can explore books,read reviews and
share their opinions about different books.</p>
<p>Reading books improves knowledge.<br>
It helps develop imagination.<br>
Books are a great source of learning.</p>
<p>A web page by Devansh Chandra (2401330120050)</p>
</body>
</html>
Output:
Program 12: Use tables to provide layout to your HTML page describing your college
infrastructure.
Code:
<html>
<head><title>College Infrastructure</title></head>
<body>
<h1>College Infrastructure</h1>
<table border="1" cellpadding="10">
<tr><th>Facility</th><th>Description</th></tr>
<tr><td>Computer Labs</td><td>Well equipped labs with modern computers and high
speed internet.</td></tr>
<tr><td>Library</td><td>Large collection of academic books, journals and digital
resources.</td></tr>
<tr><td>Classrooms</td><td>Spacious classrooms with smart boards and
projectors.</td></tr>
<tr><td>Sports Complex</td><td>Facilities for indoor and outdoor sports
activities.</td></tr>
<tr><td>Cafeteria</td><td>Provides healthy food and refreshments for
students.</td></tr></table>
<p>A web page by Devansh Chandra (2401330120050)</p>
</body>
</html>
Output:
Program 13: Use <span> and <div> tags to provide a layout to the above page instead of a table
layout
Code:
<html>
<head><title>College Infrastructure</title>
<style>
.container{
width:70%;margin:auto;}
.section{
border:1px solid black;padding:10px;margin:10px;}
.title{
font-weight:bold;color:blue;}
</style></head>
<body>
<h1>College Infrastructure</h1><div class="container">
<div class="section">
<span class="title">Computer Labs:</span>
<span> Well equipped labs with modern computers and high speed internet.</span></div>
<div class="section"><span class="title">Library:</span>
<span> Large collection of academic books, journals and digital resources.</span></div>
<div class="section"><span class="title">Classrooms:</span>
<span> Spacious classrooms with smart boards and projectors.</span></div>
<div class="section"><span class="title">Sports Complex:</span>
<span> Facilities for indoor and outdoor sports activities.</span></div>
<div class="section"><span class="title">Cafeteria:</span>
<span> Provides healthy food and refreshments for students.</span></div></div>
<p>A web page by Devansh Chandra (2401330120050)</p></body>
</html>
Output:
Program 14: Create links on the words e.g. ―Wi-Fi and ―LAN to link them to Wikipedia pages
Code: <html>
<head><title>Hyperlink Example</title></head>
<body>
<h1>Network Technologies</h1>
<p>In modern colleges, internet connectivity is very important.
Technologies like
<a href="[Link] and
<a
href="[Link]
are widely used for communication and data sharing.</p>
<p>A web page by Devansh Chandra (2401330120050)</p>
</body>
</html>
Output:
Program 15: Insert an image and create a link such that clicking on image takes user to other page
Code:
<html>
<head><title>Image Link</title></head>
<body>
<h1>Shatranj</h1>
<p>Click on the image below to visit [Link]:</p>
<a href="[Link]
<img src="[Link]" height="150" width="150"></a>
<p>A web page by Devansh Chandra (2401330120050)</p>
</body>
</html>
Output:
Program 16: Change the background color of the page; At the bottom create a link to take user to
the top of the page.
Code:
<html>
<head><title>Background and Top Link</title></head>
<body style="background-color:lightblue;"><a name="top"></a>
<h1>Goodreads</h1>
<p>Reading books improves knowledge.</p><p>Books help develop imagination.</p>
<p>They also improve vocabulary.</p><br><br><br><br><br><br><br><br>
<p>Goodreads helps readers discover books.</p><p>It allows users to review and rate
books.</p><br><br><br><br><br><br><br>This Page Shows Different Back Ground
Colour<br><br><br><br><br><br><br><br><br><p>Reading regularly builds strong thinking
skills.</p><br><br><br><br><br><br><br><br><p>
<a href="#top">Go to Top</a></p></body>
</html>
Output:
Program 17: Creating HTML program to implement three articles with independent, self-contained
content.
Code: <html>
<head><title>Articles Page</title></head>
<body>
<h1>Goodreads Articles</h1>
<article><h2>Article 1: Importance of Reading</h2><p>Reading books improves knowledge,
vocabulary and [Link] helps in developing critical thinking and creativity.</p></article>
<article><h2>Article 2: Benefits of Technology</h2><p>
Technology makes life easier by providing quick access to [Link] also helps in
communication and learning through digital platforms.</p></article>
<article><h2>Article 3: Web Development</h2><p>
Web development involves creating websites using HTML, CSS and JavaScript.
It is an important skill in the modern digital world.</p></article>
<p>A web page by Devansh Chandra (2401330120050)</p></body>
</html>
Output:
Program 18: Creating a XML document that defines the self-descriptive tags.
Code:
<?xml version="1.0"?>
<student>
<name>Devansh Chandra</name>
<rollno>2401330120050</rollno>
<course>[Link]</course>
<department>Computer Science</department>
<skills>
<skill>Python</skill>
<skill>C++</skill>
<skill>HTML</skill>
</skills>
</student>
Output:
Program 19: Designing XML document that store various book data such as: book category, title,
author, year and price
Code:
<?xml version="1.0"?>
<bookstore>
<book category="Fiction">
<title>The Alchemist</title><author>Paulo
Coelho</author><year>1988</year><price>350</price></book>
<book category="Thriller">
<title>The Silent Patient</title><author>Alex Michaelides</author> <year>2019</year>
<price>450</price></book><book category="History">
<title>Sapiens: A Brief History of Humankind</title> <author>Yuval Noah
Harari</author><year>2011</year><price>550</price>
</book></bookstore>
Output:
Program 20: To Describe the various types of XML key components
Aim
To study and describe the key components of XML.
Theory
XML (eXtensible Markup Language) is used to store and transport data in a structured and self-
descriptive way. It consists of the following key components:
1. Elements
Elements are the basic building blocks of XML. They contain data and are defined using tags. Each
element has a start tag and an end tag.
2. Tags
Tags are used to define elements. There are two types of tags:
Start tag (opening tag)
End tag (closing tag)
They enclose the data inside an element.
3. Attributes
Attributes provide additional information about an element. They are written inside the start tag
and usually appear in name-value pairs.
4. XML Declaration
The XML declaration appears at the top of the document. It specifies the XML version and
sometimes the encoding used.
5. Root Element
The root element is the main or top-level element of the XML document. It contains all other
elements and there can be only one root element in a document.
6. Child Elements
Elements that are inside another element are called child elements. They form a hierarchical (tree-
like) structure.
7. Comments
Comments are used to add notes or explanations in the XML document. They are not displayed or
processed.
Sd
Ddd
Df
F
D
q