Scribd
Upload
2 views

short type wt

The document provides an overview of the World Wide Web (WWW), differentiates between HTML and XHTML, and explains the utility of the Document Object Model (DOM). It also covers Cascading Style Sheets (CSS), including types of style sheets and various CSS selectors. Additionally, a JavaScript program is included to check if a number is prime, demonstrating practical application within an HTML structure.

Uploaded by

abhisekpattanayak07
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
2 views

short type wt

The document provides an overview of the World Wide Web (WWW), differentiates between HTML and XHTML, and explains the utility of the Document Object Model (DOM). It also covers Cascading Style Sheets (CSS), including types of style sheets and various CSS selectors. Additionally, a JavaScript program is included to check if a number is prime, demonstrating practical application within an HTML structure.

Uploaded by

abhisekpattanayak07
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/ 6

Absolutely! Let's tackle each question with detailed explanations and examples.

UNIT-I

(i) What is WWW?

The World Wide Web (WWW) is an information space where documents and other web
resources are identified by URLs (Uniform Resource Locators), interlinked by hypertext links,1
and accessible via the Internet. It's the foundation for how we access and interact with
information online, using browsers to view web pages, images, videos, and more. Essentially,
it's a vast network of interconnected content.

(ii) Differentiate between HTML and XHTML.

Feature HTML XHTML

Syntax Looser, allows for some Stricter, XML-based,


errors. requires proper nesting
and closing of tags.

Tag Closing Optional for some tags Mandatory for all tags
(e.g., <p>). (e.g., <p></p>).

Attribute Quotes Optional for some Mandatory for all attributes


attributes. (e.g., class="example").

Case Sensitivity Case-insensitive (e.g., <p> Case-sensitive (e.g., <p>


and <P> are the same). and <P> are different).

DOCTYPE Less strict, various Requires a specific


versions. DOCTYPE for validation.

Example:

HTML (Less Strict):

HTML
<p>This is a paragraph.<br> ```​
​
**XHTML (Stricter):**​
​
```xhtml​
<p>This is a paragraph.</p>​
<br /> ```​
​
**(iii) How is the DOM model useful?**​
​
The Document Object Model (DOM) is a platform and language-neutral
convention for representing and interacting with objects in HTML,
XHTML, and XML documents. It's crucial because it:​
​
1. **Allows Dynamic Updates:** The DOM represents the structure of a
document as a tree of nodes, which can be manipulated using scripting
languages like JavaScript. This enables dynamic updates to content,
style, and structure without reloading the page.​
​
**Example:** Changing the text of a paragraph using JavaScript:​
​
```javascript​
document.getElementById("myParagraph").innerHTML = "New Text!";​

2.​ Enables Interactivity: The DOM allows scripts to access and modify any element in the
document, making interactive features like form validation, animations, and user interface
changes possible.
3.​ Supports Accessibility: Screen readers and other assistive technologies use the DOM to
interpret web page content for users with disabilities.
4.​ Facilitates Web Development Tools: Browser developer tools use the DOM to inspect
and debug web pages. Search engines also use the DOM to crawl and index web page
content.

UNIT-II

(i) What is Cascading Style Sheet (CSS)? Explain different types of style sheets in CSS.

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a
document written in a markup language2 like HTML. It controls the colors, fonts, layout, and
other visual aspects of a website.

Types of Style Sheets:


1.​ Inline Styles: Styles are applied directly to individual HTML elements using the style
attribute.​
Example:​
HTML​
<p style="color: blue; font-size: 16px;">This is a styled
paragraph.</p>​

○​ Advantages: Good for quick, specific changes.


○​ Disadvantages: Not maintainable for large websites, mixes content with presentation.
2.​ Internal Style Sheets (Embedded): Styles are defined within the <style> tag inside the
<head> section of an HTML document.​
Example:​
HTML​
<head>​
<style>​
p { color: green; }​
</style>​
</head>​

○​ Advantages: Centralized styles for a single document.


○​ Disadvantages: Not ideal for managing styles across multiple pages.
3.​ External Style Sheets: Styles are stored in a separate .css file, which is linked to the
HTML document using the <link> tag.​
Example:​
HTML​
<head>​
<link rel="stylesheet" href="styles.css">​
</head>​
​
styles.css file:​
CSS​
p { color: red; }​

○​ Advantages: Best for maintainability, reusable styles across multiple pages, improves
website performance (caching).
○​ Disadvantages: Requires an extra HTTP request to load the CSS file.

(ii) Explain about different selectors of Cascading Style Sheet (CSS).

CSS selectors are patterns used to select the HTML elements you want to style.
1.​ Element Selectors (Type Selectors): Select elements based on their tag name.​
Example:​
CSS​
p { color: purple; } /* Selects all <p> elements */​

2.​ Class Selectors: Select elements with a specific class attribute.​


Example:​
CSS​
.highlight { background-color: yellow; } /* Selects elements with
class="highlight" */​
3.​ ID Selectors: Select a unique element based on its id attribute.​
Example:​
CSS​
#title { font-size: 2em; } /* Selects the element with id="title"
*/​

4.​ Attribute Selectors: Select elements based on the presence or value of an attribute.​
Examples:​
CSS​
a[href] { color: blue; } /* Selects all <a> elements with an href
attribute */​
input[type="text"] { border: 1px solid gray; } /* Selects text
input fields */​

5.​ Universal Selector: Selects all elements on the page.​


Example:​
CSS​
* { margin: 0; padding: 0; } /* Resets default margins and padding
for all elements */​

6.​ Pseudo-classes: Select elements based on their state (e.g., hover, active).​
Examples:​
CSS​
a:hover { color: red; } /* Styles a link when the mouse hovers over
it */​
button:active { background-color: lightgray; } /* Styles a button
when it's clicked */​

7.​ Pseudo-elements: Style specific parts of an element (e.g., first letter, before/after content).​
Examples:​
CSS​
p::first-letter { font-size: 1.5em; } /* Styles the first letter of
a paragraph */​
::before { content: ""; } /* Insert generated content before an
element */​

8.​ Combinators: Select elements based on their relationship to other elements.


○​ Descendant Selector (Space): Selects child elements of another element.​
CSS​
div p { color: orange; } /* Selects <p> elements inside <div>
elements */​

○​ Child Selector (>): Selects direct children of another element.​


CSS​
ul > li { list-style: none; } /* Selects <li> elements that are
direct children of <ul> */​

○​ Adjacent Sibling Selector (+): Selects the element immediately following another
element.​
CSS​
h2 + p { font-style: italic; } /* Selects the <p> element
immediately after an <h2> */​

○​ General Sibling Selector (~): Selects sibling elements that follow another element.​
CSS​
h2 ~ p { text-decoration: underline; } /* Selects all <p>
elements that are siblings of <h2> */​

(iii) Write a JavaScript program embedded into an HTML page to display whether a given
number is a prime or not.

HTML

<!DOCTYPE html>​
<html>​
<head>​
<title>Prime Number Checker</title>​
</head>​
<body>​
​
<h1>Check if a Number is Prime</h1>​
​
<input type="number" id="numberInput">​
<button onclick="checkPrime()">Check</button>​
​
<p id="result"></p>​
​
<script>​
function checkPrime() {​
let num = document.getElementById("numberInput").value;​
let isPrime = true;​
​
if (num <= 1) {​
isPrime = false;​
} else {​
for (let i = 2; i <= Math.sqrt(num); i++) {​
if (num % i === 0) {​
isPrime = false;​
break;​
}​
}​
}​
​
let resultElement = document.getElementById("result");​
if (isPrime) {​
resultElement.textContent = num + " is a prime number.";​
} else {​
resultElement.textContent = num + " is not a prime number.";​
}​
}​
</script>​
​
</body>​
</html>​

Explanation:
1.​ HTML Structure:
○​ An input field (<input type="number">) allows the
Sources
1.
https://patentimages.storage.googleapis.com/1f/74/0b/3afdeb47a893ce/US20180091627A1.pdf
2. https://www.scribd.com/document/511100540/Hotel-Reservation-System-Final-THESIS

You might also like