WEB DEVELOPMENT LAB(AI24209)

P.R. POTE PATIL

College of Engineering & Management, Amravati

(An Autonomous Institute)

Department of Artificial Intelligence & Data Science

Semester: II Year: 2024-2025

PRACTICAL JOURNAL

Web Development

(AI24209)

PRPCEM-AI&DS Page 1
 WEB DEVELOPMENT LAB(AI24209)

Institute

Vision
To flourish as a centre of excellence for producing the skilled technocrats and committed human beings.

Mission

 To create conducive environment for teaching &learning.

 To impart quality education through demanding academic programs.
 To enhance career opportunities by exposure to Industries & recent technologies.
 To develop professionals with strong ethics and human values for the betterment of society.

Department of Artificial Intelligence & Data Science

Vision

To achieve Excellence in education, research & innovation fostering ethical, impactful, and globally
competitive engineer.
Mission

● To create an ambiance that shall foster the growth for developing innovative and entrepreneurial skills.
● To identify areas of specialization upon which the department can concentrate, thus promote academic
growth and career opportunities.
● To develop human resource with ethical and moral values for overall personality development to serve the
society.

PRPCEM-AI&DS Page 2
 WEB DEVELOPMENT LAB(AI24209)

Program Outcomes

Engineering Graduate will be able to:

1. Engineering Knowledge: Apply the knowledge of mathematics, science, engineering

fundamentals, and an engineering specialization to the solution of complex engineering
problems.

2. Problem Analysis: Identify, formulate, research literature, and analyze complex

engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.

3. Design /development of solutions: Design solutions for complex engineering problems

and design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and environmental
considerations.

4. Conduct investigations of complex problems: Use research-based knowledge and research

methods including design of experiments, analysis and interpretation of data, and synthesis
of the information to provide valid conclusions.

5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modeling to complex engineering activities
with an understanding of the limitations.

6. The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.

7. Environment and sustainability: Understand the impact of the professional engineering

solutions in societal and environmental contexts, and demonstrate the knowledge of, and
need for sustainable development.

8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.

9. Individual and team work: Function effectively as an individual, and as a member or leader
in diverse teams, and in multidisciplinary settings.

10. Communication: Communicate effectively on complex engineering activities with the

engineering community and with society at large, such as, being able to comprehend and
write effective reports and design documentation, make effective presentations, and give
and receive clear instructions.

PRPCEM-AI&DS Page 3
 WEB DEVELOPMENT LAB(AI24209)

11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member
and leader in a team, to manage projects and in multidisciplinary environments.

12. Life-long learning: Recognize the need for, and have the preparation and ability to engage
in independent and life-long learning in the broadest context of technological change.

PRPCEM-AI&DS Page 4
 WEB DEVELOPMENT LAB(AI24209)

Program Education Objectives

To prepare the Engineering graduates to,

PEO1: Technical Proficiency: Graduates will demonstrate proficiency in core areas of

computer science, including algorithms, data structures, software engineering, and database
systems, with a specialized focus on artificial intelligence and data science techniques.

PEO2: Leadership and Innovation: Graduates will exhibit leadership qualities and innovative
thinking, contributing to the development and implementation of AI-driven solutions that address
societal, industrial, and environmental challenges.

PEO3: Ethical and Professional Responsibility: Graduates will adhere to ethical and
professional standards in their engineering practice, demonstrating integrity, accountability,
and a commitment to societal well-being in the design and deployment of AI and DS systems.

PEO4: Lifelong Learning: Graduates will adopt a culture of lifelong learning and professional
development, empowering individuals to adapt to emerging technologies, navigate complex
socio-technical landscapes, and contribute meaningfully to the advancement of AIDS
throughout their careers.

Program Specific Outcomes

To prepare the Engineering graduates to,

PSO1: Intelligent Systems Development: Develop intelligent systems and applications

integrating AI and DS technologies to enhance functionality and performance.

PSO2: Problem-Solving Skills: Possess strong analytical and problem-solving skills,

enabling them to identify, formulate, and solve complex engineering problems using AI and
DS methodologies in diverse application domains.

PRPCEM-AI&DS Page 5
 WEB DEVELOPMENT LAB(AI24209)

GUIDELINES FOR INSTRUCTOR

Teachers shall discuss the following points with students before start of practical of the subject.
1. Learning Overview: To develop better understanding of importance of the subject. To know
related skills to be developed such as intellectual and motor skills.
2. Know your Laboratory Work: To understand the layout of laboratory, specifications of
equipment / instruments /materials, procedure, working in groups, planning time etc. also to
know total amount of work to be done in the laboratory.
3. Teacher shall ensure that required equipment is in working condition before start of each
experiment, also keep operating instruction manual available.
4. Explain prior concepts to the students before starting of each experiment.
5. Evolve student’s activity at the time of conduct of each experiment.
6. While taking reading / observation each student (from batch of 20 students) shall be
given a chance to perform / observe the experiment.
7. Teacher shall assess the performance of students continuously.
8. Teacher is expected to share the skills to be developed in the students.
9. Teacher should ensure that the respective skills are developed in the students after the
completion of the practical exercise.
10. Teacher may provide additional knowledge and skills to the students even though not covered
in the manual but are expected from students by the industries.
11. Teacher may suggest the students to refer additional related literature of the technical papers /
reference books / Seminar Proceedings, etc.
12. Focus should be given on development of enlisted skills rather than theoretical / codified
knowledge.
13. During assessment teacher is expected to ask questions to the students to tap their
achievements regarding related knowledge and skills.
14. Teacher should give more focus on hands on skills.

PRPCEM-AI&DS Page 6
 WEB DEVELOPMENT LAB(AI24209)

INSTRUCTIONS FOR STUDENTS

1. Students shall read the points given below for understanding the theoretical concepts and
practical applications.
2. Listen carefully to the lecture given by teacher about importance of subject, curriculum
philosophy, learning structure, skills to be developed, information about equipment,
instruments, procedure, method of continuous assessment, tentative plan of work in
laboratory and total amount of works to be done in a semester.
3. Student shall undergo study visit of the laboratory for types of equipment, and material
to be used, before performing experiments.
4. Read the write up of each experiment to be performed, a day in advance.
5. Organize the work in the group and make a record of all observations.
6. Understand the purpose of experiment and its practical implications.
7. Student should not hesitate to ask any difficulty faced during conduct of practical
/exercise.
8. Write the answers of the questions allotted by the teacher during practical hours if
possible or afterwards, but immediately.
9. Student should develop the habit of pear discussion / group discussion related to
experiments / exercise so that exchanges of knowledge / skills could take place.
10. Students shall attempt to develop related hands-on-skills and gain confidence.
11. Student shall focus on development of skills rather than theoretical or codified
knowledge.Student shall insist for the completions of recommended Laboratory Work,
answers to the given question etc.
12. Student shall develop the habit of evolving more ideas, innovations, skills etc. that
included in the scope of the manual.
13. Student shall refer technical magazines, proceedings of the Seminars, refer website
related to the scope of the subjects and update their knowledge and skills.
14. Student should develop the habit of not depend totally on teachers but to develop self-
learning techniques.
15. Student should develop the habit to interact with the teacher without hesitation with
respect to academic involved.
16. Student should develop habit to submit the practical’s exercise continuously and
progressively on the schedule dates and should get the assessment done.
17. Student should be well prepared while submitting the write up of the exercise. This will
develop the continuity of the studies and he will not be overloaded at the end of the term.

PRPCEM-AI&DS Page 7
 WEB DEVELOPMENT LAB(AI24209)

P. R. POTE PATIL
COLLEGE OF ENGINEERING & MANAGEMENT, AMRAVATI.

Department of Artificial Intelligence & Data Science

Certificate

This is to certify that Mr./Ms…………………………………………........

in .... Semester of Bachelor of Technology in Artificial Intelligence & Data Science of P. R. Pote

Patil College of Engineering & Management, Amravati, has completed the term work satisfactory of the

course for the academic year

20 -20 as prescribed in the curriculum.

Date………………… Roll No. ……………………

Subject Teacher Head of the Department

PRPCEM-AI&DS Page 8
 WEB DEVELOPMENT LAB(AI24209)

LIST OF (PRACTICALS/EXPERIMENTS) & PROGRESSIVE ASSESSMENT FOR

TERM WORK

Academic Year: 2024-25 Course:

Course Code: Semester:
Name of Student: Roll.No:

Name of Faculty: Prof.A.S.Mishra

SN. Title of the Date of Date of Assessment Sign of

Practical/Experiment Performance Submission Marks(25) Faculty
Introduction to Web Development,
1
HTML, CSS & JavaScript.

Design a Web Page in HTML & use

2
basic HTML Tags, its elements &
attributes.

3 Implement images & hyperlinks in a

Web Page using HTML.

Implement Tables & Lists in a Web

4
Page using HTML.

Implement forms in a Web

5
Page using HTML
Design a Web Page to apply CSS
6 Colors, Backgrounds,
Borders, Margin & Padding.
Implement CSS Box Model in a Web
7
Page.

Develop a JavaScript Program using

8
Variables & Operators.

Develop a JavaScript Program using

9
Conditional & Looping Statements.
Develop a JavaScript Program using
10
Functions.

Mini Project: Make a website using

11
HTML, CSS & JS.

Signature of Faculty

PRPCEM-AI&DS Page 9
 WEB DEVELOPMENT LAB(AI24209)

Course Objectives

1. To design & devlop Website using Front End Technologies.

Course Outcomes

On successful completion of the course, the learner will b e able to:

CO Course Outcomes BT Level PO

1 To select & apply various HTML Tags in website development. 1,3 1,3,5,12
To select& apply various CSS properties in website designing. 1,3 1,3,5,12
2

3 To create a website using HTML, CSS & JavaScript 6 1,3,5,12

PRPCEM-AI&DS Page 10
 WEB DEVELOPMENT LAB(AI24209)

I. Rubrics used for continuous Assessment in every Lab Session

Allocated
Skills Parameters High Medium Low
Marks
1. Handle equipment/ Most satisfactory Partially Below
tools/ Commands (4-5) successful expectation
correctly & Exceptional (3) (0-2)
safely/Logic (2) Satisfactory Unsatisfactory
Formation (7) (1) (0)
Process
Related 15 1. Integrate system & Highly Partially Incorrect or
measure parameters satisfactory (4) correct (2-3) unsatisfactory
Skills
correctly or In time (4) (0-1)
Debugging Ability (4) *Completed
2. Completed but delayed *Completed with
experiment as per (2) 50% delayed (1)
schedule (4)
Obtain correct results, Highly Accurate(4) Partially correct Incorrect (0-1)
Interpret results (4) (2-3)
Product Draw conclusion (3) Highly accurate Partially (2) Unsatisfactory
Related (3) (1)
10
Skills Answer practical related Highly Moderate Unsatisfactory
questions & submit the satisfactory satisfactory (1)
write up of experiment on (3) (2)
time (3)

Total Marks 25 Marks

II. Rubrics used for External Assessment in Lab Course

Allocated
Skills Parameters High Medium Low
Marks
Handle equipment/ tools/ Most satisfactory Partially Below
commands correctly & (6-7) successful expectation
safely, and Work cohesively (4-5) (0-3)
Process in team (7)
Related 15
Integrate system correctly & Highly satisfactory Partially Incorrect
Skills
measure parameters (7-8) correct (5-6) or
correctly (8) unsatisfactory
(0-4)
Obtain correct results, Exceptional (4-5) Satisfactory Unsatisfactory
Product Answer practical related (3) (0-2)
Related questions (5)
10
Skills
Interpret results, draw Exceptional Satisfactory Unsatisfactory
conclusion (5) (4-5) (3) (0-2)
Total Marks 25 Marks

PRPCEM-AI&DS Page 11
 WEB DEVELOPMENT LAB(AI24209)

Assessment
Marks Rubrics: 25 = a (07) + b (04) + c (04) + d (04) + e (03) + f (03)
a: Handle equipment/ tools/ commands correctly & safely/ Logic Formation
b: Integrate system & measure parameters correctly or Debugging Ability
c: Completed experiment as per schedule
d: Obtain correct results, Interpret results
e: Draw conclusion
f: Answer practical related questions & submit the write up of experiment on time

(a) (b) (c) (d) (e) (f) Total 25

S.N. Title of the Practical / Experiment
07 04 04 04 03 03 Marks
Introduction to Web Development, HTML, CSS &
01
JavaScript.
Design a Web Page in HTML & use basic HTML
02 Tags, its elements & attributes.
Implement images & hyperlinks in a Web Page
03
using HTML.
Implement Tables & Lists in a Web Page using
04
HTML.

05 Implement forms in a Web Page using HTML.

Design a Web Page to apply CSS Colors,

06 Backgrounds,
Borders, Margin & Padding.

07 Implement CSS Box Model in a Web Page.

Develop a JavaScript Program using Variables &
08
Operators.
Develop a JavaScript Program using
09
Conditional & Looping Statements.
Develop a JavaScript Program using
10
Functions.
Mini Project: Make a website using HTML,
11 CSS & JS.

Signature of Faculty

PRPCEM-AI&DS Page 12
 WEB DEVELOPMENT LAB(AI24209)

GUIDELINES FOR TEACHERS

Teachers shall discuss the following points with students before start of practical of the subject.

1. Learning Overview: To develop better understanding of importance of the subject.

To know related skills to be developed such as intellectual and motor skills

2. Know your Laboratory Work: To understand the layout of laboratory,

specifications of equipment / instruments /materials, procedure, working in groups,
planning time etc. also to know total amount of work to be done in the laboratory.

3. Teacher shall ensure that required equipment is in working condition before start of
each experiment, also keep operating instruction manual available.

4. Explain prior concepts to the students before starting of each experiment.

5. Evolve student’s activity at the time of conduct of each experiment.

6. While taking reading / observation each student (from batch of 20 students) shall be
given a chance to perform / observe the experiment.

7. Teacher shall assess the performance of students continuously.

8. Teacher is expected to share the skills to be developed in the students.

9. Teacher should ensure that the respective skills are developed in the students after
the completion of the practical exercise.

10. Teacher may provide additional knowledge and skills to the students even though
not covered in the manual but are expected from students by the industries.

11. Teacher may suggest the students to refer additional related literature of the
technical papers / reference books / Seminar Proceedings, etc.

12. Focus should be given on development of enlisted skills rather than theoretical /
codified knowledge.

13. During assessment teacher is expected to ask questions to the students to tap their
achievements regarding related knowledge and skills.

14. Teacher should give more focus on hands on skills.

PRPCEM-AI&DS Page 13
 WEB DEVELOPMENT LAB(AI24209)

LABORATORY INSTRUCTIONS

1. Be Respectful! Always treat the computer lab equipment And your teacher
1.
and classmates the way that you would want your belongings and yourself to
be treated.

2. No food or drinks near the computers. NO EXCEPTIONS.

3. Enter the computer lab quietly and work quietly. There are other groups and
individuals who may be using the computer lab. Please be respectful.

4. Surf safely! Only visit assigned websites. Some web links can contain
viruses or malware. Others may contain inappropriate content. If you are not
certain that a website is SAFE, please ask a teacher or other adult.

5. Clean up your work area before you leave. All cords should be placed on the
tables (not hanging off the sides). Headphones should be placed on the
CPU/tower or monitor. Chair should be pushed under the tables. All trash,
papers, and pencils should be picked up.

6. Do not change computer settings or backgrounds.

7. Ask permission before you print.

8. SAVE all unfinished work to a cloud drive or jump drive. Any work that is
saved to the computer will be deleted when the computer is powered off or
updated at the end of the day.

9. If you are the last class of the day, please POWER DOWN all computers and
monitors.

PRPCEM-AI&DS Page 14
 WEB DEVELOPMENT LAB(AI24209)

P. R. Pote (Patil) College of Engineering & Management, Amravati

Department of Artificial Intelligence & Data Science

Name of the Department : AI & DS Academic Year:2024-25

Year: 1st Semester : 2nd
Section : Course Code: AI24209
Course/Subject: Web Development Lab Name of Faculty: Prof. A. S. Mishra

S.N List of Practical’s

1 Exploration of Web Development, HTML, CSS & JavaScript.
2 Design a Web Page in HTML & use basic HTML Tags, its elements & attributes.
3 Implement images & hyperlinks in a Web Page using HTML.
4 Implement Tables& Lists in a Web Page using HTML.
5 Implement forms in a Web Page using HTML.
6 Design a Web Page in HTML and apply Inline CSS.
7 Design a Web Page in HTML and apply Internal CSS.
8 Design a Web Page in HTML and apply External CSS.
9 Design a Web Page to apply CSS Colors, Backgrounds, Borders, Margin & Padding
10 Implement CSS Box Model in a Web Page.
11 Develop a JavaScript Program using Variables & Operators.
12 Develop a JavaScript Program using Conditional Statements.
13 Develop a JavaScript Program using Looping Statements.
14 Develop a JavaScript Program using Functions.
15 Design a Web Page implementing DOM (Document Object Model) using HTML & JS.
16 Mini Project: Make a website using HTML, CSS & JS.

PRPCEM-AI&DS Page 15
 WEB DEVELOPMENT LAB(AI24209)

PRACTICAL NO: 1

AIM: Exploration of Web Development, HTML, CSS & JavaScript.

LEARNING OBJECTIVES:
To Learn about the basic structure of a web page.
LEARNING OUTCOMES:

1. To understand the foundations of front-end web development.

SOFTWARE REQUIRED: Visual Studio Code, Notepad & Browser

THEORY:
Web Development
1. Web development is the process of creating and maintaining websites and web applications that
run on the internet.
2. It involves a variety of tasks, including web design, web programming, and database management

HTML
1. HTML (Hypertext Markup Language): The foundation of any web page.
2. It provides the structure and content of the page using tags and elements.
3. HTML uses elements (also known as tags) to mark up content such as text, images, links, and
forms.

CSS

1. CSS (Cascading Style Sheets): Used to style and format the visual presentation of a web page.
2. It controls the appearance of the website, such as colors, fonts, layouts, spacing, and
responsiveness. CSS allows web developers to separate content (HTML) from presentation
(styling).
JavaScript

1. A programming language that adds interactivity and dynamic behaviour to web pages.
2. It can be used to create animations, handle user input, and communicate with servers.
3. Think of it as the brains and muscles of your website.

PRPCEM-AI&DS Page 16
 WEB DEVELOPMENT LAB(AI24209)

HTML vs CSS vs JS

Common HTML Tags:

1. The <!DOCTYPE html> declaration defines that this document is an HTML5 document
2. The <html> element is the root element of an HTML page
3. The <head> element contains meta-information about the HTML page
4. The <title> element specifies a title for the HTML page (which is shown in the browser's title bar
or the page's tab)
5. The <body> element defines the document's body and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
6. <h1> to <h6>: Headings, <h1> being the largest and most important.
7. <p>: Paragraph of text.
8. <a href="url">: Links to other pages or websites.
9. <img src="image.jpg" alt="description">: Embeds an image.
10. <ul>, <ol>, <li>: Unordered and ordered lists.

CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

Common CSS Properties:

 color: Changes the text color.

 font-size: Adjusts the size of text.
 background color: Sets the background color of an element.
 margin: Defines the space outside of an element.
 padding: Defines the space inside an element.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

PRPCEM-AI&DS Page 17
 WEB DEVELOPMENT LAB(AI24209)

OUTPUT / RESULT & ANALYSIS:

CONCLUSION :

ASSESSMENT SCHEME:-

Process Related Skills Product Related Skills Total (25-M) Signature of Faculty
(15-M) (10-M)

PRPCEM-AI&DS Page 18
 WEB DEVELOPMENT LAB(AI24209)

PRACTICAL NO.2

AIM: Design a Web Page in HTML & use basic HTML Tags, its elements & attributes.

LEARNING OBJECTIVE:
To Understand the basic structure of an HTML document.
LEARNING OUTCOMES:
1. To Use essential HTML tags to create web page elements.
2. To create well-structured web pages using HTML tags, elements, and
attributes.

SOFTWARE REQUIRED: Visual Studio Code & Browser

THEORY:

Basic HTML Tags, Elements, and Attributes

1. HTML Tags

HTML tags are the building blocks of a webpage. Each tag is usually paired with an opening and closing
tag, and some tags can have attributes that provide additional information.

 <h1> to <h6>: Heading tags, used to define headings. <h1> is the largest, most important
heading, while <h6> is the smallest.

<h1>This is a Main Heading</h1>

<h2>This is a Subheading</h2>

 <p>: Paragraph tag, used to define a block of text.

<p>This is a paragraph of text.</p>

 <a>: Anchor tag, used to create hyperlinks. The href attribute specifies the URL.

<ahref="https://www.example.com">Visit Example</a>

 <img>: Image tag, used to embed images. The src attribute specifies the image source and the alt
attribute provides alternative text for the image.

<imgsrc="image.jpg"alt="A description of the image">

 <ul>, <ol>, and <li>: List tags, used to create unordered (bulleted) and ordered (numbered) lists.

<ul>
<li>Item 1</li>

PRPCEM-AI&DS Page 19
 WEB DEVELOPMENT LAB(AI24209)

<li>Item 2</li>
<li>Item 3</li>
</ul>

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

 <table>, <tr>, <td>: Table tags, used to display tabular data.

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>

2. HTML Elements

An HTML element is the combination of an opening tag, content, and a closing tag. For example:

<h1>Welcome to My Website</h1>

In this case:

 <h1> is the opening tag.

 Welcome to My Website is the content.
 </h1> is the closing tag.

Not all HTML elements require a closing tag. Some elements are self-closing, such as the <img> tag.

<imgsrc="logo.jpg"alt="Website Logo">

3. HTML Attributes

Attributes provide additional information about an element and are always written within the opening tag.
Attributes are made up of a name and a value.

 href: The hyperlink reference attribute specifies the target URL for anchor tags.

<ahref="https://www.example.com">Visit Example</a>

 src: The source attribute specifies the file path for images or media files.

<imgsrc="logo.png"alt="Website Logo">

 alt: The alternative text attribute for images, used for accessibility.

PRPCEM-AI&DS Page 20
 WEB DEVELOPMENT LAB(AI24209)

<imgsrc="photo.jpg"alt="A beautiful sunset">

 id: An identifier attribute that is unique to an element. It can be used for styling or accessing
elements via JavaScript.

<pid="intro">This is the introduction paragraph.</p>

 class: Specifies a class for an element. Multiple elements can share the same class for styling
purposes.

<pclass="highlight">This is a highlighted paragraph.</p>

 style: Used to apply inline CSS styles directly to an element.

<pstyle="color: blue;">This text is blue.</p>

Explanation of Elements Used:

1. <header>: Defines the introductory section, which contains the main heading and introductory
text.
2. <nav>: The navigation section that contains a list of links.
3. <ul> and <li>: Used to create an unordered list of links in the navigation bar.
4. <section>: Represents a section of content on the page. We have two sections here: About Me
and Services.
5. <footer>: The footer section, typically contains copyright information or contact details.
6. <a href="mailto:me@example.com">: An email link that opens the default email client when
clicked.

PROGRAM CODE WITH HTML Tags, Elements, and Attributes

OUTPUT / RESULT & ANALYSIS:

CONCLUSION:

PRPCEM-AI&DS Page 21
 WEB DEVELOPMENT LAB(AI24209)

ASSESSMENT SCHEME:-

Process Related Skills Product Related Skills Total (25-M) Signature of Faculty
(15-M) (10-M)

PRPCEM-AI&DS Page 22
 WEB DEVELOPMENT LAB(AI24209)

PRACTICAL NO. 3

AIM: Implement images & hyperlinks in a Web Page using HTML.

LEARNING OBJECTIVE:
To Understand the purpose and usage of the <img> tag for embedding images.
LEARNING OUTCOMES:
1. To embed images in web pages.
2. To control image size and other attributes.

SOFTWARE REQUIRED: Visual Studio Code & Browser

THEORY:

1. Introduction

In web development, images and hyperlinks are essential elements for creating visually engaging and
navigable websites. Images allow you to display media content (e.g., photos, illustrations, logos), while
hyperlinks enable navigation from one webpage to another, or specific locations within the same page,
external websites, or even email addresses.

2. Implementing Images in HTML

The <img> tag is used to embed images in a web page. Unlike most HTML tags, the <img> tag is self-
closing, meaning it does not have a separate closing tag (</img>). It requires two essential attributes:

1. src: The source attribute defines the path to the image file.
2. alt: The alternative text attribute provides a text description of the image, which is displayed if
the image cannot be loaded. This is also crucial for accessibility, as it helps screen readers
describe the image to visually impaired users.

Basic Syntax:

<imgsrc="image.jpg"alt="Description of the image">

Example:

<!DOCTYPE html>
<htmllang=" en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Image Example</title>
</head>
<body>
<h1>Welcome to My Image Page</h1>
<p>Here is an example of an image:</p>

PRPCEM-AI&DS Page 23
 WEB DEVELOPMENT LAB(AI24209)

<imgsrc="https://example.com/image.jpg"alt="A beautiful landscape">

</body>
</html>

3. Implementing Hyperlinks in HTML

Hyperlinks are created using the <a> tag, which stands for "anchor". Hyperlinks are essential for
navigation, allowing users to move between different pages of a website or to external sites.

Basic Syntax:

<ahref="URL">Link Text</a>

 href: The hyperlink reference attribute specifies the destination of the link, which can be an
internal page, external website, or an email address.

Types of Links:

1. External Links: Links that take the user to a different website.

<ahref="https://www.example.com">Visit Example Website</a>

When the user clicks on this link, it opens the external URL (https://www.example.com).

2. Internal Links: Links that navigate to other pages within the same website or document. This is
useful for multi-page websites.

<ahref="about.html">About Us</a>

This link directs users to a page named about.html located in the same directory.

3. Anchor Links (Page Navigation): Links that navigate to specific sections within the same page.
This is useful for long pages with multiple sections.

<ahref="#section2">Go to Section 2</a>

To make this work, use an ID attribute on the section you want to link to:

<h2id="section2">Section 2</h2>

4. Email Links: Links that open the user's email client with a prefilled email address.

<ahref="mailto:someone@example.com">Email Me</a>

5. Links that Open in a New Tab: By adding the target="_blank" attribute, you can make links
open in a new tab.

<ahref="https://www.example.com"target="_blank">Visit Example</a>

PRPCEM-AI&DS Page 24
 WEB DEVELOPMENT LAB(AI24209)

4. Combining Images and Hyperlinks

You can combine the <img> and <a> tags to make an image clickable. This is useful when you want to
link to another page or external website with an image.

Syntax:

<ahref="URL">
<imgsrc="image.jpg"alt="Image description">
</a>

PROGRAM CODE

OUTPUT/ RESULT & ANALYSIS :

CONCLUSION:

ASSESSMENT SCHEME:-

Process Related Skills Product Related Skills Total (25-M) Signature of Faculty
(15-M) (10-M)

PRPCEM-AI&DS Page 25
 WEB DEVELOPMENT LAB(AI24209)

PRACTICAL NO. 4

AIM: Implement Tables & Lists in a Web Page using HTML.

LEARNING OBJECTIVE:
To Learn the purpose and usage of HTML forms for collecting user input.
LEARNING OUTCOMES:
1. To design user-friendly forms.
SOFTWARE REQUIRED: Visual Studio Code & Browser

THEORY:

Basic Structure of a Table

A table in HTML is created using the <table> element, which is then populated with rows (<tr>) and
columns (<td> for data and <th> for headers).

Key Table Tags:

 <table>: Defines the table.

 <tr>: Represents a row in the table.
 <th>: Represents a header cell, typically bold and centered.
 <td>: Represents a data cell in a row.
 <thead>: Groups the header content of the table.
 <tbody>: Groups the body content of the table.
 <tfoot>: Groups the footer content of the table (optional).

Lists in HTML are used to group items in a specific order. There are two main types of lists:
ordered lists (numbered) and unordered lists (bulleted).

key List Tags:

 <ul>: Starts an unordered (bulleted) list.

 <ol>: Starts an ordered (numbered) list.
 <li>: Defines each list item.
 <dl>: Defines a definition list.
 <dt>: Represents a term in a definition list.
 <dd>: Represents the definition or description of a term in a definition list.

PROGRAM CODE:-

OUTPUT/ RESULT & ANALYSIS:

PRPCEM-AI&DS Page 26
 WEB DEVELOPMENT LAB(AI24209)

CONCLUSION:-

ASSESSMENT SCHEME:-

Process Related Skills Product Related Skills Total (25-M) Signature of Faculty
(15-M) (10-M)

PRPCEM-AI&DS Page 27
 WEB DEVELOPMENT LAB(AI24209)

PRACTICAL NO. 5

AIM: Implement forms in a Web Page using HTML

LEARNING OBJECTIVE:
To Learn the purpose and usage of HTML forms for collecting user input.
LEARNING OUTCOMES :
1. To design user-friendly forms.

SOFTWARE REQUIRED: Visual Studio Code & Browser

THEORY:
Creating Forms in HTML

Forms in HTML are used to collect user input. Forms are often used for various purposes, such as
registration, login, feedback, and search. In this guide, we'll learn how to implement forms in HTML with
step-by-step instructions.

PROGRAM CODE:

OUTPUT:-

CONCLUSION:-

ASSESSMENT SCHEME:-

Process Related Skills Product Related Skills Total (25-M) Signature of Faculty
(15-M) (10-M)

PRPCEM-AI&DS Page 28
 WEB DEVELOPMENT LAB(AI24209)

PRACTICAL NO. 6
AIM: Design a Web Page to apply CSS colors, Backgrounds, Borders, Margin & Padding.

LEARNING OBJECTIVE:
To learn the purpose and benefits of using CSS for styling web pages.
LEARNING OUTCOMES:
1. To apply CSS styles to HTML elements.
To control the visual presentation of web pages

SOFTWARE REQUIRED: Visual Studio Code & Browser

PROGRAM CODE:-

OUTPUT:-

CONCLUSION:-

ASSESSMENT SCHEME:-

Process Related Skills Product Related Skills Total (25-M) Signature of Faculty
(15-M) (10-M)

PRPCEM-AI&DS Page 29
 WEB DEVELOPMENT LAB(AI24209)

PRACTICAL NO. 7

AIM: Implement CSS Box Model in a Web Page.

LEARNING OBJECTIVE:
To Visualize how the box model affects the size and spacing of HTML elements.

LEARNING OUTCOMES:
1. To control the size, spacing, and layout of web page elements using the box model.

SOFTWARE REQUIRED: Visual Studio Code & Browser

PROGRAM CODE:-

OUTPUT:-

CONCLUSION:-.

ASSESSMENT SCHEME:-

Process Related Skills Product Related Skills Total (25-M) Signature of Faculty
(15-M) (10-M)

PRPCEM-AI&DS Page 30
 WEB DEVELOPMENT LAB(AI24209)

PRACTICAL NO. 8

AIM: Develop a JavaScript Program using Variables & Operators.

LEARNING OBJECTIVE:
To learn the concept of variables in JavaScript and their purpose in storing data.
LEARNING OUTCOMES:
1. To Write JavaScript code that uses variables and operators
SOFTWARE REQUIRED: Visual Studio Code & Browser

OUTPUT:-

CONCLUSION:-

ASSESSMENT SCHEME:-

Process Related Skills Product Related Skills Total (25-M) Signature of Faculty
(15-M) (10-M)

PRPCEM-AI&DS Page 31
 WEB DEVELOPMENT LAB(AI24209)

PRACTICAL NO. 9

AIM: Develop a JavaScript Program using Conditional & Looping Statements.

LEARNING OBJECTIVE:
To implement the concept of conditional & looping statements and their use in controlling program
flow.
LEARNING OUTCOMES:
1. To create programs that make decisions and repeat actions.

SOFTWARE REQUIRED: Visual Studio Code & Browser

OUTPUT:-

CONCLUSION:-

ASSESSMENT SCHEME:-

Process Related Skills Product Related Skills Total (25-M) Signature of Faculty
(15-M) (10-M)

PRPCEM-AI&DS Page 32
 WEB DEVELOPMENT LAB(AI24209)

PRACTICAL NO. 10

AIM: Develop a JavaScript Program using Functions.

LEARNING OBJECTIVE:
To Understand the concept of functions in JavaScript and their purpose in organizing and reusing
code.
LEARNING OUTCOMES:
1. To write modular and reusable JavaScript code.

SOFTWARE REQUIRED: Visual Studio Code & Browser

CODE:

OUTPUT:-

CONCLUSION:-.

ASSESSMENT SCHEME:-

Process Related Skills Product Related Skills Total (25-M) Signature of Faculty
(15-M) (10-M)

PRPCEM-AI&DS Page 33
 WEB DEVELOPMENT LAB(AI24209)

PRACTICAL NO. 11

AIM: Mini Project: Make a website using HTML, CSS & JS.
LEARNING OBJECTIVE:
To Apply their knowledge of HTML, CSS, and JavaScript to create a complete website.
LEARNING OUTCOMES:
1. To integrate HTML, CSS, and JavaScript effectively.
2. To gain Practical experience in building a complete web project.

SOFTWARE REQUIRED: Visual Studio Code & Browser

CODE:

OUTPUT:-

CONCLUSION:-.

ASSESSMENT SCHEME:-

Process Related Skills Product Related Skills Total (25-M) Signature of Faculty
(15-M) (10-M)

PRPCEM-AI&DS Page 34