AI2231: WEB TECHNOLOGY LAB [0 0 2 1]

List of Experiments
Semester-Even (IV)

1. Introduction to Internet, WWW and development of web pages using HTML and
Integrate them using Hyperlinks
2.Design and development of web pages using HTML Forms.
3.Design and integration of CSS and Java Script property into HTML Pages
4.Development web pages using bootstrapping techniques.
5.Create and run Run MySQL commands of Database (RDBMS).
6.Set up a server-side connectivity using Python framework Django with MySQL.
7. Configure dynamic web pages using MySQL and Django ORM.
8. Implement CRUD operations to make the web-application responsive.
9. Discussion on the learned (proof of concepts) on Mini Project.
10.Lab Project Evaluation 1 (Monitoring of Project)
11.Overview of Cookies and authenticity of websites, E-Commerce, and SEO
12.Mini Project Evaluation Final

Lab 1: Introduction to Internet, WWW and development of web pages using HTML and
Integrate them using Hyperlinks.
What is Internet?

The Internet is a worldwide telecommunications system that provides connectivity for millions of other,
smaller networks; therefore, the Internet is often referred to as a network of networks. It allows
computer users to communicate with each other across distance and computer platforms.

The Internet acts as a pipeline to transport electronic messages from one network to another network.
At the heart of most networks is a server, a fast computer with large amounts of memory and storage
space. The server controls the communication of information between the devices attached to a network,
such as computers, printers, or other servers.

An Internet Service Provider (ISP) allows the user access to the Internet through their server. Many
teachers use a connection through a local university as their ISP because it is free. Other ISPs, such as
America Online, telephone companies, or cable companies provide Internet access for their members.

What is WWW?

The Internet is often confused with the World Wide Web. The misperception is that these two terms are
synonymous. The Internet is the collection of the many different systems and protocols. The World
Wide Web, developed in 1989, is actually one of those different protocols. As the name implies, it
allows resources to be linked with great ease in an almost seamless fashion.

The World Wide Web contains a vast collection of linked multimedia pages that is ever-changing.
However, there are several basic components of the Web that allow users to communicate with each
other. Below you will find selected components and their descriptions.

Basics of Web Technologies

Web technologies are the various tools and techniques that are utilised in the process of communication
between different types of devices over the internet.
Since we have a limited space to examine the wide array of web technologies available, we have picked
a few that are used most often by both beginners and experts in the industry. We have divided them into
the following sections:
• The basics, which will cover web browsers and some web app development
fundamentals
• Programming languages and frameworks which are used in the development of
websites
• Databases that are used at the backend to store data required or collected by websites
• Some protocols, that is, rules for communicating on the web
• Graphic, audiovisual, and other multimedia elements
• Some data formats that are usually used to transmit data over the internet
• Other miscellaneous web technologies
Frontend Vs Backend Development Technologies
What is web development?
Web development refers to the process of creating websites. This process is based on a number of steps,
which we will cover in more detail when we explore the tools involved in each process.
The two parts of a typical website
As we go further, we will discuss individual web development technologies and tools used to create
websites. But before that, we need to be clear on the two distinct parts of a website: the frontend and
the backend. Frontend refers to all those parts of a website that a user can see on their screen and interact
with. Backend refers to the exact opposite of that. It involves the hidden mechanisms that make a
webpage function. A typical user is generally unaware of what goes on at the backend.
Frontend vs Backend

Different web technologies are used in the process of web design and development. Here is a brief
overview of the differences between the two categories of web development.
Frontend Backend
Client-side Server-side
Website design Databases
UI/UX Servers
Some UI technologies: Some backend technologies:
HTML PHP
CSS Java
JavaScript Python
AJAX Ruby
.NET

Exercise:
Design and development of web pages using HTML and integrate them using hyperlinks.
Lab 2: Design and development of web pages using HTML Forms.

What is HTML

HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web
pages and web applications. Let's see what is meant by Hypertext Markup Language, and Web page.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext.
Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext.
HyperText is a way to link two or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and dynamic.
It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated by a web
browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic
type. With the help of HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating attractive web pages with the help of
styling, and which looks in a nice format on a web browser. An HTML document is made of many
HTML tags and each HTML tag contains different content.

Let's see a simple example of HTML.

<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
Test it Now
Description of HTML Example
<!DOCTYPE>: It defines the document type or it instruct the browser about the version of HTML.

<html > :This tag informs the browser that it is an HTML document. Text between html tag describes
the web document. It is a container for all other elements of HTML except <!DOCTYPE>

<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag opens.

<title>: As its name suggested, it is used to add title of that HTML page which appears at the top of the
browser window. It must be placed inside the head tag and should close immediately. (Optional)

<body> : Text between body tag describes the body content of the page that is visible to the end user.
This tag contains the main content of the HTML document.

<h1> : Text between <h1> tag describes the first level heading of the webpage.

<p> : Text between <p> tag describes the paragraph of the webpage.
Brief History of HTML

In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a system for
CERN researchers. In 1989, he wrote a memo proposing an internet based hypertext system.

Tim Berners-Lee is known as the father of HTML. The first available description of HTML was a
document called "HTML Tags" proposed by Tim in late 1991. The latest version of HTML is HTML5,
which we will learn later in this tutorial.

HTML Versions

Since the time HTML was invented there are lots of HTML versions in market, the brief introduction
about the HTML version is given below:

HTML 1.0: The first version of HTML was 1.0, which was the barebones version of HTML language,
and it was released in1991.

HTML 2.0: This was the next version which was released in 1995, and it was standard language version
for website design. HTML 2.0 was able to support extra features such as form-based file upload, form
elements such as text box, option button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was capable of
creating tables and providing support for extra options for form elements. It can also support a web page
with complex mathematical equations. It became an official standard for any browser till January 1997.
Today it is practically supported by most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very stable version of
HTML language. This version is the current official standard, and it provides added support for
stylesheets (CSS) and scripting ability for various multimedia elements.

HTML5 : HTML5 is the newest version of HyperText Markup language. The first draft of this version
was announced in January 2008. There are two major organizations one is W3C (World Wide Web
Consortium), and another one is WHATWG( Web Hypertext Application Technology Working Group)
which are involved in the development of HTML 5 version, and still, it is under development.

Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of formatting tags.
3) It is a markup language, so it provides a flexible way to design web pages along with the text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances the
interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like Windows, Linux, and
Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it
more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-
case.
Exercise:
Design and development of web pages using HTML Tables and Forms.
Lab 3: Design and integration of CSS and Java Script property into HTML Pages

What is CSS

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look
and formatting of a document written in markup language. It provides an additional feature to HTML.
It is generally used with HTML to change the style of web pages and user interfaces. It can also be used
with any kind of XML documents including plain XML, SVG and XUL.
CSS is used along with HTML and JavaScript in most websites to create user interfaces for web
applications and user interfaces for many mobile applications.

What does CSS do

o You can add new looks to your old HTML documents.
o You can completely change the look of your website with only a few changes in CSS
code.

Why to use CSS

These are the three major benefits of CSS:
1) Solves a big problem
Before CSS, tags like font, color, background style, element alignments, border and size had to be
repeated on every web page. This was a very long process. For example: If you are developing a large
website where fonts and color information are added on every single page, it will be become a long and
expensive process. CSS was created to solve this problem.
2) Saves a lot of time
CSS style definitions are saved in external CSS files so it is possible to change the entire website by
changing just one file.
3) Provide more attributes
CSS provides more detailed attributes than plain HTML to define the look and feel of the website.

CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set.
CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

Exercise:

Design and implementation of CSS validations into the HTML web pages.
Lab 4: Development web pages using bootstrapping techniques.
What is Bootstrap
Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a responsive and
mobile friendly website.
It is absolutely free to download and use.
It is a front-end framework used for easier and faster web development.
It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation,
modals, image carousels and many others.
It can also use JavaScript plug-ins.
It facilitates you to create responsive designs.
What is Bootstrap
History of Bootstrap
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter.It was released as an open source
product in August 2011 on GitHub.

Advantage of Bootstrap:

It is very easy to use. Anybody having basic knowledge of HTML and CSS can use Bootstrap.
It facilitates users to develop a responsive website.
It is compatible on most of browsers like Chrome, Firefox, Internet Explorer, Safari and Opera etc.
What is a responsive website
A website is called responsive website which can automatically adjust itself to look good on all devices,
from smart phones to desktops etc.

Bootstrap package contains

Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, and background.

CSS: Bootstrap comes with the feature of global CSS settings, fundamental HTML elements style and
an advanced grid system.

Components: Bootstrap contains a lot of reusable components built to provide iconography, dropdowns,
navigation, alerts, pop-overs, and much more.

JavaScript Plugins: Bootstrap also contains a lot of custom jQuery plugins. You can easily include them
all, or one by one.

Customize: Bootstrap components are customizable and you can customize Bootstrap's components,
LESS variables, and jQuery plugins to get your own style.

What is Bootstrap 4?
Bootstrap is the newest and latest version of Bootstrap. It is the most popular HTML, CSS, JavaScript
framework for developing responsive, mobile first websites.

Bootstrap 4 has some new components, faster stylesheet, more buttons, effects and more
responsiveness. Bootstrap 4 supports some the latest, stable releases of all major browsers and
platforms.

Exercise: Design and development of dynamic web pages using Bootstrap Framework.
Lab 5: Create and run Run MySQL commands of Database (RDBMS).

What is Database?
The database is a collection of inter-related data which is used to retrieve, insert and delete the data
efficiently. It is also used to organize the data in the form of a table, schema, views, and reports, etc.
For example: The college Database organizes the data about the admin, staff, students and faculty etc.
Using the database, you can easily retrieve, insert, and delete the information.
Database Management System
Database management system is a software which is used to manage the database. For example:
MySQL, Oracle, etc are a very popular commercial database which is used in different applications.
DBMS provides an interface to perform various operations like database creation, storing data in it,
updating data, creating a table in the database and a lot more.
It provides protection and security to the database. In the case of multiple users, it also maintains data
consistency.
DBMS allows users the following tasks:
Data Definition: It is used for creation, modification, and removal of definition that defines the
organization of data in the database.
Data Updation: It is used for the insertion, modification, and deletion of the actual data in the database.
Data Retrieval: It is used to retrieve the data from the database which can be used by applications for
various purposes.
User Administration: It is used for registering and monitoring users, maintain data integrity, enforcing
data security, dealing with concurrency control, monitoring performance and recovering information
corrupted by unexpected failure.
Characteristics of DBMS
It uses a digital repository established on a server to store and manage the information.
It can provide a clear and logical view of the process that manipulates data.
DBMS contains automatic backup and recovery procedures.
It contains ACID properties which maintain data in a healthy state in case of failure.
It can reduce the complex relationship between data.
It is used to support manipulation and processing of data.
It is used to provide security of data.
It can view the database from different viewpoints according to the requirements of the user.
Advantages of DBMS
Controls database redundancy: It can control data redundancy because it stores all the data in one single
database file and that recorded data is placed in the database.
Data sharing: In DBMS, the authorized users of an organization can share the data among multiple
users.
Easily Maintenance: It can be easily maintainable due to the centralized nature of the database system.
Reduce time: It reduces development time and maintenance need.
Backup: It provides backup and recovery subsystems which create automatic backup of data from
hardware and software failures and restores the data if required.
multiple user interface: It provides different types of user interfaces like graphical user interfaces,
application program interfaces.
Disadvantages of DBMS
Cost of Hardware and Software: It requires a high speed of data processor and large memory size to run
DBMS software.
Size: It occupies a large space of disks and large memory to run them efficiently.
Complexity: Database system creates additional complexity and requirements.
Higher impact of failure: Failure is highly impacted the database because in most of the organization,
all the data stored in a single database and if the database is damaged due to electric failure or database
corruption then the data may be lost forever.

Exercise:
Design and creation of Databases in MySQL RDBMS
Lab 6: Set up a server-side connectivity using Python framework Django with MySQL.

Exercise: Set up a server-side connectivity using Python framework Django with MySQL.

Lab 7: Configure dynamic web pages using MySQL and Django ORM.

Key Points:

• Database Setup: Create a MySQL database and configure Django to connect to it

in settings.py.
• Model Definition: Create Django models that map to database tables using ORM.
• Migrations: Apply database migrations using python manage.py makemigrations and python
manage.py migrate.

• Views and Templates: Develop views to retrieve and display data from the
database, rendering it in templates.
• Querysets: Utilize Django's querysets for efficient data retrieval and manipulation.

Exercise: Configuring Dynamic Web Pages with MySQL and Django ORM

Lab 8: Implement CRUD operations to make the web-application responsive.

Key Points:

• Create: Develop views and forms to create new records in the database.
• Read: Implement views to retrieve and display data (e.g., list views, detail views).
• Update: Enable modification of existing records using forms and views.
• Delete: Facilitate deletion of records with appropriate safeguards.

Exercise: Implementing CRUD Operations

Lab 9: Discussion on the learned (proof of concepts) on Mini Project.

The mini project is an assignment that student try to complete at the end of the semester, especially in
Web Technologies to strengthen the understanding of your fundamentals through effective application
of theoretical concepts. There are separate feedback for each mini project students complete, although
few students taking up a project out of their own interest and passion. This mini project can help students
to boost skills and widen students horizon of thinking in the field of web development. Some of the
project ideas are listed below:

• Movie Rental Systems

• Online Auction System
• Online Hospital Management
• Maintaining for WebStats
• Online Shopping
• Scrapbook
• Online Photo gallery system
 • Online Job Recruitment System
• Online Banking system
• Voice based address book access using python
• Discussion Forums
• Reservation systems
• Advanced Ticketing System for plays, matches
• Web Crawlers
• Web based Appointment Systems:
• Social Networks
• Enterprise Resource Planning (ERP)
• Student Information system
• Attendance management system
• Online Shopping Project
• Speech Enabled Airline Reservation System
• Shop Management System
• Leave Application Management System
• Blogging platform with Python

Exercise:

To analyze real world scenario, design and develop a website to solve real world problem using web
Technologies.

Lab 10: Lab Project Evaluation 1 (Monitoring of Project)

Key Points:

• Assessment Criteria: Review project requirements, functionality, code

quality, testing, and overall progress.
• Feedback and Recommendations: Provide constructive feedback for improvement.
Lab 11: Overview of Cookies and authenticity of websites, E-Commerce, and SEO
Key Points:

• Cookies: Understand what they are, how they store data, and their role in web sessions.
• Authenticity: Explore techniques to verify website authenticity and protect against
phishing and other attacks.
• Security Considerations: Discuss best practices for handling cookies and sensitive data
securely.
Lab 12: Assessments and Feedback of Laboratory assignments and mini-Projects.

The mini project is evaluated as points mentioned below:

Sr.No. Title
1 Quality of the project work
2 Quality of the report
3 The quantum of the work
4 Understanding of the topic selected
5 Deal with questions