Professional Documents
Culture Documents
Sec Practical File by Simran Vishisht
Sec Practical File by Simran Vishisht
WEB DEVELOPMENT
PRACTICAL FILE
<p>Development of the film began in 2015, when Shinde signed Bhatt and Khan for a film
to be made under her banner. Principal photography took place in Goa and Mumbai, in the
period from 21 January to 20 May 2016. The film features a score composed by Amit Trivedi
and lyrics written mostly by Kausar Munir.Development of the film began in 2015, when
Shinde signed Bhatt and Khan for a film to be made under her banner. Principal photography
took place in Goa and Mumbai, in the period from 21 January to 20 May 2016. The film
features a score composed by Amit Trivedi and lyrics written mostly by Kausar Munir.
</p>
<br>
<h2><b><u>Plot</u></b></h2></center>
<p >Based in Mumbai and Goa, Kaira is a promising cinematographer who dreams of
directing her own films. Blunt and cynical, she is most comfortable when with her three
best friends, Fatima, Jackie and Ganju. Kaira's life takes a downturn when she sleeps with
Raghuvendra, a film producer and then breaks up with her childhood sweetheart Sid, a
restobar owner. Raghu then gets engaged to his ex. Her landlord then evicts her out of her
apartment because the building association wants to rent apartments to married couples and
families only. All this, plus dissatisfaction with her prospects at work serves as a
catalyst for Kaira's shift to Goa, where she now has to grudgingly live with her parents
with whom she has some issues. She ends up spending many sleepless nights in unhappiness
and uncertainty.
While in Goa, Kaira seeks out Dr. Jehangir "Jug" Khan, a psychologist, for her
insomnia after inadvertently having heard him talk at a Mental Health Awareness
Conference. She warms to Jug's unconventional methods, trying to use them to understand
herself. Meanwhile, she meets a musician, Rumi, and falls in love with him, but they break
up before anything serious can happen when she realises they may not be the right fit for
each other. During this time, Kaira reunites with her younger brother, Kiddo, who is the
only other person besides her best friends that she is closest to. Matters with her family
come to a head when Kaira has an outburst at a family get-together where she confronts her
parents about them abandoning her for years at her grandparents' house.
Kaira finally narrates the story of her abandonment to Jug, who tells her that she
fears abandonment so much that she does not allow herself to commit in relationships,
leaving before they can leave her. He convinces her that she does not need to forgive her
parents for abandoning her in her childhood but as an adult, have the maturity to see them
as two regular people who are capable of making mistakes, like everyone else. After this,
Kaira makes an effort to reconcile with her parents and also works to finish her short
film.
At their last session, Kaira admits to Jug that she has grown to like and love
him. Jug responds that it is normal for a patient to feel this way about their therapist
and while he likes her platonically, a relationship would not be possible between them.
The two share a hug before Kaira leaves.
Kaira finally completes her short film, which she had been working on for years.
At the premiere, her friends, family, and exes are present to cheer her on. This is where
Kaira meets a furniture designer, and strikes a conversation with him.</p>
<center><h2><b><u>Cast</u></b></h2>
<h4>1.ALIA BHATT</h4><br>
<img src="https://img.staticmb.com/mbcontent//images/uploads/2022/8/alia-bhatt-
house.jpg" alt="picture of alia bhat" height="200"/><br>
<p>Alia Bhatt as Kaira, who is also referred to as "Sirat". During her interview
with Bombay Times, Bhatt spoke about her role. She said that playing the role of Kaira was
altogether a very different experience.</p>
<h4>2.SHAH RUKH KHAN</h4><br>
<img
src="https://filmfare.wwmindia.com/content/2020/jul/shahrukhkhan41596116759.jpg"
alt="picture of srk" height="200"/><br>
<p>
Shah Rukh Khan as Dr. Jehangir "Jug" Khan, a psychologist who helps Kaira find
answers to her life's problems. He describes his role by saying, "I am a support in the
film, more like an extended cameo. I am very glad to be in this film. I have never played
such a role in my entire career."
</p>
<h4>3.KUNAL KAPOOR</h4><br>
<img
src="https://images.yourstory.com/cs/7/3fb20ae02dc911e9af58c17e6cc3d915/Kunal-Kapoor---2-
1596778487175.png?fm=png&auto=format" alt="picture of srk" height="200"/><br>
<p>
Kunal Kapoor as Raghuvendra, a film producer, one of Kaira's former
boyfriends
</p>
<h4>4.ANGAD BEDI</h4><br>
<img src="https://wikibio.in/wp-content/uploads/2019/01/Angad-Bedi-
Image.jpg" alt="picture of angad bedi" height="200"/>
<p>
Angad Bedi as Sid, a restobar owner, one of Kaira's former boyfriends
</p>
<h4>5.ALI ZAFAR</h4><br>
<img src="https://sm.mashable.com/t/mashable_me/photo/default/33-
26_bepj.1248.jpg" alt="picture of ali zafar" height="200"/><br>
<p>
Ali Zafar as Rumi, a musician and singer-songwriter, who is one of
Kaira's former boyfriend
</p>
<h4>6.IRA DUBEY</h4><br>
<img src="http://starsunfolded.com/wp-content/uploads/2016/11/Ira-
Dubey.jpg" alt="picture of ira dubey" height="200"/><br>
<h4>7.ROHIT SURESH</h4><br>
<img src="https://wikibio.in/wp-content/uploads/2019/10/Rohit-
Saraf-Image.jpg" alt="picture of rohit suresh" height="200"/><br>
<p>
Rohit Suresh Saraf as Kiddo, Kaira's younger brother
</p>
<h4>8.YASHASWINI DAYAMA</h4><br>
<img src="https://failurebeforesuccess.com/wp-
content/uploads/2021/10/yashaswini-dayama-2.jpg" alt="picture of Yashaswini Dayama"
height="200"/><br>
<p>Yashaswini Dayama as Jackie, Kaira's friend</p>
<br>
<h2><u>Similar Movies</u></h2>
</body>
</html>
OUTPUT:
2. Create an HTML Page to display information about a dummy college in
following manner: a. Page must be divided in divisions where the outcome is
like
<frameset cols="50%,50%">
<frame src="Message.html" name="Message" scrolling="no"></frame>
<frame src="Notice.html" name="Notice"></frame>
</frameset>
Header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img align="left" src="https://storage.googleapis.com/ezap-
prod/colleges/5648/indraprastha-college-for-women-new-delhi-logo.jpg" height="60">
<center><p><b><big>Indraprastha College for Women</big>
<br> <br>University of Delhi
</b></p>
</center>
</body>
</html>
Navigation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="academics" target="_main"> Academics
</a>
<a
href="http://www.ipcollege.ac.in/Datafiles/cms/file/Admission/Prospectus/IP%20HOSTEL%20PRR
OSPECTUS%202022-23.pdf"
target="_main">Hostel</a>
<a href="http://www.ipcollege.ac.in/Viewtopics.aspx?MenuId=14382_Examination"
target="_main">Examination</a> &nbs
p;
<a href="report" target="_main">Student
Report</a>
<a
href="http://www.ipcollege.ac.in/Datafiles/cms/file/Admission/Prospectus/IP%20HOSTEL%20PRR
OSPECTUS%202022-23.pdf"
target="_main">Hostel</a>
<a href="http://www.ipcollege.ac.in/Viewtopics.aspx?MenuId=14382_Examination"
target="_main">Examination</a> &nbs
p;
<a href="report" target="_main">Student Report</a>
</body>
</html>
Message.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p><b>Principal's Desk</b></p>
<center><img src="http://www.ipcollege.ac.in/DataFiles/Content/39_Dr.Rekha%20Sethi.jp
g" height="90">
The College with its infrastructure and facilities is at your disposal to help you
grow and develop, to enable yourselves and become independent and confident young women
who can take on the world on their terms. <br>
IP College is about you. You are at the center of its vision: a vision which
upholds the values of equality and harmony, while it continues to mainstream the
marginalized, even as it pursues the goals of academic excellence.Come, let us walk that
exciting path together.
</p>
</center>
</span>
</body>
</html>
Notice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body> <b>NOTICES:</b>
<ul>ADMISSION 22-23
<li><a
href="http://www.ipcollege.ac.in/ViewpagePAnel.aspx?MenuId=UG_Admissions_14378"
target="_main">UG Admissions</a></li>
<li><a
href="http://www.ipcollege.ac.in/ViewpagePAnel.aspx?MenuId=14382_Hostel_Admissions"
target="_main">Hostel Admissions</a></li>
</ul>
<ul>DEPARTMENTS:
<li><a href="https://sites.google.com/view/ananta-thesciencesociety/?pli=1"
target="_main">Science Society</a></li>
<li><a href="https://sites.google.com/ip.du.ac.in/environmental-studies/faculty-
profile/research-publications" target="_main">Environmental-studies</a></li>
<li><a href="https://sites.google.com/a/ip.du.ac.in/english/faculty-
profile_1/research-and-publications"target="_main">English</a></li>
<li><a href="https://sites.google.com/ip.du.ac.in/economics/faculty-
profile/research-and-publications" target="_main">Economics</a></li>
<li><a href="https://sites.google.com/ip.du.ac.in/computerscience/faculty-
profile/research-and-publications" target="_main">Computer Science</a></li>
<li><a href="https://sites.google.com/ip.du.ac.in/commerce/faculty-
profile/research-publications" target="_main">Commerce</a></li>
</ul>
Gallery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<figure align="center"><figcaption><p style="text decoration:underline;font-
weight: bolder; text-align: center; font size: 25px;">Gallery</p></figcaption>
<img
src="https://static.zollege.in/public/college_data/images/appImage/16478544121444125990IPC
GNEW.jpg?tr=h-250,w-400,c-force" style="width: 300px;height: 110px;">
<img src="https://www.universitytimes.in/wp-content/uploads/2022/04/ipcw.jpg"
style="width: 300px;height: 110px;">
<img
src="https://cache.careers360.mobi/media/colleges/reviews/2021/3/29/150534/942CE0BF-20C5-
4698-BD86-567C17B59ADB.jpeg"style="width: 300px;height: 110px;" >
<img
src="https://cache.careers360.mobi/media/colleges/reviews/20160909_113631.jpg"style="width
: 300px;height: 110px;">
</body>
</html>
Footer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>Contact Number:</b>011 2396 2009
&n
bsp;
<b>Email Address:
</b>ipcw@ip.du.ac.in &nbs
p;
<b>Postal address:</b>31, Sham Nath Marg, Civil Lines, Delhi, 110054<br></small>
</body>
</html>
OUTPUT:
</form>
</center>
</body>
</html>
OUTPUT:
CSS
1. Redesign page created in HTML practical 1 such that:
a. All images have a solid red border of 1px width.
b. All headings should be in dark blue color.
c. Text of paragraph must be of different font-family than the complete
page.
d. Background color of the page should be aqua.
ANSWER:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: aqua;
}
#firstHeading{
font-family: Calisto MT;
font-size: 52px;
font-style: italic;
color: darkblue;
text-align: center;
}
p{
font-family: Garamond;
text-align: center;
}
h2{
font-family: Papyrus;
color: darkblue;
font-size: 33px;
}
#yes{
font-family: Garamond;
text-align: left;
}
img{
border: 1px solid red;
}
</style>
</head>
<body>
<h1 id="firstHeading">Dear Zindagi</h1>
<center><img src="https://m.media-amazon.com/images/I/81JGFBE8ZaL._SL1500_.jpg"
alt="picture of dear zindagi" height="400"/></center>
<p>Development of the film began in 2015, when Shinde signed Bhatt and Khan for a film
to be made under her banner. Principal photography took place in Goa and Mumbai, in the
period from 21 January to 20 May 2016. The film features a score composed by Amit Trivedi
and lyrics written mostly by Kausar Munir.Development of the film began in 2015, when
Shinde signed Bhatt and Khan for a film to be made under her banner. Principal photography
took place in Goa and Mumbai, in the period from 21 January to 20 May 2016. The film
features a score composed by Amit Trivedi and lyrics written mostly by Kausar Munir.
</p>
<br>
<center><h2><b><u>Plot</u></b></h2></center>
<p id="yes">Based in Mumbai and Goa, Kaira is a promising cinematographer who dreams
of directing her own films. Blunt and cynical, she is most comfortable when with her three
best friends, Fatima, Jackie and Ganju. Kaira's life takes a downturn when she sleeps with
Raghuvendra, a film producer and then breaks up with her childhood sweetheart Sid, a
restobar owner. Raghu then gets engaged to his ex. Her landlord then evicts her out of her
apartment because the building association wants to rent apartments to married couples and
families only. All this, plus dissatisfaction with her prospects at work serves as a
catalyst for Kaira's shift to Goa, where she now has to grudgingly live with her parents
with whom she has some issues. She ends up spending many sleepless nights in unhappiness
and uncertainty.
While in Goa, Kaira seeks out Dr. Jehangir "Jug" Khan, a psychologist, for her
insomnia after inadvertently having heard him talk at a Mental Health Awareness
Conference. She warms to Jug's unconventional methods, trying to use them to understand
herself. Meanwhile, she meets a musician, Rumi, and falls in love with him, but they break
up before anything serious can happen when she realises they may not be the right fit for
each other. During this time, Kaira reunites with her younger brother, Kiddo, who is the
only other person besides her best friends that she is closest to. Matters with her family
come to a head when Kaira has an outburst at a family get-together where she confronts her
parents about them abandoning her for years at her grandparents' house.
Kaira finally narrates the story of her abandonment to Jug, who tells her that she
fears abandonment so much that she does not allow herself to commit in relationships,
leaving before they can leave her. He convinces her that she does not need to forgive her
parents for abandoning her in her childhood but as an adult, have the maturity to see them
as two regular people who are capable of making mistakes, like everyone else. After this,
Kaira makes an effort to reconcile with her parents and also works to finish her short
film.
At their last session, Kaira admits to Jug that she has grown to like and love
him. Jug responds that it is normal for a patient to feel this way about their therapist
and while he likes her platonically, a relationship would not be possible between them.
The two share a hug before Kaira leaves.
Kaira finally completes her short film, which she had been working on for years.
At the premiere, her friends, family, and exes are present to cheer her on. This is where
Kaira meets a furniture designer, and strikes a conversation with him.</p>
<center><h2><b><u>Cast</u></b></h2>
<h6>1.ALIA BHATT</h6>
<img src="https://img.staticmb.com/mbcontent//images/uploads/2022/8/alia-bhatt-
house.jpg" alt="picture of alia bhat" height="200"/></center>
<p>Alia Bhatt as Kaira, who is also referred to as "Sirat". During her interview
with Bombay Times, Bhatt spoke about her role. She said that playing the role of Kaira was
altogether a very different experience.</p>
<center><h6>2.SHAH RUKH KHAN</h6>
<img
src="https://filmfare.wwmindia.com/content/2020/jul/shahrukhkhan41596116759.jpg"
alt="picture of srk" height="200"/></center>
<p>
Shah Rukh Khan as Dr. Jehangir "Jug" Khan, a psychologist who helps Kaira find
answers to her life's problems. He describes his role by saying, "I am a support in the
film, more like an extended cameo. I am very glad to be in this film. I have never played
such a role in my entire career."
</p>
<center><h6>3.KUNAL KAPOOR</h6>
<img
src="https://images.yourstory.com/cs/7/3fb20ae02dc911e9af58c17e6cc3d915/Kunal-Kapoor---2-
1596778487175.png?fm=png&auto=format" alt="picture of srk" height="200"/></center>
<p>
Kunal Kapoor as Raghuvendra, a film producer, one of Kaira's former
boyfriends
</p>
<center><h6>4.ANGAD BEDI</h6>
<img src="https://wikibio.in/wp-content/uploads/2019/01/Angad-Bedi-
Image.jpg" alt="picture of angad bedi" height="200"/></center>
<p>
Angad Bedi as Sid, a restobar owner, one of Kaira's former boyfriends
</p>
<center><h6>5.ALI ZAFAR</h6>
<img src="https://sm.mashable.com/t/mashable_me/photo/default/33-
26_bepj.1248.jpg" alt="picture of ali zafar" height="200"/></center>
<p>
Ali Zafar as Rumi, a musician and singer-songwriter, who is one of
Kaira's former boyfriend
</p>
<center><h6>6.IRA DUBEY</h6>
<img src="http://starsunfolded.com/wp-content/uploads/2016/11/Ira-
Dubey.jpg" alt="picture of ira dubey" height="200"/></center>
<center><h6>7.ROHIT SURESH</h6>
<img src="https://wikibio.in/wp-content/uploads/2019/10/Rohit-
Saraf-Image.jpg" alt="picture of rohit suresh" height="200"/></center>
<p>
Rohit Suresh Saraf as Kiddo, Kaira's younger brother
</p>
<center><h6>8.YASHASWINI DAYAMA</h6>
<img src="https://failurebeforesuccess.com/wp-
content/uploads/2021/10/yashaswini-dayama-2.jpg" alt="picture of Yashaswini Dayama"
height="200"/></center>
<p>Yashaswini Dayama as Jackie, Kaira's friend</p>
</body>
</html>
OUTPUT:
2. Redesign page created in HTML practical 2 such that:
a. All divisions have a solid border of 2px.
b. Header and Footer division have aquamarine and dark blue background
color respectively and same font-style which are larger than all other
divisions.
c. Background color of the Navigation division should be aqua and links of
the pages should appear in UPPERCASE.
d. Background color of the message and notices division should be light sky
blue and text color should not be black. Message text should be italic and
notices should be bold.
ANSWER:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question2</title>
<Style>
frameset{
border-style: solid;
border-width: 2px;
}
</Style>
<frameset rows="11%,6%,50%,26%,7%" >
<frame src="Header.html" name="Header" scrolling ="no">
<frame src="Navigation.html" name="Navigation">
<frameset cols="50%,50%">
<frame src="Message.html" name="Message" scrolling="no"></frame>
<frame src="Notice.html" name="Notice"></frame>
</frameset>
</head>
</html>
Header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: aquamarine;
font-size: large;
font-family: Lucida Bright;
}
</style>
</head>
<body>
<img align="left" src="https://storage.googleapis.com/ezap-
prod/colleges/5648/indraprastha-college-for-women-new-delhi-logo.jpg" height="60">
<center><p><b><big>Indraprastha College for Women</big>
<br> University of Delhi
</b></p>
</center>
</body>
</html>
Footer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: darkblue;
font-size: large;
font-family: Lucida Bright;
color: rgb(66, 59, 59);
}
</style>
</head>
<body>
</body>
</html>
Navigation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<figure align="center"><figcaption><p style="text decoration:underline;font-
weight: bolder; text-align: center; font size: 25px;">Gallery</p></figcaption>
<img
src="https://static.zollege.in/public/college_data/images/appImage/16478544121444125990IPC
GNEW.jpg?tr=h-250,w-400,c-force" style="width: 300px;height: 110px;">
<img src="https://www.universitytimes.in/wp-content/uploads/2022/04/ipcw.jpg"
style="width: 300px;height: 110px;">
<img
src="https://cache.careers360.mobi/media/colleges/reviews/2021/3/29/150534/942CE0BF-20C5-
4698-BD86-567C17B59ADB.jpeg"style="width: 300px;height: 110px;" >
<img
src="https://cache.careers360.mobi/media/colleges/reviews/20160909_113631.jpg"style="width
: 300px;height: 110px;">
</body>
</html>
Gallery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<figure align="center"><figcaption><p style="text decoration:underline;font-
weight: bolder; text-align: center; font size: 25px;">Gallery</p></figcaption>
<img
src="https://static.zollege.in/public/college_data/images/appImage/16478544121444125990IPC
GNEW.jpg?tr=h-250,w-400,c-force" style="width: 300px;height: 110px;">
<img src="https://www.universitytimes.in/wp-content/uploads/2022/04/ipcw.jpg"
style="width: 300px;height: 110px;">
<img
src="https://cache.careers360.mobi/media/colleges/reviews/2021/3/29/150534/942CE0BF-20C5-
4698-BD86-567C17B59ADB.jpeg"style="width: 300px;height: 110px;" >
<img
src="https://cache.careers360.mobi/media/colleges/reviews/20160909_113631.jpg"style="width
: 300px;height: 110px;">
</body>
</html>
Message.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: lightblue;
color: brown;
font-style: italic;
}
</style>
</head>
<body>
<p><b>Principal's Desk</b></p>
<center><img src="http://www.ipcollege.ac.in/DataFiles/Content/39_Dr.Rekha%20Sethi.jp
g" height="90">
IP College is about you. You are at the center of its vision: a vision which
upholds the values of equality and harmony, while it continues to mainstream the
marginalized, even as it pursues the goals of academic excellence.Come, let us walk that
exciting path together.
</p>
</center>
</span>
</body>
</html>
Notice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: lightblue;
color: brown;
font-style: italic;
}
</style>
</head>
<body>
<p><b>Principal's Desk</b></p>
<center><img src="http://www.ipcollege.ac.in/DataFiles/Content/39_Dr.Rekha%20Sethi.jp
g" height="90">
The College with its infrastructure and facilities is at your disposal to help you
grow and develop, to enable yourselves and become independent and confident young women
who can take on the world on their terms. <br>
IP College is about you. You are at the center of its vision: a vision which
upholds the values of equality and harmony, while it continues to mainstream the
marginalized, even as it pursues the goals of academic excellence.Come, let us walk that
exciting path together.
</p>
</center>
</span>
</body>
</html>
OUTPUT:
JAVASCRIPT
var arr="";
for(var i=0; i<Flowers.length; i++)
{
arr+=Flowers[i]+"<br>";
}
document.write(arr);
document.write("<br><br>");
document.write("<b>The elements of the array Flower as string are:</b>");
document.write("<br>");
document.write(text);
</script>
</body>
</html>
OUTPUT:
let text="";
for(let i=0; i<Planets.length; i++)
{
text+=Planets[i]+"<br>";
}
document.write("<b>The original array is:</b><br>");
document.write(text);
document.write("<br><br> <b>The Reverse of the array is:</b><br>");
reverse_array=Planets.reverse();
document.write(reverse_array);
</script>
</body>
</html>
OUTPUT:
OUTPUT:
+
4. Write JAVASCRIPT script to show Alert box.
ANSWER:
<html>
<head> <title> Alert </title> </head>
<body>
<script language="JavaScript">
alert("Welcome to my Webpage!");
document.write('<center/>');
document.write('<img src="https://www.shutterstock.com/image-vector/welcome-poster-
spectrum-brush-strokes-260nw-1146069941.jpg" height="600">');
</script>
</body>
</html>
OUTPUT:
5. Write JAVASCRIPT script to show Prompt box
ANSWER:
<html>
<head> <title> Prompt </title> </head>
<body>
<script language="JavaScript">
document.write('<img src="https://www.shutterstock.com/image-vector/welcome-poster-
spectrum-brush-strokes-260nw-1146069941.jpg" height=200/>');
document.write('<h1>Greetings</h1>');
document.write(prompt("Enter Your Name:","Name"));
document.write(" Welcome to my HomePage!");
</script>
</body>
</html>
OUTPUT:
for(count=0;count<2;count++)
{
if(response!=answer)
{
confirm("Wrong, Press OK for another chance");
response=prompt(question,"0");
if(count==1)
{
alert("Better Luck Next Time");
}
}
else
{
alert("Great!! You are right");
count=3;
}
}
var output=(response==answer)?correct:incorrect;
document.write(output);
</script>
</head>
</body></body>
</html>
OUTPUT:
PHP
1. Write PHP script to construct the following pattern using nested for loop.
Answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content = "IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>PHP Pattern</title>
</head>
<body>
<?php
$n=4;
$i=0;
$j=0;
//Condition for upper half pattern
for($i=0; $i<$n; $i++)
{
for($j=0;$j<2*$n-1;$j++)
{
//Condition for *
if(($i+$j)<$n || ($i+$j)>=$n+2*$i-1) print"*";
//Condition for " "
else echo " ";
}
echo "<br>";
}
//Condition for lower half pattern
for($i=1; $i<$n; $i++)
{
for($j=0;$j<2*$n-1;$j++)
{
//Condition for *
if($j<=$i || ($i+$j)>=$n+($n/2)) print"*";
//Condition for " "
else echo " ";
}
echo "<br>";
}
?>
</body>
</html>
OUTPUT:
2. Accept a number from an HTML page and send it to a PHP file. Validate that this number is a positive
integer in the range 2-100. PHP file should check whether this number is prime or composite. If number
is found prime then Fibonacci series till that element is also printed otherwise factorial of that number
is to be printed.
ANWSER:
<?php
$num1 = $_POST['num'];
echo " The number is $num1 <BR> <BR>";
checkRange($num1); // calling of checkRange() function for checking range
// calling of primeCheck() function for checking prime number if true it
//returns fibonacci series;
//otherwise factorial is been calculated
function checkRange($num1){
if ($num1 > 2 && $num1 < 100) {
echo" $num1 is in the range 2-100";
primeCheck($num1);
}
else{
echo" $num1 Number is not in a range(2-100)";
}
}
function primeCheck($num1){
$count=0;
for ( $i=1; $i<=$num1; $i++) {
if (($num1%$i)==0) {
$count++; }
}
if ($count<3) {
echo "<BR><BR>$num1 is a prime number.";
echo "<BR> Fibonacci series of $num1 is ";
Fibonacci($num1);
}
else{
echo "<BR><BR>$num1 is a composite number.";
$fact = Factorial($num1);
echo "<BR>Factorial of $num1 = $fact";
}
}
function Fibonacci($n){
$num1 = 0;
$num2 = 1;
$counter = 0;
while ($counter < $n){
echo ' '.$num1;
$num3 = $num2 + $num1;
$num1 = $num2;
$num2 = $num3;
$counter = $counter + 1;
}
}
function Factorial($number){
if($number <= 1){
return 1;
}
else{
return $number * Factorial($number - 1);
}
}
?>
OUTPUT:
3. Write a PHP file colors.php which declares an array of ten colors names. Every time this file is
accessed a random color from this array should be chosen and same is to be set as the background
color of a division.
ANSWER:
<?php
$background_colors = array('blue', 'black', 'yellow', 'green',
'orange','red','white','#f0f0f0','whitesmoke',"#F2FD8E");
$count = count($background_colors) - 1;
$i = rand(0, $count);
$rand_background = $background_colors[$i];
?>
<style>
.color{
margin-left:150px;
margin-top:80px;
width:80%;
height:80vh;
text-align:center;
}
</style>
<html>
<body>
<section class="color" style="background: <?php echo $rand_background; ?>;">
<h1>This is a php code that shows random color from array.</h1>
</section>
</body>
</html>
OUTPUT:
4. Create a login page asking for user name and password from. On submitting these details, a
welcome message should be displayed if the user already exists in the database. Otherwise an error
message is to be displayed.
ANWSER:
login.php
<?php include('server.php') ?>
<!DOCTYPE html>
<html>
<head>
<title>Registration system PHP and MySQL</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h2>Login</h2>
</div>
product.php
<!DOCTYPE html>
<html>
<body>
<?php
session_start();
// initializing variables
$username = "";
$email = "";
$errors = array();
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
print "<br> id: ". $row["id"]. "<br> - Name: ". $row["username"]. "<br> - Email: "
. $row["email"] . "<br>";
print "<img src=\"".$row["img"]."\">";
}
} else {
print "0 results";
}
$db->close();
?>
</body>
</html>
register.php
<?php include('server.php') ?>
<!DOCTYPE html>
<html>
<head>
<title>Registration system PHP and MySQL</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h2>Register</h2>
</div>
server.php
<?php
session_start();
// initializing variables
$username = "";
$email = "";
$errors = array();
// REGISTER USER
if (isset($_POST['reg_user'])) {
// receive all input values from the form
$username = mysqli_real_escape_string($db, $_POST['username']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$password_1 = mysqli_real_escape_string($db, $_POST['password_1']);
$password_2 = mysqli_real_escape_string($db, $_POST['password_2']);
// LOGIN USER
if (isset($_POST['login_user'])) {
$username = mysqli_real_escape_string($db, $_POST['username']);
$password = mysqli_real_escape_string($db, $_POST['password']);
if (empty($username)) {
array_push($errors, "Username is required");
}
if (empty($password)) {
array_push($errors, "Password is required");
}
if (count($errors) == 0) {
$password = md5($password);
$query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$results = mysqli_query($db, $query);
if (mysqli_num_rows($results) == 1) {
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}else {
array_push($errors, "Wrong username/password combination");
}
}
}
?>
errors.php
<?php if (count($errors) > 0) : ?>
<div class="error">
<?php foreach ($errors as $error) : ?>
<p><?php echo $error ?></p>
<?php endforeach ?>
</div>
<?php endif ?>
style.css
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: #F8F8FF;
}
.header {
width: 30%;
margin: 50px auto 0px;
color: white;
background: #5F9EA0;
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
}
form, .content {
width: 30%;
margin: 0px auto;
padding: 20px;
border: 1px solid #B0C4DE;
background: white;
border-radius: 0px 0px 10px 10px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
}
.error {
width: 92%;
margin: 0px auto;
padding: 10px;
border: 1px solid #a94442;
color: #a94442;
background: #f2dede;
border-radius: 5px;
text-align: left;
}
.success {
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
margin-bottom: 20px;
index.php
<?php
session_start();
if (!isset($_SESSION['username'])) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h2>Home Page</h2>
</div>
Welcome to my project page
<div class="content">
<!-- notification message -->
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success" >
<h3>
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>
</body>
</html>
OUTPUT:
5. Create a table student_details in MySql which is capable of storing the information which is being
passed in HTML practical 3. Write PHP code in a file named report.php which validates all the data and
then stores it in table and displays the same. After insertion of the entries in the database, an alert box
should be displayed stating whether the insertion was successful or not.
ANSWER:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question_3</title>
</head>
<body>
<center><h1><u><b>Student Identity</b></u></h1><br> <br>
<form method="get" action="report.php">
FIRST NAME: <input type="text" placeholder="enter your name"
id="f_name"/><br><br><br>
</form>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<center>
<?php
$conn = mysqli_connect("localhost", "root", "", "formspage");
// Check connection
if($conn === false){
die("ERROR: Could not connect. ". mysqli_connect_error());
}
$first_name = $_REQUEST['first_name'];
$last_name = $_REQUEST['last_name'];
$address = $_REQUEST['address'];
$email = $_REQUEST['email'];
$rollnum=$_REQUEST['rollnum'];
$age=$_REQUEST['age'];
$gender=$_REQUEST['gender'];
$sql = "INSERT INTO login_details
VALUES('$first_name','$last_name','$address','$email','$rollnum','$age','$gender' )";
if(mysqli_query($conn, $sql)){
echo "<script language='javascript'>";
echo "alert('INFORMATION ENTERED')";
echo "</script>";
}
else{
echo "<script language='javascript'>";
echo "alert('WRONG INFORMATION')";
echo "</script>";
}
// Close connection
mysqli_close($conn);
?>
</center>
</body>
</html>
6. Write PHP code in a file named db.php which fetches the data from student_details table and
displays the data in tabular way.
ANSWER:
<!DOCTYPE html>
<html>
<head>
<title>Table with database</title>
<style>
table {
margin: 0 auto;
font-size: large;
border: 1px solid black;
}
th,td {
font-weight: bold;
border:1px solid black;
padding: 10px;
text-align: center;
color: black;
}
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Email</th>
<th>Roll Number</th>
<th>Age</th>
<?php
$conn = mysqli_connect("localhost", "root", "", "formpage");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql="SELECT first_name ,last_name, address, email, rollnum, age FROM student_details";
$result = $conn->query($sql);
echo "<h3><center>Data stored in a database successfully.". "<br>
<i>Data stored is retrieved and displayed in a
tablebelow</i></center></h3>";
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row["first_name"]. "</td><td>" . $row["last_name"]."</td><td>" .
$row["address"]. "</td><td>". $row["email"].
"</td><td>". $row["rollnum"] . "</td><td>" . $row["age"];
}
echo "</table>";
}
else {
echo "0 results";
}
$conn->close();
?>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question_3</title>
</head>
<body>
<center><h1><u><b>Student Identity</b></u></h1><br> <br>
<form method="get" action="report.php">
STUDENT NAME: <input type="text" placeholder="enter your name"
id="fname"/><br><br><br>
LAST NAME: <input type="text" placeholder="enter your last name"
id="l_name"/><br><br><br>
</form>
</center>
</body>
</html>