Group “A”
Brief Answer Questions
1. What do you understand by universal sector?
Ans: Universal sector refers to a concept or framework that aims to create a seamless and consistent user experience across different devices and platforms.
2.What is dynamic web page?
Ans: A dynamic web page is a type of web page that displays different content each time it is viewed. This content can change based on user interactions, data input, or other variables.
3.What is the use of <iframe> tag in HTML?
Ans: The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.
4.What do you mean by HTML events?
Ans: HTML events are actions or occurrences that happen in the browser when a user interacts with a web page. These events can be set off by various actions such as :
- clicking a button.
- hovering over an element
- submitting a form, or resizing the window.
5.Why is the use of CSS?
Ans: CSS, which stands for Cascading Style Sheets, is used in web development to style and format the visual presentation of a webpage. It allows developers to control the layout, colors, fonts, and other design elements of a website etc.
6.Define responsive web design?
Ans: Responsive web design is an approach to web development that aims to create websites that provide an optimal viewing experience across a wide range of devices, from desktop computers to mobile phones.
7.What are the types of lists available in HTML?
Ans: There are three main types of lists available in HTML. They are:
- Ordered lists
- Unordered lists
- Definition lists
8.Define the float property of CSS?
Ans: The float property in CSS specify how an element should be positioned within its parent container. When an element is floated, it is moved to the left or right side of its container, allowing other elements to flow around it.
9.What is Internet?
Ans: The Internet is a global network of interconnected computers and devices that communicate with each other using standardized protocols also allows users to access and share information, resources, and services across the world.
10.What is DNS?
Ans: DNS stands for Domain Name System which is a hierarchical decentralized naming system for computers, services, or any resource connected to the Internet or a private network.
Group “B”
Short Answer Question:
11.Design an HTML form to provide user input for Name , Address , and Gender . The form should also contain submit button for submitting the form data.
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Input Form</title>
</head>
<body>
<h2>User Input Form</h2>
<form action="#" method="post" id="userForm">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="address">Address:</label><br>
<textarea id="address" name="address" rows="4" cols="50" required></textarea><br><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label><br><br>
<input type="submit" value="Submit">
</form>
<div id="output"></div>
<script>
document.getElementById('userForm').addEventListener('submit', function(event) {
event.preventDefault(); // prevent form submission
// Get form data
const formData = new FormData(event.target);
// Display output
const outputDiv = document.getElementById('output');
outputDiv.innerHTML = ''; // Clear previous output
for (const [name, value] of formData.entries()) {
const p = document.createElement('p');
p.textContent = `${name}: ${value}`;
outputDiv.appendChild(p);
}
});
</script>
</body>
</html>
12.What is CSS box model? Create a box model that wraps around <div> tag with margins , borders, padding, and actual content.
Ans: The CSS box model is a fundamental concept in web design that defines the structure and layout of elements on a webpage. It consists of four main components: content, padding, border, and margin. The content area is where the actual content, such as text or images, is displayed.
Here’s a breakdown of each component:
‣Content:
This is the actual content of the HTML element, such as text, images, or other nested elements.
‣Padding:
Padding is the space between the content and the border. It helps to create space around the content, separating it from the border.
‣Border:
The border is a line that surrounds the padding and content of the element. It can be styled using CSS properties like color, width, and style.
‣Margin:
Margins are the space outside the border of the element. They create space between the element and other elements on the page.
Now, creating a basic example of a box model wrapped around a <div> tag with margins, borders, padding, and actual content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Box Model Example</title>
<style>
/* Styling for the box model */
.box {
width: 200px; /* Width of the box */
height: 100px; /* Height of the box */
padding: 20px; /* Padding around the content */
border: 2px solid black; /* Border around the padding */
margin: 30px; /* Margin outside the border */
background-color: lightgray; /* Background color */
}
</style>
</head>
<body>
<!-- The div element representing the box -->
<div class="box">
<!-- Content inside the box -->
This is the content inside the box.
</div>
</body>
</html>
Comprehensive Questions:
13. Explain different way of inserting CSS in an HTML document . What is pseudo-class selector?
Ans: There are several ways to insert CSS (Cascading Style Sheets) into an HTML document. Here are some common methods:
Inline CSS: You can apply styles directly to individual HTML elements using the style attribute. For example:
<p style="color: red; font-size: 16px;">This is a paragraph.</p>
Internal CSS: You can embed CSS within the <style> tag in the head section of the HTML document. This style will apply to all elements within the document. For example:
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
External CSS: You can create a separate CSS file and link it to your HTML document using the <link> tag in the head section. This method allows you to apply the same styles to multiple HTML documents. For example:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
Import CSS: Similar to external CSS, you can import CSS files using the @import rule within a <style> tag in the head section. For example:
<head>
<style>
@import url("styles.css");
</style>
</head>
a pseudo-class selector in CSS is used to define a special state of an element. Pseudo-classes are preceded by a colon (:) and they allow you to style an element based on its state or position, such as when it’s being hovered over, when it’s the first child of its parent, when it’s checked (for form elements), etc.
Some common pseudo-class selectors include:
:hover: Styles an element when it’s being hovered over by the mouse.:active: Styles an element when it’s being activated (usually when clicked).:focus: Styles an element when it has focus (e.g., when selected by tabbing through a form).:first-child: Styles the first child of a parent element.:last-child: Styles the last child of a parent element.:nth-child(): Styles elements based on their position within a parent (e.g.,:nth-child(odd)selects odd-numbered elements).
For example:
/* Change color of links when hovered over */
a:hover {
color: red;
}
/* Style the first paragraph in a div */
div p:first-child {
font-weight: bold;
}
