Unit-1 Answers

1) Explain the following acronyms.

a) RSS b) SOAP c) DTD

a) RSS: RSS stands for Really Simple Syndication. It is a web feed format used for distributing and gathering content from websites. RSS allows users to
subscribe to website updates and receive them in a standardized format, known as an RSS feed. This enables users to stay updated with the latest content
from multiple websites without having to visit each website individually.

b) SOAP: SOAP stands for Simple Object Access Protocol. It is a protocol used for exchanging structured information in web services. SOAP defines a set of
rules for formatting XML-based messages that can be sent over various transport protocols, such as HTTP, SMTP, or others. It is commonly used in web
services to facilitate communication between different systems or applications.

c) DTD: DTD stands for Document Type Definition. It is a markup language used to define the structure and syntax of an XML document. DTD specifies the
allowable elements, attributes, and their relationships in an XML document. It serves as a blueprint or reference for validating and ensuring the integrity of XML
documents against a predefined set of rules.

2) What is HTTP? What are HTTP requests and responses? Write the syntax for the same.

HTTP stands for Hypertext Transfer Protocol. It is an application-layer protocol used for transmitting hypermedia documents, such as HTML pages, over the
Internet. HTTP follows a client-server model, where a client (usually a web browser) sends requests to a server, and the server responds with the requested
data.

HTTP requests are messages sent by a client to request specific actions or data from a server. The syntax for an HTTP request is as follows:

<HTTP Method> <URL> HTTP/<Version>

<Headers>

<Request Body>

-<HTTP Method>: It specifies the type of action to be performed on the resource. Common methods include GET, POST, PUT, DELETE, etc.
-<URL>: It represents the Uniform Resource Locator that identifies the resource being requested.
- HTTP/<Version>: It indicates the version of the HTTP protocol being used, such as HTTP/1.1 or HTTP/2.
- <Headers>: Optional headers that provide additional information about the request, such as the type of content accepted by the client, authentication
details, etc.
- <Request Body>: It is an optional part of the request used for sending data to the server, typically used with methods like POST or PUT.

HTTP responses are messages sent by the server in response to client requests. The syntax for an HTTP response is as follows:

HTTP/<Version> <Status Code> <Status

Message>
<Headers>

<Response Body>

- HTTP/<Version>: It specifies the version of the HTTP protocol used in the response.
- <Status Code>: It represents a three-digit numerical code that indicates the outcome of the request, such as 200 for a successful response, 404 for a not
found response, etc.
- <Status Message>: A brief textual description of the status code.
- <Headers>: Optional headers that provide additional information about the response, such as the content type, server information, etc.
- <Response Body>: It contains the actual data or content being sent back by the server in response to the request.

3) What do you mean by meta tags? Show their meaning and use examples. Also, show how can following be achieved with the help of Metadata?
a. Stop the page from being listed.
b. Set an expiration date.
c. Stop the browser from caching a page.
d. Give a context for a date so that it can take the format DD- MM-YYYY

Meta tags are snippets of code placed in the head section of an HTML document. They provide additional information about the HTML document, such as its
title, character encoding, keywords, description, and more. Meta tags are used by search engines, browsers, and other web services to understand and
process the content of the webpage.

Here are the meanings and examples of meta tags for achieving specific goals:

a. To stop the page from being listed by search engines, the "robots" meta tag can be used. The following example instructs search engines not to index or
follow the page:

<meta name="robots" content="noindex, nofollow">

b. To set an expiration date for a webpage, the "expires" meta tag can be used. The following example sets the expiration date to a specific date and time:

Unit - 1 Page 1
 <meta http-equiv="expires" content="Wed, 21 May 2023 23:59:59 GMT">

c. To stop the browser from caching a page, the "cache-control" meta tag can be used. The following example disables caching for the page:

<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

d. To give a context for a date so that it can take the format DD-MM-YYYY, the "content-type" meta tag with a specified character encoding can be used. The
following example sets the character encoding to UTF-8, which supports various date formats:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

4) What do you mean by “class” and “id” in CSS? Explain with an Example.

In CSS (Cascading Style Sheets), "class" and "id" are selectors used to target and apply styles to specific HTML elements.

1. Class:
A class selector is denoted by a period (.) followed by the class name. It allows you to apply a particular style to multiple HTML elements that share the same
class attribute. You can assign the same class to multiple elements on a page.

Example:
HTML:
<p class="highlight">This is a paragraph with a class</p>
<p>This is a regular paragraph</p>
<p class="highlight">Another paragraph with a class</p>

CSS:
.highlight {
color: blue;
font-weight: bold;
}
In this example, the CSS class selector `.highlight` is used to apply the specified styles to all paragraphs with the class "highlight". The text color will be blue,
and the font weight will be bold for those paragraphs.

2. ID:
An ID selector is denoted by a hash (#) followed by the ID name. It targets a unique HTML element that has a specific ID attribute. Unlike classes, IDs should
be unique within an HTML document.

Example:
HTML:
<p id="intro">This is the introduction paragraph</p>

CSS:
#intro {
font-size: 18px;
color: red;
}
In this example, the CSS ID selector `#intro` is used to style the paragraph with the ID "intro". The font size will be 18 pixels, and the text color will be red for
that paragraph.

In summary, classes are used to style multiple elements that share the same class attribute, while IDs are used to target and style unique elements with a
specific ID attribute.

5) Write HTML and CSS code for the following:

(i) set the background color for the active link states to "yellow".
(ii) Set the list style for unordered lists to "square".
(iii) Set "paper.gif" as the background image.

Html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

Unit - 1 Page 2
 </nav>
<h1>Welcome to My Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

CSS:
set the background color for the active link states to "yellow".
a:active {
background-color: yellow;
}

Set the list style for unordered lists to "square".

ul {
list-style-type: square;
}

Set "paper.gif" as the background image.

body {
background-image: url("paper.gif");
}

6) Write a JavaScript program that reads number and checks whether that number is prime or not.

function isPrime(number) {
if (number <= 1) {
return false;
}

for (let i = 2; i <= Math.sqrt(number); i++) {

if (number % i === 0) {
return false;
}
}

return true;
}

const num = parseInt(prompt("Enter a number:"));

if (isPrime(num)) {
console.log(num + " is a prime number");
} else {
console.log(num + " is not a prime number");
}

7) What are a browser engine and documentation?

A browser engine, also known as a rendering engine or layout engine, is a software component that interprets and renders web content in a web browser. It is
responsible for parsing HTML, CSS, JavaScript, and other web technologies, and rendering them into the visual representation that users see on their screens.
Browser engines handle tasks such as layout, styling, rendering, and executing scripts to display web pages correctly.
Different web browsers use different browser engines. Some popular browser engines include:

- Blink (used by Google Chrome and Opera)

- WebKit (used by Safari)
- Gecko (used by Firefox)
- Trident (used by older versions of Internet Explorer)

Documentation, in the context of software development, refers to written materials that provide information and guidance on how to use a software or
programming language effectively. In the case of web technologies, documentation includes reference materials, tutorials, guides, and examples that help
developers understand and utilize the features and functionalities of web-related technologies.
Web-related documentation typically covers topics such as HTML, CSS, JavaScript, browser APIs, frameworks, libraries, and more. It provides explanations of
syntax, usage examples, best practices, and often includes code snippets and demonstrations. Documentation serves as a valuable resource for developers to
learn, explore, troubleshoot, and develop web applications and websites.

8) Explain the content model categories diagram, specify five categories that are completely inside the flow category

The content model categories diagram, also known as the content categorization model, is a way to classify HTML elements based on their expected content
and behavior. It helps define the rules and restrictions regarding the nesting and placement of HTML elements within other elements.

Five categories that are completely inside the Flow Content category are:

1. Phrasing Content: Elements that contribute to the text and semantic meaning within the flow of the document.

2. Embedded Content: Elements that embed or reference external content within the flow of the document.

Unit - 1 Page 3
 3. Interactive Content: Elements that provide interactivity and user input within the flow of the document.

4. Heading Content: Elements that represent headings within the flow of the document, helping to structure and organize the content.

5. Text Content: Elements that contain or represent plain text within the flow of the document, such as text nodes, `<text>`, `<abbr>`, `<data>`, etc.

9) What are the typical default display properties for a blockquote element? Explain two characteristics of a block element.

The typical default display properties for a `<blockquote>` element in HTML are as follows:

1. Display: `block`
The `<blockquote>` element is a block-level element by default. It takes up the full width available and starts on a new line. It creates a block-level box that
separates it from surrounding elements.

2. Margin:
The <blockquote> element typically has some default margins applied by browsers. The specific margin values may vary depending on the browser's default
stylesheets. The margins help create space around the blockquote to visually separate it from surrounding content.

Two characteristics of a block-level element, such as <blockquote> are:

a) Line Break:
- Block-level elements start on a new line and create a line break before and after the element. This means that block elements naturally create vertical space
and force subsequent content to appear below them.
b) Width:
- Block-level elements, by default, take up the full available width of their container. They expand horizontally to fill the entire width of the parent container.
This behavior allows block elements to be easily positioned and aligned within their parent containers.

10) What are three characters that are subject to whitespace collapsing? Explain what “presentation” means.

Three characters that are subject to whitespace collapsing in HTML are:

1. Space character (" "): The regular space character used for separating words and creating spaces between elements.

2. Tab character ("\t"): The horizontal tab character used for indentation or aligning content.

3. Line feed character ("\n"): The line feed character used for creating line breaks or separating content into multiple lines.

Whitespace collapsing refers to the behavior in HTML where consecutive whitespace characters are collapsed into a single space, and leading and trailing
whitespace is ignored. This behavior helps prevent unnecessary gaps or spaces from affecting the layout and rendering of the content.

For example, consider the following HTML code snippet:

<p>
This is an example
of
whitespace collapsing.
</p>

In this case, the multiple spaces and tabs between words and within the text are collapsed into a single space. The resulting displayed text would be:

"This is an example of whitespace collapsing."

Presentation, in the context of web development and HTML, refers to the visual and stylistic aspects of a webpage or document. It encompasses how the
content is presented, displayed, and styled to achieve a desired visual appearance and user experience. In HTML, presentationis often controlled through CSS
(Cascading Style Sheets) that define various styles, such as colors, fonts, layout, positioning, and other visual properties. By separating the content (HTML)
from its presentation (CSS), web developers can maintain a clear distinction between the structure and semantics of the content and the visual representation
of that content.

11) What are the permitted contents of the blockquote element, the br element, q element?

The permitted contents of the `<blockquote>` element, `<br>` element, and `<q>` element in HTML are as follows:

1. <blockquote> element:
Flow content, which includes block-level and inline-level elements, is permitted within the <blockquote> element. This typically includes text, headings,
paragraphs, lists, images, etc. The <blockquote> element is commonly used to mark up a section of quoted content.

Example:
<blockquote>
<p>This is a quoted paragraph.</p>
<p>Here is another quoted paragraph.</p>
<ul>
<li>Quoted list item 1</li>
<li>Quoted list item 2</li>
</ul>
</blockquote>

Unit - 1 Page 4
 </blockquote>

2. <br> element:
The <br> element is an empty element, and it does not have any permitted contents. It is used to insert a line break within a block of text.

Example:
<p>This is a paragraph.<br> This is another line in the same
paragraph.</p>

3. <q> element:
Inline-level elements and text are permitted within the `<q>` element. The `<q>` element is used to indicate a short inline quotation.

Example:
<p>According to <q>Albert Einstein</q>, "Imagination is more important than knowledge."</p>

12) Explain the structure of the HTML webpage with an example.

The structure of an HTML webpage follows a specific hierarchical structure known as the Document Object Model (DOM). It consists of a series of nested
elements that define the content and structure of the webpage.

<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
</header>

<main>
<section>
<h2>About Me</h2>
<p>I am a web developer with a passion for creating awesome websites.</p>
</section>

<section>
<h2>Services</h2>
<ul>
<li>Web design</li>
<li>Front-end development</li>
<li>Responsive design</li>
</ul>
</section>
</main>

<footer>
<p>&copy; 2023 My Webpage. All rights reserved.</p>
</footer>
</body>
</html>

• The <html> element serves as the root element of the webpage and contains the entire document.
• The <head> section is used to include metadata and define the webpage's title, which appears in the browser's title bar or tab.
• Within the <body> section, the webpage's actual content is defined.
• The <header> element typically contains the page's heading.
• The main content of the webpage is enclosed within the <main>. It consists of <section> elements that represent different sections of content.
• The <footer> element is used for the webpage's footer section, which often includes copyright information or other relevant detai ls.

13) Define List Tag with an example.

In HTML, there are three main list tags used to create lists: <ul>, <ol>, and<dl>.

1. <ul> (Unordered List) tag:

The <ul> tag is used to create an unordered list, where the order of the items does not matter. Each list item is marked with a bullet point or a similar marker.

Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Output:
- Item 1
- Item 2
- Item 3

Unit - 1 Page 5
 2. <ol> (Ordered List) tag:
The <ol> tag is used to create an ordered list, where the order of the items is important. Each list item is numbered or marked with a custom marker.

Example:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Output:
1. First item
2. Second item
3. Third item

3. <dl> (Definition List) tag:

The <dl> tag is used to create a definition list, where each item consists of a term and its corresponding description. The term is marked with a <dt> (definition
term) tag, and the description is marked with a <dd> (definition description) tag.

Example:
<dl>
<dt>Term 1</dt>
<dd>Description 1</dd>
<dt>Term 2</dt>
<dd>Description 2</dd>
</dl>
Output:
Term 1
- Description 1
Term 2
- Description 2

14) List the types of Style sheets.

There are three main types of stylesheets used in web development:

1. Inline Styles:
Inline styles are applied directly to HTML elements using the `style` attribute. This allows you to define specific styles for individual elements.

Example:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>
Inline styles have the highest specificity and override external and internal stylesheets.

2. Internal Stylesheet:
Internal stylesheets are defined within the `<style>` tags in the `<head>` section of an HTML document. They allow you to apply styles to multiple elements
within the same HTML file.

Example:
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>This is a paragraph with internal styles.</p>
</body>
Internal stylesheets have a higher specificity than external stylesheets but are overridden by inline styles.

3. External Stylesheet:
External stylesheets are created as separate CSS files and linked to the HTML document using the `<link>` tag. This approach allows for centralized styling
and reusability across multiple HTML files.

Example:
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph with external styles.</p>
</body>
The external stylesheet (`styles.css`) contains the CSS rules and selectors to style various elements.

Unit - 1 Page 6
15) Explain Frameset and Frame Tag. Divide the web page into four equal parts each individual part displays a different web page.

Frameset and Frame tags were used in earlier versions of HTML to divide a web page into multiple sections, each displaying a different web page. However,
framesets and frames are deprecated in HTML5, and the use of modern approaches like CSS and HTML5 elements such as <div> and <iframe> is
recommended for achieving similar functionality. Nevertheless, I can provide an explanation of framesets and frames for historical context.

1. Frameset:
The <frameset> tag was used to define the overall structure of a web page divided into frames. It allowed you to specify the layout and arrangement of frames
within the browser window.

Example:
<frameset rows="50%, 50%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>

In the above example, the frameset is divided into two rows, each occupying 50% of the browser window. The src attribute specifies the web pages to be
displayed in each frame.

2. Frame:
The <frame> tag was used within a <frameset> to define individual frames. Each frame was assigned a source URL (specified by the src attribute) to display a
separate web page within that frame.

Example:
<frameset cols="25%, 25%, 25%, 25%">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
<frame src="page4.html">
</frameset>

In this example, the frameset is divided into four columns, each occupying 25% of the browser window. Each frame is assigned a different web page using the
<src> attribute.

16) Explain image tags and heading tags with an example.

1. Image Tags:
The <img> tag is used to display images on a web page. It is a self-closing tag, meaning it does not have a closing tag.
The <src> attribute is used to specify the source (URL or file path) of the image, and the `alt` attribute provides alternative text that is displayed if the image
cannot be loaded or for accessibility purposes.

Example:
<img src="image.jpg" alt="Description of the image">

In the above example, the image with the file name "image.jpg" will be displayed on the web page. If the image cannot be loaded, the text "Description of the
image" will be shown instead.

2. Heading Tags:
Heading tags (<h1> to <h6>) are used to define headings or titles within a webpage. They represent different levels of hierarchy, with <h1> being the highest
(main) heading and <h6> being the lowest (sub) heading.
Headings are important for organizing and structuring the content of a webpage, and they also contribute to the document's semantic structure.

Example:
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Sub-Sub Heading</h3>
In this example, "Main Heading" is the highest level heading, followed by "Sub Heading" as a subheading, and "Sub-Sub Heading" as a further subheading.

17) What is a Form tag? Design a registration page by using all Form controls.

The `<form>` tag is an HTML element used to create a form on a webpage. It acts as a container for various form controls, allowing users to input and submit
data. Here's an example of a registration page using different form controls:

<form action="/register" method="POST">

<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

Unit - 1 Page 7
 <input type="password" id="password" name="password" required>

<label for="confirm-password">Confirm Password:</label>

<input type="password" id="confirm-password" name="confirm-password" required>

<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>

<label for="birthdate">Date of Birth:</label>

<input type="date" id="birthdate" name="birthdate" required>

<label for="terms">
<input type="checkbox" id="terms" name="terms" required>
I agree to the terms and conditions
</label>

<button type="submit">Register</button>
</form>

18) What is an HTML table? Explain table element row span and Column span with necessary attributes.

An HTML table is a structured way of displaying data in rows and columns. It allows you to organize and present tabular data on a web page.

Here's an explanation of two important attributes used in table elements: `rowspan` and `colspan`.

1. Rowspan:
The `rowspan` attribute is used to specify how many rows a table cell should span vertically. It allows a cell to occupy multiple rows.
Example:
<table>
<tr>
<td rowspan="2">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
</table>

In this example, the first cell (`<td>Cell 1</td>`) has a `rowspan` attribute set to "2". This means it spans across two rows, merging the cells in the second row.
It occupies the vertical space of two rows.

2. Colspan:
The `colspan` attribute is used to specify how many columns a table cell should span horizontally. It allows a cell to occupy multiple columns.
Example:
<table>
<tr>
<td>Cell 1</td>
<td colspan="2">Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
In this example, the second cell (`<td>Cell 2</td>`) has a `colspan` attribute set to "2". This means it spans across two columns, merging the cells in the second
row. It occupies the horizontal space of two columns.

19) What is positioning in CSS? Also, explain margin and padding with an example.

Positioning in CSS refers to the technique of specifying the layout and positioning of HTML elements on a web page. It allowsyou to control the exact
placement of elements relative to other elements or the document itself.
There are different types of positioning available in CSS, including:

1. Static Positioning (default): Elements are positioned according to the normal flow of the document. They are not affected by positioning properties like top,
bottom, left, or right.
2. Relative Positioning: Elements are positioned relative to their normal position in the document flow. By using properties like top, bottom, left, or right, you can
shift the element's position from its original location.
3. Absolute Positioning: Elements are positioned relative to their nearest positioned ancestor. Absolute positioning takes elements out of the normal document
flow and allows precise placement.
4. Fixed Positioning: Elements are positioned relative to the browser window and remain fixed even when the page is scrolled. They do not move with scrolling.

Unit - 1 Page 8
4. Fixed Positioning: Elements are positioned relative to the browser window and remain fixed even when the page is scrolled. They do not move with scrolling.

Margin and padding are CSS properties used to control the spacing around elements.

Margin: Margin refers to the space outside an element. It creates space between the element and its neighbouring elements. Negative margins can be used to
bring elements closer together.

Example:
cssCopy code
div {
margin: 10px;
}
In the above example, the div element will have a margin of 10 pixels on all sides, creating space around it.

5. Padding: Padding refers to the space inside an element, between the element's content and its border. It affects the size of the element's content area.

Example:
cssCopy code
p{
padding: 20px;
}
In the above example, the p element will have a padding of 20 pixels on all sides, creating space between the text and the border of the paragraph.

Unit - 1 Page 9
 Unit - II - Answers

1) Explain the key components of the XML with suitable examples.

The key components of XML (Extensible Markup Language) are as follows:

1. Tags/Elements:
- Tags or elements are the building blocks of XML documents. They define the structure and organization of data.
- Example: `<book>` is a tag that represents a book element in an XML document.

2. Attributes:
- Attributes provide additional information about an element. They are defined within the start tag of an element and consist of a name and a value.
- Example: `<book id="123">` where "id" is the attribute name and "123" is the attribute value.

3. Text/Data:
- Text or data represents the actual content within an element.
- Example: `<title>The Catcher in the Rye</title>` where "The Catcher in the Rye" is the text/data within the title element.

4. Comments:
- Comments are used to add explanatory or informative notes within an XML document. They are ignored by XML parsers.
- Example: `<!-- This is a comment -->`.

5. Processing Instructions:
- Processing instructions provide instructions for applications or processors that handle the XML document.
- Example: `<?xml version="1.0" encoding="UTF-8"?>` is a processing instruction that specifies the XML version and encoding.

2) Write and explain rules for well-formed XML document.

Rules for a well-formed XML document are:

1. Every opening tag must have a corresponding closing tag, and they must be properly nested.

Example:
<book><title>The Catcher in the Rye</title></book>

2. Tag and attribute names are case-sensitive and must follow specific naming rules:

Names can contain letters, digits, underscores, hyphens, and periods.

Names must start with a letter or an underscore.
Names cannot start with "xml" (or XML, Xml, etc.), as they are reserved for XML-specific functionality.

3. Attribute values must be enclosed in single or double quotation marks.

Example:
<book id="123">

4. Special characters (<, >, &, ', ") must be represented by their corresponding entities:

< is represented as &lt;

> is represented as &gt;
& is represented as &amp;
' is represented as &apos;
" is represented as &quot;

5. The document must have a single root element that encloses all other elements.

Example:
<library>
<book>...</book>
<book>...</book>
</library>

3) Design Login Page HTML. The page must have fields in the page Username, Password, Remember Me, and a Login button.

<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h2>Login</h2>
<form>
<div>

Unit - 2 Page 10
 <div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<label for="remember">Remember Me:</label>
<input type="checkbox" id="remember" name="remember">
</div>
<button type="submit">Login</button>
</form>
</body>
</html>

4) Design a form using HTML and JavaScript to Calculate age from the date (Date of Birth).

<!DOCTYPE html>
<html>
<head>
<title>Age Calculator</title>
<script>
function calculateAge() {
var dob = document.getElementById("dob").value;
var dobDate = new Date(dob);
var today = new Date();
var age = today.getFullYear() - dobDate.getFullYear();

// Check if the birthday has already occurred this year

if (
today.getMonth() < dobDate.getMonth() ||
(today.getMonth() === dobDate.getMonth() && today.getDate() < dobDate.getDate())
) {
age--;
}

document.getElementById("age").innerHTML = "Your age is: " + age;

}
</script>
</head>
<body>
<h2>Age Calculator</h2>
<form>
<div>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
</div>
<button type="button" onclick="calculateAge()">Calculate</button>
</form>

<div id="age"></div>
</body>
</html>

5) Differentiate between Client-Side Scripting and Server Side Scripting? Explain the procedure for validating the XML Documents

Client-side scripting refers to the execution of scripts on the client-side, typically within the user's web browser.
The scripts are written in languages such as JavaScript, which is supported by most web browsers.

Server-side scripting refers to the execution of scripts on the server-side, typically on the web server hosting the website.
The scripts are written in server-side scripting languages such as PHP, Python, Ruby, or ASP.NET.

Key Differences:

Execution Location: Client-side scripting runs on the user's browser, while server-side scripting runs on the web server.

Language: Client-side scripting primarily uses JavaScript, whereas server-side scripting uses various languages like PHP, Python, etc.

Execution Control: Clients have control over client-side scripting, whereas server-side scripting is controlled by the web server.

Accessibility: Client-side scripts are accessible to users and can be viewed and modified by them, whereas server-side scripts are not directly accessible.

Security: Client-side scripts can expose sensitive logic or data, while server-side scripts can better protect sensitive information.

6) Explain the procedure for validating the XML Documents.

Procedure for validating XML documents:

Unit - 2 Page 11
 Procedure for validating XML documents:

• Choose a validation method: Decide whether to use Document Type Definition (DTD), XML Schema Definition (XSD), or other validation methods.

• Define the schema or DTD: Create or obtain the schema or DTD that defines the structure and constraints for the XML document.

• Link the schema or DTD to the XML document: Add a reference to the schema or DTD in the XML document's prologue or use namespaces to associate
the XML document with the schema.

• Select a validation tool: Use an appropriate XML validation tool or programming language with XML parsing and validation capabilities.

• Perform validation: Use the chosen tool or programming language to parse and validate the XML document against the specified schema or DTD.

• Handle validation results: Handle the validation results based on the outcome. If the XML document is valid, proceed with further processing. If validation
fails, handle the errors or exceptions accordingly.

7) Explain the Architecture of the Browser

The architecture of a web browser consists of several components that work together to provide the functionality and user experience of browsing the web.
Here is a simplified overview of the architecture of a typical web browser:

1. User Interface (UI):

- The user interface is what the user interacts with and includes components like the address bar, toolbar, tabs, and browser windows.
- It provides controls for navigating, managing bookmarks, accessing settings, and interacting with web content.

2. Rendering Engine:
- The rendering engine, also known as the layout engine, is responsible for rendering and displaying web content.
- It parses and interprets HTML, CSS, and JavaScript, and renders them into a visual representation on the screen.

3. Networking:
- The networking component handles communication between the browser and web servers.
- It sends HTTP requests to retrieve web resources such as HTML files, images, stylesheets, and scripts.

4. JavaScript Engine:
- The JavaScript engine executes JavaScript code embedded in web pages.
- It interprets and compiles JavaScript into machine-readable instructions that the browser can understand and execute.

5. Document Object Model (DOM):

- The DOM represents the structure of the web page as a tree-like structure in memory.
- It provides a programming interface for manipulating the elements, attributes, and content of the web page using JavaScript or other scripting languages.

6. Browser Storage:
- The browser storage component handles storing and retrieving data locally on the user's device.
- It includes mechanisms like cookies, local storage, session storage, and IndexedDB to store user preferences, session data, and cached resources.

7. Extensions and Plugins:

- Extensions add additional features, modify behavior, and provide customization options.
- Plugins enable the browser to display multimedia content like videos, audio, and interactive applications.

8) What does HSL stand for? Explain the CSS property-value pair that causes lowercase letters to be displayed with smaller-font uppercase letters?

HSL stands for Hue, Saturation, and Lightness. It is a color model used in computer graphics and CSS to define colors based on these three components.

In CSS, the property-value pair that causes lowercase letters to be displayed with smaller-font uppercase letters is `font-variant: small-caps;`.

The `font-variant` property allows you to control the appearance of the font in various ways. When the value `small-caps` is applied to the `font-variant`
property, lowercase letters are displayed in a smaller version of the uppercase letters. This creates a visual effect known as "small-caps," where the lowercase
letters are rendered with reduced size but retain the uppercase letter shapes. This property-value pair is useful for achieving typographic effects and
emphasizing certain text elements in a web page.

9) What is the universal selector’s syntax and which elements does it match? Why are selectors that use the dot syntax (e.g., .in-your-face) referred to
as “class selectors”?

The syntax for the universal selector in CSS is an asterisk (*) symbol. It matches any element in the HTML document.

The universal selector is written as `*`, and when used in a CSS rule, it applies to all elements on the web page. For example, `* { color: red; }` would set the
text color of all elements to red.

Selectors that use the dot syntax (e.g., `.in-your-face`) are referred to as "class selectors." Class selectors target elements based on the presence of a specific
class attribute value. To use a class selector, a dot (.) is placed before the class name. For example, `.in-your-face { color: yellow; }` would target elements with
the class "in-your-face" and set their text color to yellow.

The term "class" in CSS refers to a way of assigning a specific name or identifier to HTML elements using the `class` attribute. This allows you to group
elements together and apply styles or behaviors to them collectively. The dot syntax is used to select elements with a specific class value, hence the term

Unit - 2 Page 12
 elements together and apply styles or behaviors to them collectively. The dot syntax is used to select elements with a specific class value, hence the term
"class selector." It distinguishes them from other types of selectors such as element selectors (e.g., `p` for paragraphs) or ID selectors (e.g., `#header` for an
element with the ID "header").

10) Find the difference between the get and post method.

GET POST
GET method encodes the data in the URL's query parameters. POST method sends the data in the body of the HTTP request.

GET method has a limitation on the length of the data that can be POST method does not have such limitations.
sent in the URL, typically around 2048 characters.

GET requests can be cached by browsers, proxy servers, and POST requests are not cached by default.
other intermediaries.

GET requests expose the data in the URL, which is visible in the POST requests keep the data hidden from the URL and are more secure
browser's address bar for sensitive information.

GET method is commonly used for retrieving data from a server, POST method is used for sending data to the server, typically for
such as fetching web pages, images, or API data. submitting forms, uploading files, or performing database operations.

Unit - 2 Page 13
 Unit III - Answers

1) Explain JSX? Write a HTML in React first uses JSX and the second does not uses JSX?

JSX (JavaScript XML) is an extension to JavaScript that allows you to write HTML -like syntax within JavaScript code. It is primarily used in the React library for
building user interfaces.

In JSX, you can write HTML-like elements and components directly within JavaScript code. JSX elements resemble HTML elements but are actually JavaScript
objects that represent the desired components to be rendered. JSX makes it easier and more intuitive to describe the structur e and composition of React components.

Here's an example of a simple HTML component written using JSX:

import React from 'react';

function MyComponent() {
return (
<div className="my-component">
<h1>Hello, JSX!</h1>
<p>This is a JSX component.</p>
</div>
);
}

export default MyComponent;

Here's an example where the same component is written without JSX:

import React from 'react';

function MyComponent() {
return React.createElement(
'div',
{ className: 'my-component' },
React.createElement('h1', null, 'Hello, JSX!'),
React.createElement('p', null, 'This is a JSX component.')
);
}

export default MyComponent;

2) What is the difference between the ES6 and ES5 standards?

ES6 (ECMAScript 2015) and ES5 (ECMAScript 5) are different versions of the ECMAScript standard, which is the specification fo r JavaScript. ES6 introduced several
new features and improvements over ES5. Here are some key differences:

1. Syntax: ES6 introduced new syntax features such as arrow functions, template literals, destructuring assignments, and spre ad/rest operators. It also introduced the
`let` and `const` keywords for block-scoped variables.

2. Modules: ES6 introduced native support for modules, allowing you to use `import` and `export` statements to organize and s hare code across files.

3. Classes: ES6 introduced a new syntax for creating classes and working with object -oriented programming concepts. It introduced the `class` keyword and simplified
inheritance using the `extends` keyword.

4. Arrow Functions: ES6 introduced arrow functions, which provide a more concise syntax for writing functions and have a lexi cal `this` binding.

5. Promises: ES6 introduced native support for promises, which provide a cleaner and more structured way to handle asynchrono us operations compared to callback
functions.

3) How do you create a React app?

To create a React app, you can follow these steps:

1. Install Node.js: React requires Node.js to be installed on your machine.

2. Install Create React App: Create React App is a command-line tool that sets up a new React project with a preconfigured build setup. Open your command line
interface and run the following command to install Create React App globally:

npm install -g create-react-app

3. Create a new React app: Once Create React App is installed, you can create a new React app by running the following command:

npx create-react-app my-app

4. Navigate to the app directory: After the creation process is complete, navigate to the app directory by running:

cd my-app

5. Start the development server: To start the development server and run your React app, run the following command:

Unit - 3 Page 14
 5. Start the development server: To start the development server and run your React app, run the following command:

npm start

4) What if the JSON output is identical to the issues array? What are the differences? How do you think this will affect the cli ent?

If the JSON output is identical to the issues array, it means that the server is returning the array as a JSON response witho ut any additional formatting or
manipulation. In this case, there would be no differences between the JSON output and the original issues array.

However, if there are differences between the JSON output and the original issues array, it could indicate that the server ha s performed some modifications or
processing on the data before sending it as a response. These differences could include:

1. Data Transformation: The server might have transformed the data in some way, such as converting data types, aggregating information, or applying filters or
sorting.

2. Data Validation: The server might have performed validation checks on the data to ensure it meets certain criteria or constraints.

3. Data Filtering: The server might have filtered the data based on specific conditions or criteria, returning a subset of the original array.

4. Data Security: The server might have applied security measures to sanitize or protect the data before sending it to the client.

These differences in the JSON output can affect the client in several ways:

1. Data Accuracy: If the server has performed data transformation or validation, the client can expect the JSON output to contain more accura te and reliable data.

2. Data Size: If the server has applied data filtering or aggregation, the JSON output may contain a smaller subset or a modified version of the original array. This can
impact the amount of data that needs to be processed and transferred by the client.

3. Data Structure: If the server has modified the data structure in any way, such as changing the key names or nesting levels, the client need s to handle the JSON
output accordingly to access and process the data correctly.

4. Performance: Depending on the modifications performed by the server, the client's performance may be affected positively or negatively. For example, if the server
has applied data filtering or sorting, the client may receive a more optimized and sorted data set, improving performance. On the other hand, if the server has
performed complex transformations or aggregations, it may introduce additional processing overhead for the client.

5) Apply JavaScript code to know which mouse button was clicked, the number of elements in form, and write hello world on the do cument.

To determine which mouse button was clicked, you can use the event object in JavaScript along with the 'which' or 'button' property.
Here's an example:

<!DOCTYPE html>
<html>
<head>
<title>Mouse Click, Form Elements, and Hello
World</title>
</head>
<body>
<button id="myButton">Click Me!</button>
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="email" name="email">
<input type="submit" value="Submit">
</form>

<script>
// Mouse button click event
document.addEventListener('click', function(event)
{
if (event.which === 1) {
console.log('Left button clicked');
} else if (event.which === 2) {
console.log('Middle button clicked');
} else if (event.which === 3) {
console.log('Right button clicked');
}
});

// Form elements count

var form = document.getElementById('myForm');
var elementCount = form.elements.length;
console.log('Number of elements in the form:',
elementCount);

// Hello World
document.write('Hello, World!');
</script>
</body>
</html>

6) Suppose you change the Content-Type header in the POST to say, text/x-json. What happens? Why? What if you wanted to handle both?

Unit - 3 Page 15
6) Suppose you change the Content-Type header in the POST to say, text/x-json. What happens? Why? What if you wanted to handle both?

If you change the `Content-Type` header in a POST request to say `text/x-json` instead of the typical `application/json`, it may have different effects depending on how
the server is configured to handle such requests.

When the server receives a request with a `Content-Type` of `application/json`, it typically expects the request body to contain valid JSON data. The server may have
parsers or middleware specifically designed to handle JSON data, allowing it to parse and process the JSON accordingly.

However, if you change the `Content-Type` to `text/x-json`, the server may not recognize it as a valid JSON content type. The server may treat it as plain text instead
of JSON and may not have the necessary parsing or processing logic in place to handle the request as JSON data.

To handle both `application/json` and `text/x-json` content types, you would need to configure the server to recognize and parse both types accordingly. This typically
involves setting up appropriate request handlers or middleware to handle different content types separately.

7) How will the output look if you see that the output of curl is piped to json_pp? If you wanted to return pretty -printed JSON always, what would you do?

If the output of `curl` is piped to `json_pp`, it means that the JSON response returned by the server is being passed through the `json_pp` command-line tool, which is
used to pretty-print JSON data.

The `json_pp` tool takes the JSON input and formats it in a more human -readable and indented manner, making it easier to read and understand the structure of the
JSON data.

For example, if you have the following command:

curl http://example.com/api/data | json_pp

The `curl` command retrieves the JSON response from `http://example.com/api/data`, and the response is then piped to `json_pp ` for pretty-printing. The output
displayed in the terminal will be the formatted and indented version of the JSON data.

If you always want to return pretty-printed JSON, you can modify the server-side code responsible for generating the JSON response to include proper indentation.
For example, in Node.js with Express, you can use the `JSON.stringify()` function with the `space` parameter to specify the i ndentation level. By setting the `space`
parameter to a number or string, you can control the indentation of the JSON string.

8) Show the use of JavaScript events for the following

(i) Trap the exiting of the user from a page.
(ii) Show the heading. When the mouse is over the heading the background color should be red and when the mouse goes out of t he heading, the color
should change to blue.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Events</title>
<style>
#heading {
background-color: blue;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h1 id="heading">Hover over me!</h1>

<script>
// Trap exiting of the user from a page
window.addEventListener('beforeunload', function(event) {
event.preventDefault();
event.returnValue = ''; // Some browsers require a return value
});

// Change background color when mouse is over the heading

var heading = document.getElementById('heading');
heading.addEventListener('mouseover', function(event) {
heading.style.backgroundColor = 'red';
});

// Change background color when mouse goes out of the heading

heading.addEventListener('mouseout', function(event) {
heading.style.backgroundColor = 'blue';
});
</script>
</body>
</html>

9) What is the virtual DOM? Why use React instead of other frameworks, like Angular?

The virtual DOM (Document Object Model) is a concept used in web development, particularly in JavaScript frameworks like Reac t. It is a lightweight copy or
representation of the actual DOM that exists in memory. The virtual DOM allows for efficient and optimized updates to the act ual DOM

Unit - 3 Page 16
In a traditional web application, when a change occurs in the UI, the entire DOM is updated, even if only a small portion of it actually needs to change. This can result
in performance issues and unnecessary re-rendering of elements.

React, along with its virtual DOM implementation, addresses this problem by introducing a reconciliation process. When change s are made to the UI, React first
updates the virtual DOM, compares it with the previous version, and then selectively updates only the necessary parts of the actual DOM.

React is often preferred over other frameworks like Angular for several reasons:

1. Flexibility: React is a lightweight library that focuses solely on the view layer. It provides a lot of flexibility and allows developer s to make decisions about other
components of their stack.

2. Component-based architecture: React promotes a modular and reusable component -based architecture, making it easier to build and maintain complex UIs.

3. Virtual DOM: React's virtual DOM implementation allows for efficient and optimized updates to the actual DOM. By selectively updating on ly the necessary parts of
the DOM, React improves performance and rendering efficiency.

4. JavaScript-centric: React is primarily a JavaScript library, which makes it more approachable for developers already familiar with JavaScript.

5. Strong community support: React has a large and active community with a vast number of resources, libraries, and community -driven tools available.

6. Performance: React's virtual DOM and efficient diffing algorithm contribute to its performance benefits.

Unit - 3 Page 17
Unit - 1

1) Explain the following acronym.

a) RSS b) SOAP c) DTD

2) What is HTTP? What are HTTP requests and responses? Write the syntax for the same.

3) What do you mean by meta tags? Show their meaning and use examples. Also, show how can following be achieved with the help of Metadata?
a. Stop the page from being listed.
b. Set an expiration date.
c. Stop the browser from caching a page.
d. Give a context for a date so that it can take the format DD- MM-YYYY

4) What do you mean by “class” and “id” in CSS? Explain with an Example.

5) Write HTML and CSS code for the following:

(i) set the background color for the active link states to "yellow".
(ii) Set the list style for unordered lists to "square".
(iii) Set "paper.gif" as the background image.

6) Write a JavaScript program that reads number and checks whether that number is prime or not.

7) What are a browser engine and documentation?

8) Explain the content model categories diagram, specify five categories that are completely inside the flow category.

9) What are the typical default display properties for a blockquote element? Explain two characteristics of a block element

10) What are three characters that are subject to whitespace collapsing? Explain what “presentation” means.

11) Show an HTML5 comment container that includes this copyright notice. Suppose that your company requires you to include this copyright notice
at the top of every one of your web pages.
INVESTMENT INTELLIGENCE SYSTEMS CORP.
THIS MATERIAL IS COPYRIGHTED AS AN UNPUBLISHED WORK UNDER
SECTIONS 104 AND 408 OF TITLE 17 OF THE UNITED STATES CODE.
UNAUTHORIZED USE, COPYING, OR OTHER REPRODUCTION IS PROHIBITED BY
LAW.
Note that the copyright notice is a comment and, as such, it should not be displayed on your web pages.

12) What are the permitted contents of the blockquote element, the br element, q element?

13) Explain the structure of the HTML webpage with an example.

14) Define List Tag with an example

15) List the types of Style sheets

16) Explain Frameset and Frame Tag. Divide the web page into four equal parts each individual part displays a different web page.

17) Explain image tags and heading tags with an example.

18) What is a Form tag? Design a registration page by using all Form controls

19) What is an HTML table? Explain table element row span and Column
span with necessary attributes.

20) Write HTML code for the following table.

ONE TWO
Three Four
Five Six
Seven Eight

Questions - 1 Page 18
Unit 2

1) Explain the key components of the XML with suitable examples. Write and explain rules for well-formed XML document.

2) Design Login Page HTML. The page must have fields in the page Username, Password, Remember Me, and a Login button.

3) Design a form using HTML and JavaScript to Calculate age from the date (Date of Birth).

4) Explain the key components of XML with suitable examples.

5) Design the XML file in HTML by CSS and XSLT and write a well-formed XML file to store student information.

6) What is CSS? Explain the types of CSS.

7) Differentiate between Client-Side Scripting and Server Side Scripting? Explain the procedure for validating the XML Documents

8) Explain the Architecture of the Browser

9) Demonstrate the web page and name the file newspaper.html.

The window background must be rendered using the color cyan. The top heading must be rendered using the color blue. For the sake of
getting practice with different color value formats, you must use different techniques to specify each of the three-color messages:
silver—use an HSL value.
fuchsia—use a hexadecimal RGB value.
bright orange—use an integer RGB value

10) Explain the key components of XML with suitable examples.

11) What does HSL stand for? Explain the CSS property-value pair that causes lowercase letters to be displayed with
smaller-font uppercase letters?

12) What is the universal selector’s syntax and which elements does it match? Why are selectors that use the dot syntax (e.g., .in-your-face)
referred to as “class selectors”?

13) What is HTTP? What are HTTP requests and responses?

14) Find the difference between the get and post method.

15) What is positioning in CSS? Also, explain margin and padding with an example.

Questions -2 Page 19
Unit 3

1) Design a Email Address Generator web page and what happens after the user enters first and last names and what happens after the user
clicks the Generate Email button.

2) Explain JSX? Write a HTML in React first uses JSX and the second does not uses JSX?

3) What is the difference between the ES6 and ES5 standards? How do you create a React app?

4) What if the JSON output is identical to the issues array? What are the differences? How do you think this will affect the client?

5) Apply JavaScript code to know which mouse button was clicked, the number of elements in form, and write hello world on the document
Suppose you change the Content-Type header in the POST to say, text/x-json. What happens? Why? What if you wanted to handle both?

6) How will the output look if you see that the output of curl is piped to json_pp? If you wanted to return pretty-printed JSON always, what
would you do?

7) What if the JSON output is identical to the issues array? What are the differences? How do you think this will affect the client?

8) Apply JavaScript code to know which mouse button was clicked, the number of elements in form, and write hello world on the document.

9) Show the use of JavaScript events for the following

(i) Trap the exiting of the user from a page.
(ii) Show the heading. When the mouse is over the heading the background color should be red and when the mouse goes out of the heading,
the color should change to blue

10) What is the virtual DOM? Why use React instead of other frameworks, like Angular?

11) What is the difference between the ES6 and ES5 standards?

12) How do you create a React app?

Questions - 3 Page 20