Web programming I Model Question Solution

Model Question

BIM 3rd Semester /IT237:Web Technology I

Group-‘A’

Brief Answer Question.

1. what is DNS?

Ans:DNS stands for Domain Name System. It is a hierarchical and distributed naming system that translates user-friendly domain names into IP addresses, allowing computers to locate and connect to each other over a network.

2.what is dynamic web page?

Ans: A dynamic web page is a type of web page that can change its content and appearance in response to user interaction, data input, or other external factors.

3. What is the use of <iframe> tag in HTML?

Ans:The <iframe> tag in HTML stands for “inline frame” and is used to embed another HTML document within the current HTML document. It allows you to display content from another source, such as a web page, a video, a map, or any other HTML content, within your own webpage.

4. What do you mean by HTML events?

Ans: HTML events are actions or occurrences that happen in the browser which can trigger JavaScript code execution, such as a user clicking a button, moving the mouse, pressing a key, or the page finishing loading.

5. Why is the use of CSS?

Ans: CSS (Cascading Style Sheets) is a fundamental technology used in web development to control the visual presentation of HTML documents. It allows developers to define styles such as colors, fonts, spacing, and layout, which can be applied consistently across multiple web pages. By separating the presentation from the content, CSS enhances the maintainability and flexibility of websites, enabling easier updates and modifications.

6. Define responsive web design.

Ans: Responsive web design is an approach to web development that aims to create web pages that provide an optimal viewing experience across a wide range of devices and screen sizes, from desktop computers to smartphones and tablets.

7. Define cookies.

Ans: Cookies are small pieces of data that websites store on a user’s device (such as a computer or smartphone) to track information about their browsing activities and preferences. Cookies can contain various types of information, including login credentials, browsing history, user preferences, and shopping cart contents.

8. Why do we need AJAX?

Ans: AJAX (Asynchronous JavaScript and XML) is a technology used in web development to send and receive data from a web server asynchronously without interfering with the current state of the page

9. what is jQuery?

Ans: jQuery is a popular JavaScript library designed to simplify the process of client-side scripting in web development. It was created by John Resig in 2006 and has since become one of the most widely used JavaScript libraries.

10. What is XML DTD?

Ans: XML DTD stands for XML Document Type Definition. It is a set of rules that defines the structure and legal elements and attributes of an XML document. Essentially, a DTD specifies the valid format for an XML document, including the order of elements, the data types of attributes, and other constraints.

Group-‘B’

Short Answer Question.

Attempt any five questions.

11. Explain HTTP request message in brief.

Ans: An HTTP (Hypertext Transfer Protocol) request message is a fundamental component of web communication, used to request resources from a server. Here’s a brief explanation of its key components:

1. Request Line: This is the first line of an HTTP request and contains three main parts:
   • Method: Specifies the action to be performed (e.g., GET, POST, PUT, DELETE).
   • URI (Uniform Resource Identifier): Specifies the resource being requested.
   • HTTP Version: Indicates the version of the HTTP protocol being used.
2. Headers: HTTP headers provide additional information about the request or the client making the request. Common headers include:
   • Host: Specifies the domain name of the server being requested.
   • User-Agent: Identifies the client making the request (e.g., browser or application).
   • Content-Type: Indicates the type of data being sent in the request body (for POST and PUT requests).
   • Accept: Specifies the media types that the client is willing to accept in the response.
   • Authorization: Provides credentials for authenticating the client with the server (if required).
3. Body: In some requests (e.g., POST and PUT), there might be a message body containing data to be sent to the server. The format and content of the body depend on the specific request and its purpose.

12. Explain structure of an HTML file with example.

Ans: An HTML (Hypertext Markup Language) file is a text document that contains the content and structure of a web page. It consists of elements marked up with tags, which define the structure and formatting of the content.

Below is an example of a basic HTML file structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example HTML File</title>
    <!-- Additional metadata, stylesheets, and scripts can be included in the head section -->
    <style>
        /* CSS styles can be included within <style> tags */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <!-- Content of the web page goes here -->
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>About Us</h2>
            <p>This is a paragraph describing our company.</p>
        </section>
        <section>
            <h2>Services</h2>
            <ul>
                <li>Service 1</li>
                <li>Service 2</li>
                <li>Service 3</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>© 2024 Example Company. All rights reserved.</p>
    </footer>
    <!-- JavaScript files can be included at the end of the body section for better performance -->
    <script>
        // JavaScript code can be included within <script> tags
        console.log("This is a sample JavaScript code.");
    </script>
</body>
</html>

Explanation of the structure:

• <!DOCTYPE html>: This declaration defines the document type and version of HTML used.
• <html>: This is the root element of the HTML document. It encapsulates all other elements.
• <head>: This section contains metadata about the HTML document, such as character encoding, viewport settings, and links to external resources like stylesheets and scripts.
• <meta>: These elements provide metadata about the HTML document, such as character encoding and viewport settings.
• <title>: This element specifies the title of the web page, which is displayed in the browser’s title bar or tab.
• <body>: This section contains the visible content of the web page, including text, images, links, and other elements.
• <header>, <main>, <footer>, <section>: These are semantic HTML5 elements that help to structure the content of the web page in a meaningful way.
• <h1>, <h2>, <p>, <ul>, <li>, <a>: These are various HTML elements used to structure and format text, create lists, and add links.
• <style>: This element contains CSS (Cascading Style Sheets) code for styling the HTML document.
• <script>: This element contains JavaScript code for adding interactivity and functionality to the web page. It is typically placed at the end of the body section for better performance.

13. How do you insert external style sheet in an HTML page?

Ans: To insert an external style sheet into an HTML page, you can use the <link> element within the <head> section of your HTML document.

Here’s the basic syntax:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Your HTML content goes here -->
</body>
</html>

In this example:

• <link>: This is the tag used to link an external resource to the HTML document.
• rel="stylesheet": This attribute specifies the relationship between the current document and the linked resource, which is a stylesheet in this case.
• href="styles.css": This attribute specifies the path to the external style sheet. Replace "styles.css" with the path to your actual style sheet file.

14. How do you handle errors in JavaScript?

Ans: Handling errors in JavaScript is crucial for maintaining the stability and reliability of your code.

Here are several techniques commonly used to handle errors in JavaScript:

try…catch Statement: This statement is used to handle exceptions in JavaScript. Code that might throw an exception is enclosed in a try block, and the code that handles the exception is enclosed in a catch block.

try {
    // code that might throw an exception
} catch (error) {
    // code to handle the exception
}

throw Statement: The throw statement allows you to create custom errors and throw them when a certain condition is met.

function divide(a, b) {
    if (b === 0) {
        throw new Error('Division by zero');
    }
    return a / b;
}

Error Object: JavaScript has built-in error objects like Error, SyntaxError, TypeError, etc., which can be thrown or used to represent different types of errors.

try {
    throw new TypeError('This is a type error');
} catch (error) {
    console.error(error.message);
}

Promise Rejection Handling: When working with promises, you can use the .catch() method to handle any errors that occur during promise resolution.

somePromise.then(result => {
    // Handle success
}).catch(error => {
    // Handle error
});

Event Handlers: When working with asynchronous code or event-driven programming, you can define error handlers for events to catch and handle errors.

someEventEmitter.on('error', (error) => {
    // Handle error
});

15. Explain structure of a JSON file? How do you convert a JSON file into JavaScript object?

Ans: A JSON (JavaScript Object Notation) file is a lightweight data interchange format commonly used for transmitting data between a server and a web application. It is based on a subset of the JavaScript programming language and is easy for humans to read and write.

Here’s an explanation of the structure of a JSON file:

Objects: An object in JSON is a collection of key/value pairs. Keys are always strings, and values can be any valid JSON data type (string, number, object, array, Boolean, or null). Objects are enclosed in curly braces {}.

{
  "key1": "value1",
  "key2": "value2",
  "key3": {
    "nestedKey": "nestedValue"
  }
}

Arrays: An array in JSON is an ordered list of values. Arrays are enclosed in square brackets []. Values inside arrays can be of any valid JSON data type.

[
  "value1",
  "value2",
  {
    "key": "value"
  },
  ["nested", "array"]
]

Strings: Strings are sequences of characters enclosed in double quotes " ".

{
  "name": "savvy chaudhary",
  "email": "bimstudies.com"
}

Numbers: Numbers can be integers or floating-point numbers.

{
  "age": 30,
  "height": 6.1
}

Booleans: Boolean values can be either true or false.

{
  "isStudent": true,
  "isActive": false
}

Null: Represents a null value.

{
  "phoneNumber": null
}

To convert a JSON file into a JavaScript object, you can use the JSON.parse() method in JavaScript. This method takes a JSON string as input and returns a JavaScript object.

Here’s an example of how you can convert a JSON file into a JavaScript object:

// Assuming jsonData contains your JSON data as a string
const jsonData = '{"name": "Savvy", "age": 5}';

// Parsing JSON string into a JavaScript object
const jsonObject = JSON.parse(jsonData);

// Accessing values in the JavaScript object
console.log(jsonObject.name); 
console.log(jsonObject.age);  

Output:

Output: savvy
Output: 5

16. Explain structure of XML file with example.

Ans: XML (Extensible Markup Language) is a widely used format for representing structured data in a human-readable and machine-readable way. XML files consist of elements organized in a hierarchical structure. Each element can have attributes and contain text, other elements, or a combination of both.

Here’s an example of the structure of an XML file:

<?xml version="1.0" encoding="UTF-8"?>
<library>
  <book ISBN="978-0-7475-3269-7">
    <title>Harry Potter and the Philosopher's Stone</title>
    <author>J.K. Rowling</author>
    <genre>Fantasy</genre>
    <publication_year>1997</publication_year>
  </book>
  <book ISBN="978-0-545-01022-5">
    <title>The Hunger Games</title>
    <author>Suzanne Collins</author>
    <genre>Science Fiction</genre>
    <publication_year>2008</publication_year>
  </book>
</library>

Let’s break down the structure of this XML file:

<?xml version="1.0" encoding="UTF-8"?>

This declaration specifies the XML version being used and the character encoding.

Root Element:

<library>
  ...
</library>

The <library> element is the root element of the XML file. It contains all other elements.

Child Elements:

• <book>: Each <book> element represents a book in the library.
  • Attributes:
    • ISBN: An attribute representing the ISBN (International Standard Book Number) of the book.
  • Child Elements:
    • <title>: The title of the book.
    • <author>: The author of the book.
    • <genre>: The genre of the book.
    • <publication_year>: The publication year of the book.

Element Content:

• Text content inside elements, such as the title, author, genre, and publication year of each book, is enclosed within the respective opening and closing tags.

Group-‘C’

Long Answer Question.

Attempt any three questions.

17. 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: here’s a simple HTML form for capturing Name, Address, and Gender inputs with a submit button:

<!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 Information</h2>
    <form action="/submit" method="post">
        <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">
        <label for="male">Male</label><br>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label><br>
        <input type="radio" id="other" name="gender" value="other">
        <label for="other">Other</label><br><br>

        <input type="submit" value="Submit">
    </form>
</body>
</html>

Output:

18. What is CSS box model? Create a box model that wraps around <div> tag with margins, border, padding and actual content.

Ans: The CSS box model is a fundamental concept used in web design and development to describe the structure of an HTML element. It consists of four main components: content, padding, border, and margin. These components determine the space an element occupies on a web page and how it interacts with other elements.

Here’s an example of a box model for a <div> tag with margins, border, padding, and actual content:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
   .box {
    width: 200px;
    height: 100px;
    margin: 20px;
    padding: 10px;
    border: 2px solid black;
    background-color: lightgray;
} </style>
   
</head>
<body>
    <div class="box">
        Bimstudies.com.
    </div>
</body>
</html>

Output:

19. How do you set and get cookie values in JavaScript? Write a sample JavaScript code to set cookie values for username and password.

Ans: In JavaScript, you can set and get cookie values using the document.cookie property.

Here’s a sample JavaScript code to set cookie values for username and password:

// Function to set a cookie
function setCookie(cookieName, cookieValue, expiryDays) {
    var d = new Date();
    d.setTime(d.getTime() + (expiryDays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/";
}

// Function to get a cookie value by name
function getCookie(cookieName) {
    var name = cookieName + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var cookieArray = decodedCookie.split(';');
    for(var i = 0; i < cookieArray.length; i++) {
        var cookie = cookieArray[i];
        while (cookie.charAt(0) == ' ') {
            cookie = cookie.substring(1);
        }
        if (cookie.indexOf(name) == 0) {
            return cookie.substring(name.length, cookie.length);
        }
    }
    return "";
}

// Usage example:
var username = "exampleUser";
var password = "examplePassword";

// Set the username and password cookies to expire in 1 day
setCookie("username", username, 1);
setCookie("password", password, 1);

// Get the username and password cookies
var storedUsername = getCookie("username");
var storedPassword = getCookie("password");

console.log("Username:", storedUsername);
console.log("Password:", storedPassword);

20. Explain XML schema with example. What is DTD?

Ans: XML Schema (XSD) is a specification for defining the structure, content, and data types of XML documents. It provides a way to formally describe the elements, attributes, and relationships that can appear within an XML document. XML Schema documents are written in XML and are used to validate the structure and content of XML documents.

Here’s a simple example of an XML Schema defining the structure for a bookstore:

<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

  <!-- Define complex type for Book element -->
  <xs:element name="Book">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="Title" type="xs:string"/>
        <xs:element name="Author" type="xs:string"/>
        <xs:element name="Year" type="xs:integer"/>
        <xs:element name="Price" type="xs:decimal"/>
      </xs:sequence>
    </xs:complexType>
  </xs:element>

</xs:schema>

In this example:

• xs:schema: This element defines the root of the XML Schema document and specifies the XML namespace for XML Schema definitions.
• xs:element: This element defines an XML element.
• xs:complexType: This element defines a complex type, which can contain other elements and attributes.
• xs:sequence: This element specifies that the child elements must appear in a specific order.
• xs:string, xs:integer, xs:decimal: These are built-in data types provided by XML Schema for defining the types of element values.

DTD (Document Type Definition) is an older mechanism for defining the structure of XML documents. It defines the legal building blocks of an XML document and defines the document structure with a list of elements and attributes. DTDs are declared inline within XML documents using a DOCTYPE declaration. While DTDs can validate the structure of XML documents, they have limitations compared to XML Schema, such as lack of support for data typing and namespace support.

Here’s an example of a DTD for the same bookstore example:

<!DOCTYPE Bookstore [
  <!ELEMENT Bookstore (Book*)>
  <!ELEMENT Book (Title, Author, Year, Price)>
  <!ELEMENT Title (#PCDATA)>
  <!ELEMENT Author (#PCDATA)>
  <!ELEMENT Year (#PCDATA)>
  <!ELEMENT Price (#PCDATA)>
]>

In this DTD:

• <!DOCTYPE Bookstore [...]>: This declares the document type for the XML document.
• <!ELEMENT>: This declares an element and specifies its content model.
• (#PCDATA): This denotes parsed character data, which allows text content within the element.

Group-‘D’

Comprehensive Questions

Attempt all questions.

21. Explain different ways of inserting CSS in HTML document? What is pseudo-class selector?

Ans: There are several ways to insert CSS (Cascading Style Sheets) into an HTML document:

some are explained below:

Inline CSS: You can include CSS directly within HTML elements using the style attribute. For example:

Inline CSS: You can include CSS directly within HTML elements using the style attribute. For example:

Inline CSS applies only to the specific element it’s defined on.

Internal CSS: You can include CSS within the <style> element in the <head> section of your HTML document. For example:

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

Internal CSS applies to all elements of the specified type within the document.

External CSS: You can link an external CSS file to your HTML document using the <link> element in the <head> section. For example:

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

External CSS allows you to keep your styles separate from your HTML document, making it easier to manage and maintain.

A pseudo-class selector in CSS is a keyword added to selectors that specify a special state of the selected elements. These states are typically not based solely on the document’s contents or structure, but rather on external factors like user interaction or the presence of specific attributes. Pseudo-classes always start with a colon (:) and can be appended to any CSS selector.

Some common pseudo-class selectors include:

:hover: This pseudo-class is used to apply styles when the user hovers over an element with the cursor.

a:hover {
    color: red;
}

This rule will change the color of links to red when the user hovers over them.

:active: This pseudo-class is applied to an element during the period that the element is being activated (e.g., clicked).

button:active {
    background-color: gray;
}

This rule will change the background color of a button to gray when it’s being clicked.

:visited: This pseudo-class applies styles to links that have been visited by the user.

a:visited {
    color: purple;
}

This rule will change the color of visited links to purple.

:focus: This pseudo-class applies styles to an element when it gains focus, usually through keyboard navigation or a mouse click.

input:focus {
    border-color: blue;
}

This rule will change the border color of an input field when it is focused.

:nth-child(): This pseudo-class allows you to select elements based on their position within a parent element.

li:nth-child(odd) {
    background-color: lightgray;
}

This rule will apply a background color to every odd-numbered <li> element within its parent.

22. Create a HTML form with fields username, password, and country. The username field she be textbox type, password field should be password type, and the country should be drop-down list. Now write a JavaScript function to valid this form. The function should validate the username to be of length 8, password should start with digit and should be alphanumeric, and the county field should be selected.

Ans: Here’s the HTML form with fields for username, password, and country, along with a JavaScript function to validate the form:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<script>
function validateForm() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var country = document.getElementById("country").value;

    // Validate username
    if (username.length !== 8) {
        alert("Username must be 8 characters long.");
        return false;
    }

    // Validate password
    if (!/^\d/.test(password) || !/^\w+$/.test(password)) {
        alert("Password must start with a digit and be alphanumeric.");
        return false;
    }

    // Validate country
    if (country === "") {
        alert("Please select a country.");
        return false;
    }

    return true; // Form is valid
}
</script>
</head>
<body>
<form onsubmit="return validateForm()">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required><br><br>

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

    <label for="country">Country:</label>
    <select id="country" name="country" required>
        <option value="">Select a country</option>
        <option value="USA">USA</option>
        <option value="Canada">Canada</option>
        <option value="UK">UK</option>
        <!-- Add more options as needed -->
    </select><br><br>

    <input type="submit" value="Submit">
</form>
</body>
</html>

Output: