FULL STACK WEB LAB (PCS 693)
PRACTICAL 5
OBJECTIVE : Write an HTML Code for Following Snapshot :
SOURCE CODE :
<html>
<head>
<title>PRACTICAL 5</title>
</head>
<body>
<form>
<table cellpadding="8" cellspacing="6">
<tr>
<td>Firstname:</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>Lastname:</td>
<td><input type="text" name="lastname"></td>
</tr>
<tr>
<td>Course:</td>
<td><select name="course">
<option>Course</option>
<option>B.Tech</option>
<option>MCA</option>
<option>MBA</option>
</select>
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
Akhil Nautiyal E1 9
FULL STACK WEB LAB (PCS 693)
</td>
</tr>
<tr>
<td>Hobbies:</td>
<td>
<input type="checkbox" name="hobby" value="programming"> Programming<br>
<input type="checkbox" name="hobby" value="cricket"> Cricket<br>
<input type="checkbox" name="hobby" value="football"> Football<br>
<input type="checkbox" name="hobby" value="reading"> Reading Novel
</td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea name="address" rows="4" cols="30"></textarea></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Akhil Nautiyal E1 9
FULL STACK WEB LAB (PCS 693)
OUTPUT :
Akhil Nautiyal E1 9
FULL STACK WEB LAB (PCS 693)
PRACTICAL 6
OBJECTIVE : Create a webpage to manage details like name, class, qualifications, address etc., using tables
and other suitable HTML tags. Apply the following style information:
Maintain heading of the page with 30 px size.Align all the field names like Name, Class, Photo etc to centre in
the table.Apply light blue as background colour for the left side cells in the table which contains field names
like Name, Class etc...Also display your college logo as background image in the top right position of the web
page.
SOURCE CODE (HTML) :
<html>
<head>
<title>PRACTICAL 6</title>
<link rel="stylesheet" href="q6.css">
</head>
<body>
<h1>Student Registration Form</h1>
<form>
<table>
<tr>
<td class="label">Name:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td class="label">Class:</td>
<td>
<select name="class">
<option>I</option>
<option>II</option>
<option>III</option>
<option>IV</option>
</select> Year
</td>
</tr>
<tr>
<td class="label">Qualification:</td>
<td>
<select name="qualification">
<option>B.Tech</option>
<option>M.Tech</option>
<option>MBA</option>
<option>BBA</option>
Akhil Nautiyal E1 9
FULL STACK WEB LAB (PCS 693)
</select>
</td>
</tr>
<tr>
<td class="label">Email ID:</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td class="label">Address:</td>
<td><textarea name="address" rows="4" cols="19"></textarea></td>
</tr>
<tr>
<td class="label">Upload Photo:</td>
<td><input type="file" name="photo"></td>
</tr>
<tr>
<td class="label"></td>
<td colspan="2" class="buttons">
<input type="submit" value="Register">
<input type="reset" value="Clear">
</td>
</tr>
</table>
</form>
</body>
</html>
SOURCE CODE (CSS) :
body {
background-image: url('gehulogo.jpeg');
background-repeat: no-repeat;
background-position: top right;
padding-top: 150px;
image-orientation: inherit;
}
h1 {
font-size: 30px;
text-align: center;
}
table {
margin: auto;
width: 50%;
}
.label {
background-color: lightblue;
text-align: center;
font-weight: bold;
}
Akhil Nautiyal E1 9
FULL STACK WEB LAB (PCS 693)
OUTPUT :
Akhil Nautiyal E1 9
FULL STACK WEB LAB (PCS 693)
PRACTICAL 7
OBJECTIVE : 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.
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.
Create a web page to show fixed background image (this image will not scroll
with the rest of the page).
SOURCE CODE (HTML) :
<html>
<head>
<title>PRACTICAL 7</title>
<link rel="stylesheet" href="q7.css">
</head>
<body>
<h2>Styled Web Page</h2>
<div class="content">
<p>This is a content section with a background image.</p>
</div>
<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.wikipedia.org">Wikipedia</a></li>
<li><a href="https://www.github.com">GitHub</a></li>
</ul>
<div class="layer">
<p>This is a layered div positioned separately.</p>
</div>
<hr>
<p id="name">Akhil Nautiyal | E1 | 9</p>
</body>
</html>
Akhil Nautiyal E1 9
FULL STACK WEB LAB (PCS 693)
SOURCE CODE (CSS) :
body {
background-image: url('sk.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content {
background-image: url('tree.png');
background-size: cover;
background-repeat: no-repeat;
padding: 30px;
width: 80%;
max-width: 500px;
border-radius: 10px;
font-size: 24px;
color: white;
text-align: center;
margin-bottom: 20px;
}
ul {
list-style-type: none;
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
li {
margin: 10px 0;
}
a{
text-decoration: none;
font-weight: bold;
font-size: 24px;
padding: 10px;
display: inline-block;
}
a:link {
color:red;
}
a:visited {
color: green;
}
a:hover {
color:orange;
cursor: crosshair;
}
Akhil Nautiyal E1 9
FULL STACK WEB LAB (PCS 693)
a:active {
color: blue;
}
.layer {
width: 80%;
max-width: 400px;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
font-size: 22px;
text-align: center;
margin-top: 20px;
}
#name {
color: white;
font-size: 15px;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 10px;
}
OUTPUT :
Akhil Nautiyal E1 9
