Scribd
Upload
28 views8 pages

WEB DEVELOPMENT File

The document contains a series of practical web development questions and their corresponding HTML, CSS, and JavaScript code examples. Each question demonstrates different functionalities such as displaying iframes, lists, tables, forms, and using JavaScript features like closures and generators. The examples are structured to provide clear coding practices for various web development tasks.

Uploaded by

Riya
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
28 views8 pages

WEB DEVELOPMENT File

The document contains a series of practical web development questions and their corresponding HTML, CSS, and JavaScript code examples. Each question demonstrates different functionalities such as displaying iframes, lists, tables, forms, and using JavaScript features like closures and generators. The examples are structured to provide clear coding practices for various web development tasks.

Uploaded by

Riya
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/ 8

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

You might also like