Q1: Explain the structure of an HTML webpage with an example. Q2: Discuss CSS layers in detail.
ayers in detail. Q4: Explain CSS with an example.
A1: The structure of an HTML webpage consists of several key A2: CSS (Cascading Style Sheets) has three layers: A4: CSS (Cascading Style Sheets) is a styling language used to
elements: 1. Presentation: This is the top layer that users interact describe the presentation of a document written in HTML or XML. It
1. <!DOCTYPE html>: This declares the document type with. It defines the layout, colors, fonts, and overall defines how elements are displayed on a webpage.
and version of HTML being used. look of a website. Example:
2. <html>: The root element of the HTML page. 2. User Interface: This layer deals with user
3. <head>: Contains meta-information about the HTML interactions and includes styles for things like <!DOCTYPE html>
document, such as its title, character set, links to CSS, buttons, forms, and other interactive elements. <html>
etc. 3. Structure: This layer defines how the content is <head>
4. <title>: Sets the title of the webpage, displayed on organized, such as the placement of columns, <title>CSS Example</title>
the browser tab. headers, footers, etc. <style>
Each layer builds upon the previous one, with the structure body {
5. <body>: Contains the content of the webpage that
providing the foundation, user interface adding interactive font-family: Arial, sans-serif;
will be displayed to users.
elements, and presentation layer making it visually appealing. background-color: #f2f2f2;
Q5: What 6. is the<h1>, <p>,
need for <div>, <img>,
a description <a>: Example
language in web of various
}
technology? HTML tags used to structure content, such as
h1 {
A5: A descriptionheadings,
language, like CSS (Cascading
paragraphs, divisions, Style Sheets),
images, is
and links. Q3: Define frameset, frame tag, and divide the webpage into 4 color: blue;
essential inhtml>
<!DOCTYPE web technology for the following reasons: equal parts displaying different webpages. }
•
<html> A3:
Separation of Concerns: It separates the content p{
<head>
(HTML) from the presentation (CSS), making it easier
<title>My Webpage</title> • Frameset: A frameset is an HTML element used to
font-size: 16px;
line-height: 1.5;
</head> to maintain and update a website. create frames within a webpage. It defines how the
}
<body>
•
<h1>Welcome toConsistency: CSS ensures consistent styling across
frames are arranged on the page.
</style>
•
My Webpage</h1>
multiple pages of a website. Frame Tag: The <frame> tag is used inside a </head>
<p>This is a paragraph of text.</p>
<body>
•
<img src="[Link]" alt="An image">
Efficiency: It allows for the efficient styling of
<a href="[Link] here</a> to visit Example.
frameset to define individual frames within it. Each
<frame> tag loads a separate HTML file or webpage <h1>This is a Heading</h1>
multiple elements at once, reducing redundancy. <p>This is a paragraph with some text. CSS styles are applied to
</body> into that frame.
</html> • Responsive Design: CSS enables the creation of Example to divide a webpage into 4 equal parts displaying change font, color, and background.</p>
</body>
responsive designs that adapt to different screen different webpages:
<!DOCTYPE html> </html>
sizes and devices.
<html>
<head> Q7: What is Bootstrap?
Q6: Write a WAP to demonstrate a responsive CSS framework. <title>Webpage with Frames</title>
A6: A responsive CSS framework helps in creating websites that adapt A7: Bootstrap is a popular open-source front-end CSS framework
</head> developed by Twitter. It provides ready-to-use design templates for
to various screen sizes. Here's an example using Bootstrap as the <frameset cols="50%,50%">
framework: typography, forms, buttons, navigation, and other interface
<frameset rows="50%,50%"> components. Bootstrap is designed to be responsive, making it easy
<frame src="[Link]"> to create websites and web applications that work on various
<!DOCTYPE html> <frame src="[Link]">
<html> devices and screen sizes.
</frameset>
<head> <frameset rows="50%,50%">
<title>Responsive Framework Demo</title> <frame src="[Link]"> Q8: Explain different properties and values used in CSS.
<!-- Link to Bootstrap CSS --> <frame src="[Link]"> A8:
<link rel="stylesheet"
href="[Link]
</frameset>
</frameset>
• Color: Used to set text color or background color
[Link]"> (e.g., color: blue, background-color: #f2f2f2).
</html>
<style>
.custom-div {
• Font: Controls the text properties such as font
background-color: #f2f2f2; Q9: Explain different types of style sheets. family, size, weight, and style (e.g., font-family:
padding: 20px; A9: Arial, sans-serif, font-size: 16px).
}
</style>
There are three main types of style sheets used in web development:
1. **Inline Styles**: These are applied directly to individual HTML • Margin and Padding: Defines space around an
elements using the `style` attribute. Inline styles override any styles element (e.g., margin: 10px, padding: 20px).
</head>
<body> declared in external or internal style sheets and affect only the specific
element they are applied to:
• Border: Sets the border properties (e.g., border:
<div class="container"> 1px solid black).
<div class="row"> Example:
<div class="col-sm-6 custom-div"> ```html • Width and Height: Determines the width and
Column 1 <p style="color: red; font-size: 18px;">This is a paragraph with inline height of an element (e.g., width: 300px, height:
styles.</p>
</div> 200px).
2. **Internal Styles (Embedded Styles)**: These are defined within the
<div class="col-sm-6 custom-div">
Column 2
HTML document using the `<style>` element in the `<head>` section. • Positioning: Controls the position of an element
Internal styles apply to the entire document unless overridden by more on the page (e.g., position: relative, top:
</div>
</div>
specific styles (e.g., inline styles or external style sheets). 20px).
Example:
<div class="row">
```html
<div class="col-sm-6 custom-div"> Q10 Define your own style sheet with example
<!DOCTYPE html>
Column 3
<html>
</div> A style sheet, often referred to as CSS (Cascading Style Sheets), is a
<head>
<div class="col-sm-6 custom-div"> document used to describe the presentation of a document written in
<title>Internal Styles</title>
Column 4 HTML or XML. It defines how elements should be displayed on a
<style>
</div> webpage, including aspects like layout, colors, fonts, and spacing.
p{
</div> Here's a brief example of a simple CSS style sheet:
color: blue;
</div>
font-size: 16px;
</body> ```css
}
</html> /* Define styles for paragraphs */
</style>
</head> p{
<body> font-family: Arial, sans-serif;
<p>This is a paragraph with internal styles.</p> font-size: 16px;
</body> color: #333333;
</html> line-height: 1.5;
3. **External Styles**: These are defined in separate CSS files and linked to }
HTML documents using the `<link>` element in the `<head>` section.
External style sheets promote code reusability, maintainability, and /* Define styles for headings */
separation of concerns by allowing styles to be shared across multiple h1 {
HTML documents. font-family: Georgia, serif;
Example ([Link]): font-size: 24px;
```css color: #006699;
/* [Link] */ }
p{
color: green; /* Define styles for links */
font-size: 14px; a{
} color: #0099cc;
Example (HTML file): text-decoration: none;
```html }
<!DOCTYPE html>
<html> a:hover {
<head> text-decoration: underline;
<title>External Styles</title> }
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<p>This is a paragraph with external styles.</p>
</body>
</html>