WEB DEVELOPMENT
-Practical Question
Q1. Write a code to display another webpage within the another webpage.
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML iframe Tag</title>
</head>
<body style="text-align: center">
<h2>HTML iframe Tag</h2>
<iframe src="https://media.geeksforgeeks.org/wp-content/uploads/20240206111438/uni2.html"
height="370" width="400">
</iframe>
</body>
</html>
Q2. Write a code to display a list on the webpage.
Code:
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks Learning</h2>
<h5>List of available courses</h5>
<ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
<li>Programming Languages</li>
</ul>
<h5>Data Structures topics</h5>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
</body>
</html>
Q3. Write a code to display Heading and paragraph on the webpage.
Code: <!DOCTYPE html>
<html>
<body>
//Heading Tag
<h1>This is heading h1</h1>
<h2>This is heading h2</h2>
<h3>This is heading h3</h3>
<h4>This is heading h4</h4>
<h5>This is heading h5</h5>
<h6>This is heading h6</h6>
// Paragraph Tag
<p> One can determine the importance of college education by
the role it plays in one’s life. But before that, it’s really important
that students must know the college very well.</p>
</body>
</html>>
Q3. Write a code to display the personal user information and use the submit button on the
webpage.
Code: <!DOCTYPE html>
<html
<head>
<title>Html Forms</title>
</head>
<body>
//Heading tag
<h2>HTML Forms</h2>
<form>
//username
<label for="username">Username:</label>
<br>
<input type="text" id="username" name="username">
<br>
<br>
//password
<label for="password">Password:</label>
<br>
<input type="password" id="password"
name="password">
<br>
<br>
//submit button
<input type="submit" value="Submit">
</form>
</body>
</html>
Q4. Write a code to display the table on the webpage.
Code: <!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
</table>
</body>
</html>
Q5. Write a code to display the <marquee>tag on the webpage.
Code: <!DOCTYPE html>
<html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee>
Shri Mahaveer College
</marquee>
</div>
</body>
</html>
Q6. Write a code to display the css font properties.
Code: <!DOCTYPE html>
<html>
<head>
<title>CSS Font</title>
<style>
.gfg {
font-family: "Arial, Helvetica, sans-serif";
font-size: 60px;
color: #090;
text-align: center;
}
.smc {
font-family: "Comic Sans MS", cursive, sans-serif;
font-variant:small-caps;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">Shri Mahaveer College</div>
<div class="smc">
Grow your career with
</div>
</body>
</html>
Q7. Write a code to display the CSS align using the margin: auto property.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Center Align Elements</h2>
<div class="center">
This is div element on which
margin auto is used to horizontally
align it into center
</div>
</body>
</html>
Q8. Write a code to change the style type of the list.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: square;
}
ol.c {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>
Shri Mahaveer College
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="b">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<p> Ordered Lists </p>
<ol class="c">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<ol class="d">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</body>
</html>
Q9. Design a different webpage by using following CSS :
a). Set the backgroung color of a page.
Code:
H1{
Color:white;
Background-color: blue;
}
b). Align the text:
Code:
H1{
Background-color : blue;
Text-align : Center;
}
c). Set the font color.
Code:
H1{
Color : white;
Border-style: dashed;
}
c). Set the outline of the text.
Code:
.h2{
Outline : 2px dashed blue;
Color : green;
}
Q10. . Write a code to display the closure in javascript.
Code:
function createCounter() {
let count = 0;
return function increment(){
count++;
console.log(count);
};
}
const counter = createCounter();
counter(); // Output: 1
counter();// Output: 2
Q11. Write a code to check if the “name” property exists(true) and if the “address” property does
not exist(false).
Code:
const Data = {
name: "Rahul",
age: 21,
city: "Noida"
};
// true ("name" property exists in the object)
console.log("name" in Data);
// false ("gender" property doesn't exist in
the object)
console.log("address" in Data);
Output:
true
false
Q12. Write a code to display the if-statement in javascript.
Code:
// JavaScript program to illustrate If
statement
let i = 10;
if (i > 15) console.log("10 is less than 15");
// This statement will be executed
// as if considers one statement by default
console.log("I am Not in if");
Output:
I am Not in if
Q13. Write a code to display the working of function in javascript.
Code:
function greetUser(username) {
console.log(`Hello ${username}, welcome to
Shri Mahaveer College`);
}
greetUser('Admin');
Output:
Hello Admin, welcome to Shri Mahaveer College
Q14. Write a code to creates a WeakMap looseMap, sets objects as keys with names, assigns
values, and checks if it has a specific key. Outputs the map and checks for presence of Ram.
Code:
function myGeeks() {
let looseMap = new WeakMap();
let Ram = {name};
let Raj = {name};
let Rahul = {name};
looseMap.set(Ram, "Ram");
looseMap.set(Raj, "Raj");
looseMap.set(Rahul, "Rahul");
console.log(looseMap);
console.log(looseMap.has(Ram))
}
myGeeks();
Output:
WeakMap {{…} => 'Raj', {…} => 'Rahul', {…} => 'Ram'}
true
Q15. Write a code to prints infinite series of natural numbers using a simple generator.
Code:
// Generate Function generates an
// infinite series of Natural Numbers
function* nextNatural() {
let naturalNumber = 1;
// Infinite Generation
while (true) {
yield naturalNumber++;
// Calling the Generate Function
let gen = nextNatural();
// Loop to print the first
// 10 Generated number
for (let i = 0; i < 10; i++) {
// Generating Next Number
console.log(gen.next().value);
Output: 1
2
3
4
5
6
7
8
9
10
