Scribd
Upload
15 views64 pages

Graphic: "Full Stack Web Development"

Uploaded by

Siddhartha Negi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views64 pages

Graphic: "Full Stack Web Development"

Uploaded by

Siddhartha Negi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 64

Graphic Era HILL UNI V E RS I T Y

Established by an Act of the State Legislature of Uttarakhand (Adhiniyam Sankhya 12 of 2011)

University under section 2(f) of UGC Act, 1956

DEHRADUN CAMPUS

TERM WORK

“Full Stack Web Development”


PCS - 693
B-Tech (CSE)
Semester - VIth
2023-24

SUBMITTED BY: SUBMITTED TO:


Danish Ansari Mr. Piyush Bagla
2118471
E-26 (Assistant Professor)
B.tech CSE(6th Sem) Dept. of Computer Sc. & Engg
Graphic Era Hill University,
Dehradun.
Graphic Era HILL UNI V E RS I T Y
Established by an Act of the State Legislature of Uttarakhand (Adhiniyam Sankhya 12 of 2011)

University under section 2(f) of UGC Act, 1956

DEHRADUN CAMPUS

CERTIFICATE

University Roll No.:2118471 Class Roll No: 26

This is to certify that Mr. Danish Ansari has satisfactorily completed


experiments / Term work in the laboratory of this University. The course of the
experiment/ Term work with subject code PCS-693 in partial fulfillment of his/her
requirements at the 6th semester of B.Tech. (CSE) prescribed by the Graphic Era Hill
University during the years 2023-2024.

Faculty In charge
STUDENT LAB REPORT SHEET

Name of Student: Danish Ansari Mob. No: 8954233354


Address Permanent: 399, chanakya marg, subhash nagar, dehradun
Father’s Name: Occupation: MTO(GEU) Mob.No :
Mother’s Name: Occupation : HouseWife Mob.No :
Section: E Branch: CSE Semester: 6th Class Roll No: 26 Grade A B C
Local Address: Chanakya marg Dehradun Email: [email protected] Marks 5 3 1

S.No. Practical D.O.P. Date of Grade Grade Total Student’s Teacher’s


Submiss (Viva) (Repor Marks Signature Signature
ion t File) (out of
10)
1 Practical 1

2 Practical 2

3 Practical 3

4 Practical 4

5 Practical 5

6 Practical 6

7 Practical 7

8 Practical 8

9 Practical 9

10 Practical 10

11 Practical 11

12 Practical 12

13 Practical 13

14 Practical 14
S.No. Practical D.O.P. Date of Grad Grade Total Student’s Teacher’s
Submis e (Repor Marks Signature Signature
s ion (Viva t File) (out of
) 10)
15 Practical 15

16 Practical 16

17 Practical 17

18 Practical 18

19 Practical 19

20 Practical 20

21 Practical 21

22 Practical 22

23 Practical 23

24 Practical 24

25 Practical 25

26 Practical 26

27 Practical 27

28 Practical 28

29 Practical 29

30 Practical 30

31 Practical 31

32 Practical 32

33 Practical 33

34 Practical 34

Total No. of Practicals Alloted: 34

Total No. of Practicals Completed: 34

Percentage Attendance of Practical: 90%


Q1. Demonstrate all the text formatting tags in a single HTML page.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Formatting Example</title>
</head>
<body>
<h1>Text Formatting Example</h1>
<p>This is a <em>paragraph</em> with <strong>emphasized</strong> and
<del>deleted</del> text.</p>
<p>Here's an <ins>inserted</ins> word. And don't forget to use <code>this i will use for
coding</code> tags for code snippets.</p>
<p>Subscripts: H<sub>2</sub>O, Superscripts: x<sup>2</sup></p>
<p>Acronyms: <abbr title="Hypertext Markup Language">HTML</abbr></p>
<p>Inline <a href="#">links</a> are great!</p>
<p>Blockquote:</p>
<blockquote>
"harwork have no replacement"
</blockquote>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q2. Write an HTML code to draw the following Figure:
*
***
*****
*******

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<pre>
*
* * *
* * * * *
* * * * * * *
</pre>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q3. Create a web page to print the following table:

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
img {
max-height: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">Sr. No.</th>

Name: Danish Ansari Section: E Roll No: 26


<th rowspan="2">Course</th>
<th rowspan="2" colspan="6">subject</th>
<th colspan="2">Marks</th>
<th colspan="2">Category</th>
<th rowspan="2">Practical/<br />Theory</th>
</tr>
<tr>
<th>Internal</th>
<th>External</th>
<th>Internal</th>
<th>External</th>
</tr>
<tr>
<td rowspan="4">1</td>
<td rowspan="4">MBA</td>
<td colspan="6">Management Accounting</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td><img src="IMAGES\tick_sign.jpg" alt="tick" /> <img /></td>
<td>Theory</td>
</tr>
<tr>
<td colspan="6">Information Technology</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td><img src="IMAGES\tick_sign.jpg" alt="tick"></td>
<td>T and P</td>
</tr>
<tr>
<td colspan="6">Basics Of Marketing</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td><img src="IMAGES\tick_sign.jpg" alt="tick"></td>
<td>Theory</td>
</tr>
<tr>
<td colspan="6">E-Commerce</td>
<td>50</td>
<td>-</td>
<td><img src="IMAGES\tick_sign.jpg" alt="tick"></td>

Name: Danish Ansari Section: E Roll No: 26


<td>-</td>
<td>Teory</td>
</tr>
<tr>
<td rowspan="6">2</td>
<td rowspan="6">MCM</td>
<td colspan="6">Visual Basic</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td><img src="IMAGES\tick_sign.jpg" alt="tick" /> <img /></td>
<td>T and P</td>
</tr>
<tr>
<td colspan="6">Internet Technology</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td><img src="IMAGES\tick_sign.jpg" alt="tick"></td>
<td>T and P</td>
</tr>
<tr>
<td colspan="6">Network Technology</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td><img src="IMAGES\tick_sign.jpg" alt="tick"></td>
<td>Theory</td>
</tr>
<tr>
<td colspan="6">VB.Net</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td><img src="IMAGES\tick_sign.jpg" alt="tick"></td>
<td>T and P</td>
</tr>
<tr>
<td colspan="6">Linux</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td><img src="IMAGES\tick_sign.jpg" alt="tick"></td>

Name: Danish Ansari Section: E Roll No: 26


<td>T and P</td>
</tr>
<tr>
<td colspan="6">ISA</td>
<td>50</td>
<td>-</td>
<td><img src="IMAGES\tick_sign.jpg" alt="tick"></td>
<td>-</td>
<td>Theory</td>
</tr>
</table>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q4. Using table related tags align the images with hyperlinks

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>question_4</title>
<style>
body{
display: flex;
flex-direction: column;
}
h1{
text-align: center;
}
table,th,td {
border: 1px solid black;
}
img {
max-height: 100px;
}
</style>
</head>
<body>
<h1>Table With Mobile Connections</h1>

Name: Danish Ansari Section: E Roll No: 26


<table>
<tr>
<td><img src="IMAGES/vodaphone.jpg" alt="vodaphone"></td>
<td><img src="IMAGES/microsoft.jpg" alt="microsoft"></td>
<td><img src="IMAGES/tata_indicom.jpg" alt="tata indicom"></td>
<td><img src="IMAGES/airtel.jpg" alt="airtel"></td>
</tr>
<tr>
<td><img src="IMAGES/tata_docomo.jpg" alt="tata_docomo"></td>
<td colspan="2" align="center"><h1>Table With Images</h1></td>
<td><img src="IMAGES/aircel.jpg" alt="aircel"></td>
</tr>
<tr>
<td><img src="IMAGES/Uninor.jpg" alt="uninor"></td>
<td><img src="IMAGES/facebook.jpg" alt="google"></td>
<td><img src="IMAGES/hutch.jpg" alt="hutch"></td>
<td><img src="IMAGES/google.jpg" alt="google"></td>
</tr>
</table>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q5. Create a web page with the following using HTML:
I. To embed an image map in a web page.
II. To fix the hot spots.
III. Show all the related information when the hot spots are clicked.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>question_5</title>
<style>
table{
position: relative;
}
h1{
text-align: center;
}
table,th,td {
border: 1px solid black;
left:40vh;

}
img {
max-height: 100px;
}
</style>
</head>
<body>
<h1>Table With Mobile Connections</h1>
<table>
<tr>
<td><a href="www.vodafone.com"><img src="IMAGES/vodaphone.jpg"
alt="vodaphone"></a></td>
<td><a href="www.microsoft.com"><img src="IMAGES/microsoft.jpg"
alt="microsoft"></a></td>
<td><a href="tata_indicom"><img src="IMAGES/tata_indicom.jpg" alt="tata
indicom"></a></td>
<td><a href="airtel.com"><img src="IMAGES/airtel.jpg" alt="airtel"></a></td>
</tr>
<tr>

Name: Danish Ansari Section: E Roll No: 26


<td><a href="docomo"><img src="IMAGES/tata_docomo.jpg"
alt="tata_docomo"></a></td>
<td colspan="2" align="center"><h1>Table With Images</h1></td>
<td><a href="aircel"><img src="IMAGES/aircel.jpg" alt="aircel"></a></td>
</tr>
<tr>
<td><a href="uninor"><img src="IMAGES/Uninor.jpg" alt="uninor"></a></td>
<td><a href="facebook"><img src="IMAGES/facebook.jpg" alt="google"></a></td>
<td><a href="hutch"><img src="IMAGES/hutch.jpg" alt="hutch"></a></td>
<td><a href="google.com"><img src="IMAGES/google.jpg"
alt="google"></a></td>
</tr>
</table>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q6. Create a web page having frames as follows:

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main_container {
position: absolute;
}

.container {
width: 953px;
position: relative;
border: 2px solid black;
display: flex;
justify-content: center;
}

.frame1 {
border: 2px solid black;
position: relative;
top: -2px;
height: 220px;
width: 250px;
}

.frame2 {
border: 2px solid black;

Name: Danish Ansari Section: E Roll No: 26


position: relative;
top: -2px;
right:6px;
height: 220px;
width: 400px;
}
.frame3 {
border: 2px solid black;
position: relative;
top: -2px;
right:12px;
height: 220px;
width: 300px;
}
</style>
</head>

<body>
<div class="main_container">
<div class="container">
<p>Danish Ansari <br> Work Hard To Succeed</p>
</div>
<iframe class="frame1" src="question6_links.html">
<< /p>
</iframe>
<iframe class="frame2" src="" frameborder="0"></iframe>
<iframe class="frame3" src="" frameborder="0"></iframe>
</div>
</body>
</html>

Question6_links.html source code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
list-style: none;
line-height: 26px;
}

Name: Danish Ansari Section: E Roll No: 26


a{
color:green !important;
}
a:active{
color: red !important;
}
a:visited{
color:blue !important;
}
</style>
</head>
<body>
<ul>
<li><a href="">Objective</a></li>
<li><a href="">Personal Information</a></li>
<li><a href=""> Family Information</a></li>
<li><a href="">Educational Information</a></li>
<li><a href=""> Experience</a></li>
<li><a href="">Achiements</a></li>
<li><a href="">Other</a></li>
</ul>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q7. Write a HTML code for the following snapshot.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
position: relative;
margin: auto;
background-color: rgb(156, 156, 247);
height: 450px;
width: 500px;
}
#sec1{
position: relative;
top: 10px;
margin: 10px 10px;
padding-left: 20px;
border: 1px solid black;

Name: Danish Ansari Section: E Roll No: 26


}
.sec2{
position: relative;
top: 10px;
margin: 10px 10px;
padding-left: 20px;
border: 1px solid black;
}
.sec3{
position: relative;
top: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<div>
<form action="/submit">
<fieldset id="sec1">
<legend>Basic Information</legend>
<br>
<label for="fname">Full name: </label>
<input type="text" id="fname" />
<br />
<br />
<label for="bdate">Birth date: </label>
<input type="date" id="bdate" />
<br />
<br />
<label>Gender:</label>
<input type="radio" id="gender_male" name="g" />
<label for="gender_male">Male</label>
<input type="radio" id="gender_female" name="g" />
<label for="gender_female">female</label>
<br />
<br />
<label for="add">Address:</label>
<input type="text" id="add" />
<br /><br />
<label for="pnumber">Phone number:</label>
<input type="number" id="pnumber" />
<br><br>
</fieldset>

Name: Danish Ansari Section: E Roll No: 26


<fieldset class="sec2">
<legend>Extra Information</legend>
<br>
<label> Interests</label>
<input type="checkbox" id="books">
<label for="books">Books</label>
<input type="checkbox" id="movies">
<label for="movies">Movies</label>
<input type="checkbox" id="videogames">
<label for="videogames">Videogames</label>
<br><br>
<label for="color">Favorite color:</label>
<input type="color" id="color">
<br><br>
</fieldset>
<section class="sec3">
<input type="submit">
<input type="reset">
</section>
</form>
</div>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q8. Create a web page of customer profile for data entry of customers in a Hotel,
The
profile should include Name, Address, Age, gender, Room Type (A/C, Non-A/C or
Deluxe), Type of payment (Cash, Credit/Debit Card or Coupons).

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.form-container {
width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
text-align: left;
}
label {
display: inline-block;
margin-bottom: 10px;
}
input[type="text"], select {
width: 100%;
padding: 5px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Customer Profile</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="address">Address:</label>
<input type="text" id="address" name="address" required>

<label for="age">Age:</label>
<input type="text" id="age" name="age" required>

Name: Danish Ansari Section: E Roll No: 26


<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>

<label for="roomType">Room Type:</label>


<select id="roomType" name="roomType">
<option value="ac">A/C</option>
<option value="nonAc">Non-A/C</option>
<option value="deluxe">Deluxe</option>
</select>

<label for="paymentType">Payment Type:</label>


<input type="radio" id="cash" name="paymentType" value="cash">
<label for="cash">Cash</label>
<input type="radio" id="card" name="paymentType" value="card">
<label for="card">Credit/Debit Card</label>
<input type="radio" id="coupons" name="paymentType" value="coupons">
<label for="coupons">Coupons</label>

<button type="submit">Submit</button>
</form>
</div>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q9. Demonstrate the use of following HTML5 Tags:
I. <Video>
II. <Audio>
III. <Header>
IV. <Footer>
V. <Nav>
VI. <Embed>
VII. <Datalist>
VIII. <Bdi>
IX. <Article>
X. <Output>
XI. <Keygen>

Source Code:
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>

<footer>
© 2024 My Company
</footer>

<nav>
<a href="/">Home</a>
<a href="/products">Products</a>
<a href="/contact">Contact</a>
</nav>

Name: Danish Ansari Section: E Roll No: 26


<embed src="mydocument.pdf" type="application/pdf" width="500" height="300">

<input list="fruits">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Orange">
</datalist>

<p>My name is <bdi>danish</bdi>.</p>

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<keygen name="userkey">
<br>
<input type="submit" value="Submit">
</form>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q10. Create a web page to show all hyperlinks with following specification:
• Default color is pink.
• Active color is blue.
• Visited color is Green.
• Hyperlink should be without underline.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
a{
color: pink;
text-decoration: none;
}
a:hover {
color: blue;
}
a:visited {
color: green;
}
</style>
</head>
<body>
<h1>My Hyperlinks</h1>
<p>
<a href="https://example.com">Visit Example</a>
</p>
<p>
<a href="https://google.com">Explore Google</a>
</p>
<p>
<a href="https://bing.com">Search with Bing</a>
</p>
</body>
</html>

Name: Danish Ansari Section: E Roll No: 26


Output:

Name: Danish Ansari Section: E Roll No: 26


Q11. Create Box Shadow and text Shadow using CSS3.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Box Shadow Example */
.box-shadow-example {
width: 200px;
height: 100px;
background-color: #f0f0f0;
margin: 20px;
padding: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* Text Shadow Example */


.text-shadow-example {
font-size: 24px;
font-weight: bold;
color: #333;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box-shadow-example">Box Shadow Example</div>
<p class="text-shadow-example">Text Shadow Example</p>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q12. Create Rounded Corners using css3.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.rounded-box {
width: 200px;
height: 150px;
background-color: #73AD21;
border-radius: 15px;
padding: 20px;
}
</style>
</head>
<body>
<div class="rounded-box">
This is a box with rounded corners.
</div>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q13. Create a web page to show newspaper layout effects on contents given in
web page (i.e. in multiple columns).

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newspaper Layout</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: flex;
justify-content: space-between;
}
.column {
margin-right: 20px;
}
.article {
background-color: #f9f9f9;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<div class="article">
<h2>Breaking News</h2>
<p>famous rapper badshah talked about his controvery with honey singh on
graphest</p>
</div>
</div>

Name: Danish Ansari Section: E Roll No: 26


<div class="column">
<div class="article">
<h2>Sports</h2>
<p>KKR won the IPL</p>
</div>
</div>
<div class="column">
<div class="article">
<h2>Entertainment</h2>
<p>Esports gamer harmandeep mavi qualified for BGIS semifinals</p>
</div>
</div>
</div>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q14. Create a web page to show transition effect in such a way so that elements
gradually change from one style to another style.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Transition</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 200px;
font-size: 16px;
transition: background-color 0.5s ease, transform 0.5s ease;
}

.box:hover {
background-color: #e74c3c;
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="box">Hover me!</div>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q15. Create a web page to show fixed background image (this image will not
scroll with the rest of the page).

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Background Image</title>
<style>
body {
margin: 0;
padding: 0;
background-image:
url("C:/Users/danis/Desktop/weblabwork/questions/HTML/IMAGES/google.jpg");
background-size: cover;
background-attachment: fixed; /* This ensures the background remains fixed */
font-family: Arial, sans-serif;
}
.content {
padding: 20px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<h1>Welcome to My Web Page</h1>
<p>This is some content that will scroll over the fixed background image.</p>
</div>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q16. Create a web page to position a background image and repeat the image
horizontally or vertically.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Repeat Background Image</title>
<style>
body {
margin: 0;
padding: 0;
background: url('background.jpg') repeat-x top left;
font-family: Arial, sans-serif;
}
.content {
padding: 20px;
text-align: center;
color: olive;
}
</style>
</head>
<body>
<div class="content">
<h1>Welcome to My Website</h1>
<p>This is a simple webpage with a background image repeated horizontally.</p>
</div>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q17. Create a web page to resize the background of web page.

Source Code:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
h2{
text-align: center;
}

#description{
height: 20px;
background-color: aquamarine;
padding: 20px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
a{
cursor: pointer;
}
a:hover{
color: red;
}
a:visited{
color:purple;
}
a:active{
color: blue;
}
#link{
text-align: center;
margin: 20px;
font-size: 1.2rem;
}
#layer_1{
font-size: 40px;
color: blue;
z-index: -1;

Name: Danish Ansari Section: E Roll No: 26


position: absolute;
top: 20%;
}
#layer_2{
font-size: 50px;
color: red;
z-index: 0;
position:absolute ;
top: 24%;
}
img{
width: 30%;
height: 30%;
}
</style>
<body>
<h2>Web Page using CSS</h2>
<div id="description">
Welcome to web page using CSS . using CSS we can make our web page more
attractive.
</div>
<div id="link">

<a href="#">Register</a>
</div>
<div id="layer_1">
<img src="background.jpg"/>
LAYER 1
</div>
<div id="layer_2">
<img src="img2.jpg" alt="" style="width: 28%;">
LAYER 2
</div>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q18. Design a web page using CSS which includes the following:
i. Use different font styles.
ii. Set background image for both the page and single elements on page.
iii. Control the repetition of image with background-repeat property.
iv. Define style for links as a: link, a:active, a:hover, a:visited
v. Add customized cursors for links.
vi. Work with layers.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Web Page</title>
<link rel="stylesheet" href="styles9.css">
</head>
<body>
<div class="container">
<h1>Welcome to My Custom Web Page</h1>
<p>This is a paragraph with a different font style.</p>
<div class="box">
<p>This is a box with a background image.</p>
</div>
<a href="#" class="custom-link">Click me</a>
</div>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q19. Design a web page to validate credit card numbers per the specifications
below. The following tables outline the major credit cards you want to validate
and allow prefixes and lengths:

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Credit Card Validator</title>
</head>
<body>

<h2>Credit Card Validator</h2>

<form id="validatorForm">
<label for="cardNumber">Enter your credit card number:</label>
<input type="text" id="cardNumber" name="cardNumber" maxlength="16">
<button type="button" onclick="validateCreditCard()">Validate</button>
<div id="validationResult"></div>
</form>

<script>
function validateCreditCard() {
var cardNumber = document.getElementById('cardNumber').value.replace(/\s+/g, ''); //
Remove whitespaces
var cardType = null;
var isValid = false;

// Check if the input matches any of the card types and lengths
if (cardNumber.match(/^4[0-9]{12}(?:[0-9]{3})?$/)) {
cardType = "Visa";
isValid = true;
} else if (cardNumber.match(/^5[1-5][0-9]{14}$/)) {

Name: Danish Ansari Section: E Roll No: 26


cardType = "Master Card";
isValid = true;
} else if (cardNumber.match(/^(34|37)[0-9]{13}$/)) {
cardType = "American Express";
isValid = true;
}

// Display validation result


if (isValid) {
document.getElementById('validationResult').innerText = cardType + " - Valid";
document.getElementById('validationResult').style.color = "green";
} else {
document.getElementById('validationResult').innerText = "Invalid credit card
number";
document.getElementById('validationResult').style.color = "red";
}
}
</script>

</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q20. Design a web page to validate the following according to the standard
conditions.
a. Name
b. E-Mail-id and
c. Password

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<style>
body {
font-family: Arial, sans-serif;
}
form {
max-width: 400px;
margin: 0 auto;
}
input[type=text], input[type=email], input[type=password] {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
input[type=submit]:hover {
background-color: #45a049;
}
.error {

Name: Danish Ansari Section: E Roll No: 26


color: red;
}
</style>
</head>
<body>

<h2>Form Validation</h2>

<form id="myForm" onsubmit="return validateForm()">


<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name">

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email">

<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Your password">

<input type="submit" value="Submit">


</form>

<script>
function validateForm() {
var name = document.getElementById('name').value.trim();
var email = document.getElementById('email').value.trim();
var password = document.getElementById('password').value.trim();
var error = false;

// Validate name
if (name === '') {
document.getElementById('name').classList.add('error');
error = true;
} else {
document.getElementById('name').classList.remove('error');
}

// Validate email
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!email.match(emailPattern)) {
document.getElementById('email').classList.add('error');
error = true;
} else {
document.getElementById('email').classList.remove('error');

Name: Danish Ansari Section: E Roll No: 26


}

// Validate password
if (password.length < 8) {
document.getElementById('password').classList.add('error');
error = true;
} else {
document.getElementById('password').classList.remove('error');
}

if (error) {
return false; // Prevent form submission
} else {
return true; // Allow form submission
}
}
</script>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q21. Store some country names and their capitals. Ask the user to select a
country and its capital from two lists. If the match is correct, display “Correct
answer”; otherwise, display an error message and tell the correct answer.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Country-Capital Quiz</title>
</head>
<body>

<h2>Country-Capital Quiz</h2>

<form id="quizForm" onsubmit="return validateAnswer()">


<label for="country">Select a country:</label>
<select id="country" name="country">
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Japan">Japan</option>
</select>

<label for="capital">Select its capital:</label>


<select id="capital" name="capital">
<option value="Washington">Washington</option>
<option value="London">London</option>
<option value="Paris">Paris</option>
<option value="Berlin">Berlin</option>
<option value="Tokyo">Tokyo</option>
</select>

<input type="submit" value="Submit">


</form>

<div id="result"></div>

<script>
function validateAnswer() {
var selectedCountry = document.getElementById('country').value;

Name: Danish Ansari Section: E Roll No: 26


var selectedCapital = document.getElementById('capital').value;
var resultDiv = document.getElementById('result');

// Define country-capital pairs


var countryCapitalMap = {
"USA": "Washington",
"UK": "London",
"France": "Paris",
"Germany": "Berlin",
"Japan": "Tokyo"
};

if (countryCapitalMap[selectedCountry] === selectedCapital) {


resultDiv.innerText = "Correct answer!";
} else {
var correctCapital = countryCapitalMap[selectedCountry];
resultDiv.innerText = "Incorrect answer. The capital of " + selectedCountry + " is " +
correctCapital + ".";
}

return false; // Prevent form submission


}
</script>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q22. Design the simple Calculator.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
.calculator {
width: 250px;
margin: 50px auto;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.calculator input[type="text"] {
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.calculator input[type="button"] {
width: 48%;
padding: 10px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
box-sizing: border-box;
}
.calculator input[type="button"]:hover {
background-color: #f0f0f0;
}
.calculator input[type="button"].equals {
width: 100%;
}
</style>

Name: Danish Ansari Section: E Roll No: 26


</head>
<body>

<div class="calculator">
<input type="text" id="display" readonly>
<input type="button" value="7" onclick="addToDisplay('7')">
<input type="button" value="8" onclick="addToDisplay('8')">
<input type="button" value="9" onclick="addToDisplay('9')">
<input type="button" value="/" onclick="addToDisplay('/')">
<input type="button" value="4" onclick="addToDisplay('4')">
<input type="button" value="5" onclick="addToDisplay('5')">
<input type="button" value="6" onclick="addToDisplay('6')">
<input type="button" value="*" onclick="addToDisplay('*')">
<input type="button" value="1" onclick="addToDisplay('1')">
<input type="button" value="2" onclick="addToDisplay('2')">
<input type="button" value="3" onclick="addToDisplay('3')">
<input type="button" value="-" onclick="addToDisplay('-')">
<input type="button" value="0" onclick="addToDisplay('0')">
<input type="button" value="." onclick="addToDisplay('.')">
<input type="button" value="=" onclick="calculate()">
<input type="button" value="+" onclick="addToDisplay('+')">
<input type="button" value="C" onclick="clearDisplay()">
</div>

<script>
function addToDisplay(value) {
document.getElementById("display").value += value;
}

function calculate() {
var result = eval(document.getElementById("display").value);
document.getElementById("display").value = result;
}

function clearDisplay() {
document.getElementById("display").value = "";
}
</script>

</body>
</html>

Name: Danish Ansari Section: E Roll No: 26


Output:

Name: Danish Ansari Section: E Roll No: 26


Q23. Design a web page that is self-modifying itself after every minute.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Self-Modifying Web Page</title>
</head>
<body>

<h1 id="dynamicContent">Initial Content</h1>

<script>
function updateContent() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();

// Modify content based on time


var content = "Current time: " + hours + ":" + minutes + ":" + seconds;
document.getElementById("dynamicContent").innerText = content;
}

// Initial call to update content


updateContent();

// Update content every minute


setInterval(updateContent, 1000);
</script>

</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q24. Write a code for a web application that accepts the user's birthdate in a
textbox and displays the day of the week in a message box at the click of a button.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day of the Week Calculator</title>
</head>
<body>

<h2>Day of the Week Calculator</h2>

<label for="birthdate">Enter your birthdate:</label>


<input type="date" id="birthdate">

<button onclick="calculateDayOfWeek()">Calculate</button>

<script>
function calculateDayOfWeek() {
var birthdate = document.getElementById('birthdate').value;

if (birthdate) {
var dateObject = new Date(birthdate);
var options = { weekday: 'long' };
var dayOfWeek = new Intl.DateTimeFormat('en-US', options).format(dateObject);

alert("You were born on a " + dayOfWeek + ".");


} else {
alert("Please enter your birthdate.");
}
}
</script>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q25. Write a script that inputs a telephone number as a string in the form
(555)555-555.The script should use the strings method split to extract the area
code as a token and the last four digits of the phone numbers as a token. Display
the area code in one test field and the seven-digit phone number in another text
field.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Telephone Number Splitter</title>
</head>
<body>

<h2>Telephone Number Splitter</h2>

<label for="phoneNumber">Enter phone number:</label>


<input type="text" id="phoneNumber" placeholder="(555)555-555">

<button onclick="splitPhoneNumber()">Split</button>

<label for="areaCode">Area Code:</label>


<input type="text" id="areaCode" readonly>

<label for="phoneNumberDigits">Phone Number (7 digits):</label>


<input type="text" id="phoneNumberDigits" readonly>

<script>
function splitPhoneNumber() {
var phoneNumber = document.getElementById('phoneNumber').value;

// Check if the input matches the format (555)555-5555


var pattern = /^\(\d{3}\)\d{3}-\d{4}$/;
if (pattern.test(phoneNumber)) {
// Split the phone number using regex
var parts = phoneNumber.split(/\D+/);

// Extract area code and last four digits


var areaCode = parts[1];
var phoneNumberDigits = parts[2] + parts[3];

Name: Danish Ansari Section: E Roll No: 26


// Display in text fields
document.getElementById('areaCode').value = areaCode;
document.getElementById('phoneNumberDigits').value = phoneNumberDigits;
} else {
alert("Please enter a valid phone number in the format (555)555-5555.");
}
}
</script>
</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q26. Create a web page that applies the invert filter to an image if the user moves
the mouse over it.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invert Filter on Mouseover</title>
<style>
img {
width: 300px;
transition: filter 0.5s;
}
</style>
</head>
<body>

<h2>Move your mouse over the image</h2>

<img id="image" src="https://via.placeholder.com/300" alt="Sample Image"


onmouseover="applyInvertFilter()" onmouseout="removeInvertFilter()">

<script>
function applyInvertFilter() {
document.getElementById('image').style.filter = 'invert(100%)';
}

function removeInvertFilter() {
document.getElementById('image').style.filter = 'none';
}
</script>

</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q27. Write an HTML Page to scroll the text message from right to left at the
status bar of browser window.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Status Bar Text Scroller</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
</style>
</head>
<body>

<script>
// Function to scroll the text in the status bar
function scrollStatusBar() {
var text = "This is a scrolling message in the status bar. ";
var speed = 50; // Speed of scrolling (in milliseconds)
var pos = 0;

setInterval(function() {
// Append the first character to the end of the text
text = text.substring(1) + text.charAt(0);

// Set the text to the status bar


window.status = text;

// Increment position
pos++;

// Reset position if the text has fully scrolled


if (pos >= text.length) {
pos = 0;
}
}, speed);
}

Name: Danish Ansari Section: E Roll No: 26


// Call the function to start scrolling
scrollStatusBar();
</script>
</body>
</html>

Name: Danish Ansari Section: E Roll No: 26


Q28. Design a web page to perform a survey on four different models of Maruti
(Maruti-K10, Zen-Astelo, Wagnor, Maruti- SX4) owned by people living in four
metro cities(Delhi, Mumbai, Chennai & Kolkatta). Display tabulated report like
format given below:

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maruti Car Survey</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>

<h2>Maruti Car Survey</h2>

<form id="surveyForm">

Name: Danish Ansari Section: E Roll No: 26


<label for="carModel">Select Maruti Car Model:</label>
<select id="carModel" name="carModel">
<option value="Maruti-K10">Maruti K10</option>
<option value="Zen-Astelo">Zen Astelo</option>
<option value="Wagnor">Wagnor</option>
<option value="Maruti-SX4">Maruti SX4</option>
</select><br>

<label for="city">Select Metro City:</label>


<select id="city" name="city">
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Kolkatta">Kolkatta</option>
</select><br>

<button type="button" onclick="submitSurvey()">Submit Survey</button>


</form>

<div id="surveyResults"></div>

<script>
var surveyData = [];

function submitSurvey() {
var carModel = document.getElementById("carModel").value;
var city = document.getElementById("city").value;

surveyData.push({ carModel: carModel, city: city });

updateSurveyResults();
}

function updateSurveyResults() {
var tableContent = "<h3>Survey Results</h3><table><tr><th>Maruti Car
Model</th><th>Metro City</th></tr>";

surveyData.forEach(function(item) {
tableContent += "<tr><td>" + item.carModel + "</td><td>" + item.city +
"</td></tr>";
});

tableContent += "</table>";

Name: Danish Ansari Section: E Roll No: 26


document.getElementById("surveyResults").innerHTML = tableContent;
}
</script>

</body>
</html>

Output:

Name: Danish Ansari Section: E Roll No: 26


Q29. write a program to write and retrieve cookies in php.

Source Code:
<?php
$cookie_name = 'user_preference';
$cookie_value = 'hello i am learning php and i am from graphic era';
setcookie($cookie_name, $cookie_value, time() + 15,"/");
if(!isset($_COOKIE[$cookie_name])) {
echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
echo "Cookie '" . $cookie_name . "' is set!<br>";
echo "Value is: " . $_COOKIE[$cookie_name];
}
?>

Q30. create a webpage to maintain session using PHP.

Name: Danish Ansari Section: E Roll No: 26


Source Code:
<?php
// Start the session
session_start();

// Check if the session variable 'user_id' is set


if (!isset($_SESSION['user_id'])) {
// Set session variables
$_SESSION['user_id'] = 123; // Example user ID
$_SESSION['username'] = 'JohnDoe'; // Example username
echo "Session variables are set.";
} else {
// Retrieve session variables
echo "User ID is " . $_SESSION['user_id'] . "<br>";
echo "Username is " . $_SESSION['username'];
}

// End the session and clear all session variables


// session_destroy();
?>

Q31. Create a functional component that accepts props and displays a


personalized message.

Name: Danish Ansari Section: E Roll No: 26


Source Code:
import React from 'react';

const PersonalizedMessage = (props) => {


return (
<div>
<h1>Hello, {"danish"}!</h1>
<p>{"how are u doing"}</p>
</div>
);
};
export default PersonalizedMessage;

Output:

Q32. Create a class component that maintains a counter and provides buttons to
increment and decrement the counter.

Source Code:

Name: Danish Ansari Section: E Roll No: 26


import React, { Component } from 'react';

class Counter extends Component {


constructor(props) {
super(props);
this.state = {
count: 0
};
}

increment = () => {
this.setState({ count: this.state.count + 1 });
};

decrement = () => {
this.setState({ count: this.state.count - 1 });
};

render() {
return (
<div>
<h1>Counter: {this.state.count}</h1>
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
</div>
);
}
}
export default Counter;

Output:

Q33. Create a component with a form that updates the state based on user input.

Source Code:
import React, { Component } from 'react';

Name: Danish Ansari Section: E Roll No: 26


class UserForm extends Component {
constructor(props) {
super(props);
this.state = {
firstName: '',
lastName: ''
};
}
handleInputChange = (event) => {
const { name, value } = event.target;
this.setState({
[name]: value
});
};

handleSubmit = (event) => {


event.preventDefault();
// You can perform any action with the form data here
console.log('Form submitted:', this.state);
// Clear the form fields after submission
this.setState({
firstName: '',
lastName: ''
});
};

render() {
return (
<div>
<h2>User Form</h2>
<form onSubmit={this.handleSubmit}>
<div>
<label htmlFor="firstName">First Name:</label>
<input
type="text"
id="firstName"
name="firstName"
value={this.state.firstName}
onChange={this.handleInputChange}
/>
</div>
<div>
<label htmlFor="lastName">Last Name:</label>

Name: Danish Ansari Section: E Roll No: 26


<input
type="text"
id="lastName"
name="lastName"
value={this.state.lastName}
onChange={this.handleInputChange}
/>
</div>
<button type="submit">Submit</button>
</form>
</div>
);
}
}
export default UserForm;
Output:

Q34. Create a React application with multiple routes.

Source Code:
//App.js

Name: Danish Ansari Section: E Roll No: 26


import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => {


return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</BrowserRouter>
);
};

export default App;

//home.jsx
import React from 'react';

const Home = () => {


return (
<div>
<h1>Welcome to the Home Page!</h1>
</div>
);
};

export default Home;

//about.jsx
import React from 'react';

const About = () => {


return (
<div>
<h1>About Us</h1>
<p>This is a simple React application with routing.</p>
</div>
);

Name: Danish Ansari Section: E Roll No: 26


};

export default About;

//contact.jsx
import React from 'react';

const Contact = () => {


return (
<div>
<h1>Contact Us</h1>
<p>Get in touch with us!</p>
</div>
);
};

export default Contact;


Output:

Name: Danish Ansari Section: E Roll No: 26

You might also like