model

Group B

Short Answer Questions

11.

HTTP requests are messages sent by the client to initiate an action on the server. Their start-line contain these elements:

A Request-line
Zero or more header (General|Request|Entity) fields followed by CRLF
An empty line (i.e., a line with nothing preceding the CRLF) indicating the end of the header fields
Optionally a message-body

Request Line

The request line or start line is sent by the client in order to start the action on the server. It includes the following elements:

an HTTP method.
the request-target which can be a URI or an URL to either a path or a protocol.
the HTTP version that defines the structure of the remaining message.

Headers

The HTTP header allows for additional information to be passed between server and client such as cookies, information about the authorization token, or user agent using a special string that helps server identify client browser and OS version..

Message Body

The server uses the message body to deliver the information back to the client. The message body contains the information, the request line, headers, an empty line, and the message body that is optional.

While not all requests have a body, the ones that do, often use POST to deliver the payload.

12.

The structure of an HTML (Hypertext Markup Language) file is composed of various elements that define the document’s structure, content, and presentation. Here’s an example of a basic HTML file with explanations for each section:

<!DOCTYPE html>

<head>
    <title>Example HTML Page</title>
</head>

<body>

    <header>
        <h1>Welcome to My Website</h1>
        <p>This is a sample HTML page.</p>
    </header>

    <nav>
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
               </ul>
    </nav>

    <section id="section1">
        <h2>Section 1</h2>
        <p>This is the content of Section 1.</p>
    </section>

    <section id="section2">
        <h2>Section 2</h2>
        <p>This is the content of Section 2.</p>
    </section>

   
    <footer>
        <p>@copyright 2023 BIM STUDY Notes</p>
    </footer>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Example HTML Page</title>

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This is a sample HTML page.</p>

</header>

<nav>

<ul>

<li><a href="#section1">Section 1</a></li>

<li><a href="#section2">Section 2</a></li>

</ul>

</nav>

<h2>Section 1</h2>

<p>This is the content of Section 1.</p>

</section>

<h2>Section 2</h2>

<p>This is the content of Section 2.</p>

</section>

</footer>

</body>

</html>

Explanation of the structure:

<html>: The root element of an HTML page. It contains the entire content of the HTML document.

<head>: Contains metadata about the HTML document, such as the character set (<meta charset=”UTF-8″>), viewport settings (<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>), and the document title (<title>Example HTML Page</title>).

<body>: Contains the content of the HTML document, including text, images, links, and other elements.

Structural Elements:

<header>: Represents a header section, often containing headings and introductory content.
<nav>: Represents a navigation menu. It typically contains links to different sections of the page.
<section>: Represents a section of content. The id attribute is used to create links that jump to specific sections.
<footer>: Represents a footer section, often containing copyright information or other footer content.

13.

To insert an external style sheet in an HTML page, you use the <link> element within the <head> section of your HTML document.The external CSS is mostly used to change the styles and looks of multiple web pages by changing just one CSS file

Here’s an example:

<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" src="style.css">
    </head>
    <body>

    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

css

body {
  background-color: blue;
}
h1 {
  color: navy;
  margin-left: 30px;
}

body {

background-color: blue;

}

h1 {

color: navy;

margin-left: 30px;

}

14.

Handling errors in JavaScript is crucial for writing robust and reliable code. JavaScript provides mechanisms for error handling to prevent unexpected issues and to gracefully deal with problems that may arise during the execution of your scripts. Here are some techniques for handling errors in JavaScript:

The try statement defines a code block to run (to try).
The catch statement defines a code block to handle any error.
The finally statement defines a code block to run regardless of the result.
The throw statement defines a custom error.

Example

Try-Catch Statement:

try {
    // Code that might throw an error
    let result = 10 / 0;
    console.log(result); // This line will not be executed if an error occurs
} catch (error) {
    // Handle the error
    console.error("An error occurred:", error.message);
}

try {

// Code that might throw an error

let result = 10 / 0;

console.log(result); // This line will not be executed if an error occurs

} catch (error) {

// Handle the error

console.error("An error occurred:", error.message);

}

15.

Structure of a JSON File:

JSON consists of key-value pairs.
Objects are enclosed in curly braces {}.
Arrays are ordered lists enclosed in square brackets [].
Values can be strings, numbers, objects, arrays, booleans (true or false), or null`.

Converting JSON to JavaScript:

Use JSON.parse(jsonString) to convert a JSON string to a JavaScript object.
Access values in the JavaScript object as you would with any object property.

Example

<h2>Converting JSON Text into Javascript Object</h2>
<b>JSON Object :</b>
<p id="demo"></p>
<b>Use of Javascript object :</b>
<p id="demo1"></p>

<script>
	var jsonobj ='{ "name":"Brendan Eich","designerof":"Javascript","bornin":"1961" }';
	
	// Here we convert JSON to object
	var obj = JSON.parse(jsonobj);
	
	document.getElementById("demo1").innerHTML =
						obj.name + ", who was born in "
						+ obj.bornin + ", was the designer of "
						+ obj.designerof;
	document.getElementById("demo").innerHTML =jsonobj;
</script>

<h2>Converting JSON Text into Javascript Object</h2>

<b>JSON Object :</b>

<b>Use of Javascript object :</b>

var jsonobj ='{ "name":"Brendan Eich","designerof":"Javascript","bornin":"1961" }';

// Here we convert JSON to object

var obj = JSON.parse(jsonobj);

document.getElementById("demo1").innerHTML =

obj.name + ", who was born in "

+ obj.bornin + ", was the designer of "

+ obj.designerof;

document.getElementById("demo").innerHTML =jsonobj;

</script>

16.

Structure of an XML File:

XML (eXtensible Markup Language) is a markup language that defines rules for encoding documents in a format that is both human-readable and machine-readable. Explanation of the structure:

Declaration:
- The XML declaration (<?xml version="1.0" encoding="UTF-8"?>) specifies the XML version and character encoding.
Root Element:
- The entire XML document is enclosed in a root element (<rootElement> in this example). It serves as the container for all other elements.
Child Elements:
- Elements within the root element are called child elements. They can have attributes (e.g., attribute="value") and contain text content.
Nested Elements:
- Elements can be nested within other elements, creating a hierarchy.
Comments:
- Comments are enclosed in . They are ignored by the XML parser and serve as annotations for human readers.

Example

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
    <book category="fiction">
        <title lang="en">Harry Potter</title>
        <author>J.K. Rowling</author>
        <price>29.99</price>
    </book>
    <book category="non-fiction">
        <title lang="es">Cien años de soledad</title>
        <author>Gabriel García Márquez</author>
        <price>24.95</price>
    </book>
</bookstore>

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

<title lang="en">Harry Potter</title>

<author>J.K. Rowling</author>

</book>

<title lang="es">Cien años de soledad</title>

<author>Gabriel García Márquez</author>

</book>

</bookstore>

Group C

17.

<!DOCTYPE html>

<head>
      <title>User Input Form</title>
</head>

<body>

    <h1>User Input Form</h1>

    <form action="/submit" method="post">
        <!-- Name Input -->
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <br>

        <!-- Address Input -->
        <label for="address">Address:</label>
        <textarea id="address" name="address" rows="4" required></textarea>

        <br>

        <!-- Gender Input -->
        <label>Gender:</label>
        <input type="radio" id="male" name="gender" value="male" required>
        <label for="male">Male</label>
        <input type="radio" id="female" name="gender" value="female" required>
        <label for="female">Female</label>
        <input type="radio" id="other" name="gender" value="other" required>
        <label for="other">Other</label>

        <br>

        <!-- Submit Button -->
        <input type="submit" value="Submit">
    </form>

</body>

</html>

<!DOCTYPE html>

<head>

<title>User Input Form</title>

</head>

<body>

<h1>User Input Form</h1>

<br>

<label for="address">Address:</label>

<br>

<label>Gender:</label>

<label for="female">Female</label>

<label for="other">Other</label>

<br>

</form>

</body>

</html>

18.Solution

The CSS Box Model is a fundamental concept that describes the layout of elements on a web page. It consists of four main components: content, padding, border, and margin. Each of these components contributes to the total space occupied by an element.

Here’s an example of how you might create a box model around a <div> tag with specified margins, borders, padding, and actual content:

<!DOCTYPE html>


<head>
    <title>CSS Box Model Example</title>
    <style>
        /* Style for the box */
        .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid #333;
            margin: 30px;
        }

        /* Additional styling for better visualization */
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        .box-content {
            background-color: #f0f0f0;
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>

<body>

    <!-- The box with margins, borders, padding, and content -->
    <div class="box">
        <div class="box-content">Actual Content</div>
    </div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>CSS Box Model Example</title>

<style>

/* Style for the box */

.box {

width: 200px;

height: 100px;

padding: 20px;

border: 5px solid #333;

margin: 30px;

}

/* Additional styling for better visualization */

body {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

margin: 0;

}

.box-content {

background-color: #f0f0f0;

text-align: center;

line-height: 60px;

}

</style>

</head>

<body>

<div class="box-content">Actual Content</div>

</div>

</body>

</html>

19.

A cookie is a small text file that lets you store a small amount of data (nearly 4KB) on the user’s computer. They are typically used for keeping track of information such as user preferences that the site can retrieve to personalize the page when user visits the website next time.

Setting Cookie Values:

function setCookie(name,value,exp_days) {
    var d = new Date();
    d.setTime(d.getTime() + (exp_days*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

function setCookie(name,value,exp_days) {

var d = new Date();

d.setTime(d.getTime() + (exp_days*24*60*60*1000));

var expires = "expires=" + d.toGMTString();

document.cookie = name + "=" + value + ";" + expires + ";path=/";

}

Getting Cookie Values:

function getCookie(name) {
    var cname = name + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++){
        var c = ca[i];
        while(c.charAt(0) == ' '){
            c = c.substring(1);
        }
        if(c.indexOf(cname) == 0){
            return c.substring(cname.length, c.length);
        }
    }
    return "";
}

function getCookie(name) {

var cname = name + "=";

var decodedCookie = decodeURIComponent(document.cookie);

var ca = decodedCookie.split(';');

for(var i = 0; i < ca.length; i++){

var c = ca[i];

while(c.charAt(0) == ' '){

c = c.substring(1);

}

if(c.indexOf(cname) == 0){

return c.substring(cname.length, c.length);

}

return "";

}

20.

XML Schema:

XML Schema (XSD) is a language for describing the structure and constraining the contents of XML documents. It provides a way to define the elements, attributes, and data types allowed in an XML document. XML Schema is often used for validating XML documents and ensuring their conformity to a specific structure.

<!-- Example XSD for a simple book element -->
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

  <xs:element name="bookstore">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="book" maxOccurs="unbounded">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="title" type="xs:string"/>
              <xs:element name="author" type="xs:string"/>
              <xs:element name="price" type="xs:decimal"/>
            </xs:sequence>
            <xs:attribute name="category" type="xs:string" use="required"/>
          </xs:complexType>
        </xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>

</xs:schema>

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

<xs:element name="bookstore">

<xs:complexType>

<xs:sequence>

<xs:element name="book" maxOccurs="unbounded">

<xs:complexType>

<xs:sequence>

<xs:element name="title" type="xs:string"/>

<xs:element name="author" type="xs:string"/>

<xs:element name="price" type="xs:decimal"/>

</xs:sequence>

<xs:attribute name="category" type="xs:string" use="required"/>

</xs:complexType>

</xs:element>

</xs:sequence>

</xs:complexType>

</xs:element>

</xs:schema>

DTD (Document Type Definition):

DTD is another way to define the structure and legal elements and attributes of an XML document. DTDs have been widely used in the past, but XML Schema has largely replaced them due to its more expressive and feature-rich capabilities.

<!-- Example DTD for a simple book element -->
<!DOCTYPE bookstore [
  <!ELEMENT bookstore (book+)>
  <!ELEMENT book (title, author, price)>
  <!ELEMENT title (#PCDATA)>
  <!ELEMENT author (#PCDATA)>
  <!ELEMENT price (#PCDATA)>
  <!ATTLIST book category CDATA #REQUIRED>
]>

<!DOCTYPE bookstore [

<!ELEMENT bookstore (book+)>

<!ELEMENT book (title, author, price)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT author (#PCDATA)>

<!ELEMENT price (#PCDATA)>

<!ATTLIST book category CDATA #REQUIRED>

Group D

21.

Different Ways of Inserting CSS in an HTML Document:

Inline CSS:
- CSS rules are applied directly within the HTML tags using the style attribute.Example:
  
  Java
  
  <p style="color: blue; font-size: 16px;">This is a paragraph with inline CSS.</p>
  
  1
  
  <p style="color: blue; font-size: 16px;">This is a paragraph with inline CSS.</p>
  
  2. Internal (or Embedded) CSS:

CSS rules are placed within the <style> element in the HTML document, typically in the <head> section.

Example:

<head>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>This is a paragraph with internal CSS.</p>
</body>

<head>

<style>

p {

color: green;

font-size: 18px;

}

</style>

</head>

<body>

<p>This is a paragraph with internal CSS.</p>

</body>

External CSS:

CSS rules are defined in a separate external CSS file and linked to the HTML document using the <link> element.
Example:

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

<head>

</head>

The content of styles.css:

p {
    color: red;
    font-size: 20px;
}

p {

color: red;

font-size: 20px;

}

Pseudo-Class Selectors:

Pseudo-classes are special keywords that are added to selectors to style elements based on their state or position. They are used to select and style elements that cannot be selected using simple selectors alone. Here are some common examples:

:hover: Selects and styles an element when the mouse hovers over it.

a:hover {
    color: #ff0000; /* Red text color on hover for links */
}

a:hover {

color: #ff0000; /* Red text color on hover for links */

}

:focus: Selects and styles an element when it receives focus.

input:focus {
    border: 2px solid #00cc00; /* Green border when input is focused */
}

input:focus {

border: 2px solid #00cc00; /* Green border when input is focused */

}

22.

<!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>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        form {
            text-align: left;
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input,
        select {
            margin-bottom: 16px;
        }

        #result {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <form id="myForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>

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

        <label for="country">Country:</label>
        <select id="country" name="country" required>
            <option value="">Select Country</option>
            <option value="usa">USA</option>
            <option value="canada">Canada</option>
            <option value="uk">UK</option>
        </select>

        <input type="button" value="Submit" onclick="validateForm()">
    </form>

    <p id="result"></p>

    <script>
        function validateForm() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var country = document.getElementById('country').value;
            var resultMessage = document.getElementById('result');

            // Validate username (length 8)
            if (username.length !== 8) {
                resultMessage.textContent = 'Username must be 8 characters long.';
                return;
            }

            // Validate password (starts with digit, alphanumeric)
            if (!/^\d/.test(password) || !/^[0-9a-zA-Z]+$/.test(password)) {
                resultMessage.textContent = 'Password must start with a digit and be alphanumeric.';
                return;
            }

            // Validate country (selected)
            if (country === '') {
                resultMessage.textContent = 'Please select a country.';
                return;
            }

            // If all validations pass
            resultMessage.textContent = 'Form is valid!';
        }
    </script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Form Validation</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

margin: 0;

}

form {

text-align: left;

}

label {

display: block;

margin-bottom: 8px;

}

input,

select {

margin-bottom: 16px;

}

#result {

color: red;

font-weight: bold;

}

</style>

</head>

<body>

<label for="username">Username:</label>

<label for="password">Password:</label>

<label for="country">Country:</label>

<option value="">Select Country</option>

<option value="canada">Canada</option>

</select>

</form>

function validateForm() {

var username = document.getElementById('username').value;

var password = document.getElementById('password').value;

var country = document.getElementById('country').value;

var resultMessage = document.getElementById('result');

// Validate username (length 8)

if (username.length !== 8) {

resultMessage.textContent = 'Username must be 8 characters long.';

return;

}

// Validate password (starts with digit, alphanumeric)

if (!/^\d/.test(password) || !/^[0-9a-zA-Z]+$/.test(password)) {

resultMessage.textContent = 'Password must start with a digit and be alphanumeric.';

return;

}

// Validate country (selected)

if (country === '') {

resultMessage.textContent = 'Please select a country.';

return;

}

// If all validations pass

resultMessage.textContent = 'Form is valid!';

}

</script>

</body>

</html>

Web Technology 1 Model Question solution

Group B

Short Answer Questions

11.

Request Line

Headers

Message Body

12.

13.

14.

15.

16.

Group C

17.

18.Solution

19.

Setting Cookie Values:

Getting Cookie Values:

20.

DTD (Document Type Definition):

Group D

Different Ways of Inserting CSS in an HTML Document:

Pseudo-Class Selectors:

22.

Leave a Reply Cancel reply