PyQdeck LogoPyQdeckSubjects

Web Technology

Back to Web Technology

Module I: Introduction to Web Technologies & Architectures

  1. Q1a. Who is making the Web standards? (i) Mozilla (ii) Microsoft (iii) The World Wide Web Consortium (iv) NVDIA20202m

    Module I: Introduction to Web Technologies & Architectures

    Who is making the Web standards?

    (i) Mozilla
    (ii) Microsoft
    (iii) The World Wide Web Consortium
    (iv) NVDIA

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Correct Answer: (iii) The World Wide Web Consortium (W3C)

    Explanation:

    • The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web, founded in 1994 by Tim Berners-Lee.
    • W3C develops open standards (recommendations) such as HTML, CSS, XML, SVG, and WAI-ARIA to ensure the long-term growth and interoperability of the Web.
    • Mozilla and Microsoft are commercial/non-profit software vendors that build web browsers and participate as members in standards bodies (like W3C and WHATWG).
    • NVIDIA is a semiconductor and GPU hardware company.
  2. Q1a. Which markup language is the foundation for defining other markup languages like HTML and XML (i) SGML (ii) CSS (iii) XSL (iv) None of this20252m

    Module I: Introduction to Web Technologies & Architectures

    Which markup language is the foundation for defining other markup languages like HTML and XML

    (i) SGML
    (ii) CSS
    (iii) XSL
    (iv) None of this

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Correct Answer: (i) SGML

    Explanation:

    • SGML (Standard Generalized Markup Language) is a standard generalized metalanguage (ISO 8879:1986) used to define descriptive markup languages.
    • Both HTML and XML were developed based on SGML. XML is a simplified subset of SGML designed specifically for the World Wide Web.
    • CSS is a style sheet language, and XSL is an XML-based stylesheet and transformation language.

    Key Points:

    1. Foundation: SGML defines the rules and syntax for document markup.
    2. Derivatives: HTML (application of SGML) and XML (restricted subset of SGML).
  3. Q1b. Which of the following is used to define the structure of an XML document? (i) XSL (ii) DTD (iii) CSS (iv) HTML20252m

    Module I: Introduction to Web Technologies & Architectures

    Which of the following is used to define the structure of an XML document?

    (i) XSL
    (ii) DTD
    (iii) CSS
    (iv) HTML

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Correct Answer: (ii) DTD

    Explanation:

    • DTD (Document Type Definition) defines the legal structure, elements, attributes, and data types of an XML document.
    • It validates the syntax and layout of an XML document to ensure it conforms to the intended schema.
    • XSL (Extensible Stylesheet Language) is used for transforming and formatting XML documents.
    • CSS (Cascading Style Sheets) is used for presentation and styling.
    • HTML is a markup language for web page structure, not XML schema definition.

    Example of DTD Declaration:

    <!DOCTYPE note [
  <!ELEMENT note (to,from,heading,body)>
  <!ELEMENT to (#PCDATA)>
  <!ELEMENT from (#PCDATA)>
  <!ELEMENT heading (#PCDATA)>
  <!ELEMENT body (#PCDATA)>
]>
  4. Q1b. If you want to align text to the right side of a block element in a cascading style sheet (CSS), then which of...20202m

    Module I: Introduction to Web Technologies & Architectures

    If you want to align text to the right side of a block element in a cascading style sheet (CSS), then which of...

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Correct Answer: text-align: right;

    Explanation:

    • In Cascading Style Sheets (CSS), the text-align property specifies the horizontal alignment of inline content (like text, images, or inline blocks) within a block element or table-cell box.
    • Setting text-align: right; aligns the text flush with the right edge of the containing block element.

    Syntax & Example:

    p {
  text-align: right;
}

    Common text-align Values:

    • left: Aligns text to the left margin (default in LTR languages).
    • right: Aligns text to the right margin.
    • center: Centers the text horizontally.
    • justify: Stretches lines so that every line has equal width.
  5. Q1c. Which of the following is not used with text-decoration property? (i) Overline (ii) Underline (iii) Line-through (iv) Inline20192m

    Module I: Introduction to Web Technologies & Architectures

    Which of the following is not used with text-decoration property?

    (i) Overline
    (ii) Underline
    (iii) Line-through
    (iv) Inline

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Correct Answer: (iv) Inline

    Explanation:

    • In CSS, the text-decoration (or text-decoration-line) property accepts values that specify decorative lines added to text:
      • underline: Line under the text.
      • overline: Line above the text.
      • line-through: Strikethrough line across the text.
      • none: Removes any decoration.
    • inline is a value of the CSS display property (display: inline;), not the text-decoration property.
  6. Q1c. Markup tags tell the Web browser (i) how to organize the page (ii) how to display the page (iii) how to display message box on page (iv) None of the above20202m

    Module I: Introduction to Web Technologies & Architectures

    Markup tags tell the Web browser

    (i) how to organize the page
    (ii) how to display the page
    (iii) how to display message box on page
    (iv) None of the above

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Correct Answer: (ii) how to display the page

    Explanation:

    • Markup tags (HTML tags such as <h1>, <p>, <table>, <img>) are keywords enclosed in angle brackets that instruct the web browser on how to format, structure, and display text, multimedia, and layout elements on the screen.
    • The browser reads markup tags to construct the Document Object Model (DOM) and render the visual page according to the specified semantics and styling.
  7. Q1d. Which of the following HTML tags is used to define an internal style sheet? (i) \<script\> (ii) \<css\> (iii) \<style\> (iv) None of the above20192m

    Module I: Introduction to Web Technologies & Architectures

    Which of the following HTML tags is used to define an internal style sheet?

    (i) <script>
    (ii) <css>
    (iii) <style>
    (iv) None of the above

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Correct Answer: (iii) <style>

    Explanation:

    • In HTML, internal (embedded) Cascading Style Sheets are defined inside the <style> tag, placed within the <head> section of the HTML document.
    • <script> is used to embed or reference executable JavaScript code.
    • <css> is not a valid HTML element.

    Example:

    <head>
  <style>
    body {
      background-color: #f5f6f2;
      color: #1b2430;
    }
  </style>
</head>
  8. Q1e. Which of the following is an advantage of putting presentation information in a separate CSS file rather than in HTML itself? (i) The content becomes easy to manage (ii) Becomes easy to make site for different devices like mobile by making separate CSS files (iii) CSS files are generally cached and therefore decrease server load and network traffic (iv) All of the above20202m

    Module I: Introduction to Web Technologies & Architectures

    Which of the following is an advantage of putting presentation information in a separate CSS file rather than in HTML itself?

    (i) The content becomes easy to manage
    (ii) Becomes easy to make site for different devices like mobile by making separate CSS files
    (iii) CSS files are generally cached and therefore decrease server load and network traffic
    (iv) All of the above

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Correct Answer: (iv) All of the above

    Explanation:

    Separating presentation rules into an external .css file provides several key advantages:

    1. Maintainability & Separation of Concerns (i): HTML structure is decoupled from visual styling, allowing sitewide design changes by editing a single CSS file.
    2. Device Independence & Responsiveness (ii): Enables targeting distinct devices (mobiles, tablets, print) through separate stylesheets or CSS media queries (@media).
    3. Browser Caching & Performance (iii): External CSS files are cached by the browser after the first download, drastically reducing bandwidth consumption, network traffic, and server load on subsequent page requests.

    Therefore, (iv) All of the above is the correct option.

  9. Q1g. Choose the correct HTML tag to make a text bold. (i) \<b\> (ii) \<bold\> (iii) \<bb\> (iv) \<bld\>20192m

    Module I: Introduction to Web Technologies & Architectures

    Choose the correct HTML tag to make a text bold.

    (i) <b>
    (ii) <bold>
    (iii) <bb>
    (iv) <bld>

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Correct Answer: (i) <b>

    Explanation:

    • In HTML, the <b> tag (physical formatting tag) and the <strong> tag (semantic logical tag) are used to format text in bold.
    • Tags like <bold>, <bb>, and <bld> are not valid HTML elements.

    Example:

    <p>This is <b>bold text</b> using the b tag.</p>
  10. Q2a. Compare Client/Server computing with N-tiered architecture using suitable diagrams.20257m

    Module I: Introduction to Web Technologies & Architectures

    Compare Client/Server computing with N-tiered architecture using suitable diagrams.

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Answer: Client/Server Computing vs N-Tiered Architecture

    1. Client/Server Computing

    Client/Server (C/S) computing is a distributed architecture in which the application is divided mainly into a client and a server. The client requests a service and the server processes the request and returns the result.

    +---------+       Request       +---------+
| Client  | ------------------> | Server  |
| (UI)    | <------------------ |         |
+---------+       Response      +---------+

    Client

    • Provides the user interface.
    • Accepts input from the user.
    • Sends requests to the server.
    • Displays the result returned by the server.

    Server

    • Receives client requests.
    • Processes application/business operations.
    • Accesses databases or other resources.
    • Sends the result back to the client.

    2. N-Tiered Architecture

    N-tier architecture divides an application into multiple logical tiers, with each tier having a specific responsibility. A common example is three-tier architecture.

    +-----------------------+
|   Presentation Tier   |
| HTML / CSS / Browser  |
+-----------+-----------+
            |
            v
+-----------------------+
|   Business Tier       |
| Application Logic     |
+-----------+-----------+
            |
            v
+-----------------------+
|      Data Tier        |
| Database / Data Access|
+-----------------------+

    Presentation Tier

    Handles interaction with the user. Examples include HTML, CSS, JavaScript and the web browser.

    Business Logic Tier

    Contains application rules and processing such as validation, authentication and calculations.

    Data Tier

    Handles storing, retrieving and managing data using databases and data-access components.

    3. Comparison

    Client/Server N-Tier Architecture
    Usually has two major parts: client and server. Divides the application into multiple logical tiers.
    Business logic may be placed in the client or server. Business logic normally has a dedicated tier.
    Simpler architecture. More structured architecture.
    Less suitable for very large applications. Better suited for large and complex web applications.
    Maintenance can become difficult when responsibilities are mixed. Easier maintenance because responsibilities are separated.
    Scaling can be more difficult. Individual tiers can be scaled independently.

    4. Advantages of N-Tier Architecture

    1. Separation of concerns: Each tier performs a specific responsibility.
    2. Maintainability: Changes in one tier have less impact on other tiers.
    3. Scalability: Individual tiers can be scaled according to demand.
    4. Security: Sensitive data and database access can be isolated in lower tiers.
    5. Reusability: Business and data-access components can be reused by different clients.

    Conclusion

    Client/Server computing provides a simple distributed model in which clients communicate directly with servers. N-tier architecture extends this idea by separating presentation, business logic and data management into independent tiers. Therefore, N-tier architecture provides better scalability, maintainability, security and flexibility for modern web applications.

  12. Q2a. Explain about domain name, IP address and WWW.20207m

    Module I: Introduction to Web Technologies & Architectures

    Explain about domain name, IP address and WWW.

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Answer: Domain Name, IP Address, and the World Wide Web (WWW)

    1. Introduction

    The internet relies on standardized addressing systems and information retrieval architectures to enable global communication between millions of interconnected computers. IP Addresses, Domain Names, and the World Wide Web (WWW) form the core foundation of this ecosystem.

    +-------------------+      DNS Resolution       +-------------------+
|    Domain Name    | ------------------------> |    IP Address     |
| (www.example.com) | <------------------------ |  (93.184.216.34)  |
+-------------------+                           +---------+---------+
          |                                               |
          |       HTTP/HTTPS Request                      | Connects over
          +-----------------------------------------------> TCP/IP Network
                                                          |
                                                +---------v---------+
                                                |    WWW Resource   |
                                                | (Web Page / HTML) |
                                                +-------------------+

    2. IP Address (Internet Protocol Address)

    An IP address is a unique numerical identifier assigned to every device connected to a computer network that uses the Internet Protocol for communication.

    Key Characteristics:

    1. Addressing & Routing: Acts as a network identifier and location address to deliver packets to their destination.
    2. Versions of IP:
      • IPv4 (32-bit): Formatted as 4 octets separated by dots (e.g., 192.168.1.1). Provides ≈4.3×109\approx 4.3 \times 10^9 addresses.
      • IPv6 (128-bit): Formatted as 8 groups of hexadecimal digits separated by colons (e.g., 2001:0db8:85a3::8a2e:0370:7334) to overcome IPv4 exhaustion.
    3. Static vs. Dynamic IP:
      • Static IP: Permanent address configured for servers.
      • Dynamic IP: Temporarily leased address assigned by DHCP.

    3. Domain Name

    A Domain Name is a human-readable alias used to access websites without needing to remember numeric IP addresses (e.g., google.com instead of 142.250.190.46).

    Structure of a Domain Name:

    https://  subdomain .  second-level-domain .  top-level-domain (TLD)
          (  www    .       example        .         com        )
    • Top-Level Domain (TLD): Generic (.com, .org, .edu) or country-code (.in, .uk, .us).
    • Second-Level Domain (SLD): The organization or brand name (google, wikipedia).
    • Subdomain: Specific section or server (mail.google.com, api.example.com).

    DNS (Domain Name System):

    The global hierarchical database that translates human-friendly domain names into machine-routable IP addresses.

    4. WWW (World Wide Web)

    Invented in 1989 by Tim Berners-Lee at CERN, the World Wide Web (WWW) is an interconnected system of public hypertext documents and multimedia resources accessible over the Internet via the HTTP/HTTPS protocol.

    Core Architectural Pillars of the WWW:

    1. URI/URL (Uniform Resource Locator): Standardized global address to locate any document (e.g., https://www.example.com/index.html).
    2. HTTP/HTTPS: The application-layer communication protocol for exchanging web documents.
    3. HTML (HyperText Markup Language): The standard formatting language used to structure web content and hyperlinks.
    4. Web Browsers & Web Servers: The client software that renders pages and the server software that delivers them.

    5. Summary Comparison

    Concept Nature Function Example
    IP Address Numerical identifier Identifies physical machine on network 142.250.190.46
    Domain Name Human-friendly text name Mapped to IP for user convenience www.google.com
    WWW Global information system Application running on the Internet Web pages, hypermedia, web apps
  13. Q2a. What, if there is no text between the tags or if a text was omitted by mistake, will it affect the display of the HTML file? Explain with the help of example.20197m

    Module I: Introduction to Web Technologies & Architectures

    What, if there is no text between the tags or if a text was omitted by mistake, will it affect the display of the HTML file? Explain with the help of example.

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Answer: Effect of Empty Tags and Omitted Text in HTML Display

    1. Core Principle of HTML Parsing

    HTML parsers in modern web browsers are designed to be fault-tolerant and permissive. When a browser encounters an HTML tag with no text enclosed between its opening and closing tags (<tag></tag>), or if content is omitted by mistake, it handles it in specific predictable ways depending on the type of element:

                                   +-----------------------------+
                               |    EMPTY / OMITTED TAGS     |
                               +--------------+--------------+
                                              |
                     +------------------------+------------------------+
                     |                                                 |
                     v                                                 v
           +--------------------+                            +--------------------+
           |  Container Elements|                            | Void/Empty Elements|
           |  <p></p>, <b></b>  |                            | <br>, <hr>, <img>  |
           | (Rendered as blank)|                            | (Self-contained)   |
           +--------------------+                            +--------------------+

    2. Impact on Webpage Display

    A. Non-Visual / Zero-Dimension Rendering

    • For standard inline and block-level text formatting tags (such as <p></p>, <b></b>, <i></i>, <span></span>, <h1></h1>), having no text inside results in an element with zero inner text content.
    • Inline tags (like <b></b> or <span></span>) take up 0×00 \times 0 pixels on the screen, causing no visible impact or distortion to surrounding text.

    B. Impact on Vertical Spacing and Margins (Block Elements)

    • While empty text tags are invisible, empty block-level elements (like <p></p> or <div></div> or <h1></h1>) still retain their default browser margin and padding rules (unless overridden by CSS).
    • An empty <p></p> may introduce unexpected vertical empty white space (line gaps) between adjacent paragraphs.

    C. Structural and Table Elements

    • An empty table cell <td></td> or table row <tr></tr> may collapse or render as a blank border square, potentially altering column alignment if table styling is not fixed.

    3. Illustrative HTML Example

    <!DOCTYPE html>
<html>
<head>
  <title>Empty Tags Test</title>
  <style>
    .highlight { border: 1px dashed red; }
  </style>
</head>
<body>

  <!-- Example 1: Empty inline bold and italic tags (No effect on text) -->
  <p>This is <b></b> a sample sentence with <i></i> omitted text.</p>
  <!-- Output: "This is a sample sentence with omitted text." (Normal spacing) -->

  <!-- Example 2: Empty block tags (Introduces vertical whitespace gap) -->
  <p>Paragraph 1: Introduction to Web Design.</p>
  <p class="highlight"></p> <!-- Empty tag with margins -->
  <p>Paragraph 2: Continuing after empty block.</p>

  <!-- Example 3: Empty heading tag -->
  <h2 class="highlight"></h2> <!-- Collapses vertically, zero width -->

  <!-- Example 4: Empty table cell -->
  <table border="1">
    <tr>
      <td>Student Name</td>
      <td>Marks</td>
    </tr>
    <tr>
      <td>Rohan Kumar</td>
      <td></td> <!-- Empty data cell: renders as empty box -->
    </tr>
  </table>

</body>
</html>

    4. Key Takeaways

    1. No Fatal Parser Crash: Omitting text inside HTML tags will not throw an error or crash the page rendering.
    2. Invisible Inline Tags: Inline tags without content produce zero visual footprint.
    3. Ghost Spacing: Empty block elements (<p>, <div>, <h1>-<h6>) can produce unwanted vertical spacing due to default user-agent stylesheets.
    4. Best Practice: Remove empty and redundant tags during code cleanup and minification to keep DOM trees light and maintain valid semantic structure.
  14. Q2b. What is SGML? Explain how HTML, XML, and XSL are related to SGML and used in web development.20257m

    Module I: Introduction to Web Technologies & Architectures

    What is SGML? Explain how HTML, XML, and XSL are related to SGML and used in web development.

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Answer: SGML and Its Relationship with HTML, XML, and XSL

    1. What is SGML?

    SGML (Standard Generalized Markup Language) is an international standard (ISO 8879:1986) metalanguage used to define descriptive markup languages for electronic documents.

    • SGML separates document structure, content, and presentation.
    • It provides rules for creating custom tags, attributes, and structural rules through a Document Type Definition (DTD).
    • Although powerful and highly flexible, SGML is complex and heavy, making direct interpretation in lightweight web browsers difficult.
                               +------------------------+
                           |         SGML           |
                           | (ISO 8879 Metalanguage)|
                           +-----------+------------+
                                       |
                     +-----------------+-----------------+
                     |                                   |
         (Application of SGML)                 (Subset of SGML)
                     v                                   v
             +---------------+                   +---------------+
             |     HTML      |                   |      XML      |
             | (Fixed Tags)  |                   | (Custom Tags) |
             +---------------+                   +-------+-------+
                                                         |
                                                 (Stylesheet for XML)
                                                         v
                                                 +---------------+
                                                 |      XSL      |
                                                 |  (XSLT/XSL-FO)|
                                                 +---------------+

    2. Relationship with HTML, XML, and XSL

    A. HTML (HyperText Markup Language)

    • Relationship: HTML is an application of SGML. It is defined by a predefined SGML DTD.
    • Characteristics:
      • Has a fixed, predefined set of tags (<h1>, <p>, <a>, <table>).
      • Primarily designed for displaying data and formatting user interfaces in web browsers.
      • More lenient syntax (e.g., closing tags were optional in earlier HTML versions).
    • Role in Web Development: Acts as the standard structural language for all web pages delivered across the internet.

    B. XML (eXtensible Markup Language)

    • Relationship: XML is a simplified, strict subset of SGML designed by the W3C specifically for the World Wide Web.
    • Characteristics:
      • Has no predefined tags; developers create domain-specific tags describing data semantics.
      • Strict syntax rules: all tags must close, case-sensitive, proper nesting, and root element required.
      • Focuses on storing and transporting data, completely independent of presentation.
    • Role in Web Development: Used for data exchange between heterogeneous platforms, web services (REST/SOAP), configuration files, and feeds (RSS).

    C. XSL (eXtensible Stylesheet Language)

    • Relationship: XSL is a family of recommendations written in XML to transform and style XML documents.
    • Major Components:
      1. XSLT (XSL Transformations): Transforms XML documents into HTML, plain text, or another XML structure.
      2. XPath (XML Path Language): Navigates elements and attributes in XML documents.
      3. XSL-FO (XSL Formatting Objects): Formats XML data for output media such as PDF or print.
    • Role in Web Development: Converts raw server-side XML data into styled HTML pages for display in browsers or transforms data between distinct API schemas.

    3. Comparison Table

    Feature SGML HTML XML XSL
    Type Metalanguage Markup Language Simplified Metalanguage / Data format Stylesheet & Transformation language
    Origin ISO 8879 (1986) SGML Application SGML Subset (W3C 1998) XML Application (W3C)
    Tags User-defined via DTD Fixed & Predefined User-defined Predefined XSL elements
    Primary Goal Document definition standard Web page presentation Data storage & transport XML transformation & styling
    Syntax Strictness Highly complex Relaxed / Lenient Very strict (Well-formed) Very strict (Well-formed XML)

    Conclusion

    SGML provided the foundational theory of structured markup. HTML applied SGML for web presentation, while XML simplified SGML for structured data exchange. XSL complements XML by providing the presentation and transformation rules needed to render XML data in modern web environments.

  15. Q2b. Describe the HTML code required for adding a form to a Web page.20197m

    Module I: Introduction to Web Technologies & Architectures

    Describe the HTML code required for adding a form to a Web page.

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Answer: HTML Code and Elements for Adding a Form to a Web Page

    1. Introduction to HTML Forms

    An HTML Form is a section of a document containing interactive controls used to collect user data (such as login credentials, registration details, feedback, or payment inputs) and send that data to a server for processing.

    2. The <form> Element and Core Attributes

    <form action="/submit-handler.php" method="POST" enctype="multipart/form-data">
  <!-- Form Controls Go Here -->
</form>

    Essential Form Attributes:

    • action: Specifies the destination URL (server script, e.g., PHP, Servlet, API endpoint) where the form data is sent upon submission.
    • method: The HTTP transfer method used to send data:
      • GET: Appends form data to the URL query string (e.g., /search?q=java). Used for idempotent searches (not for passwords/sensitive data).
      • POST: Sends form data in the HTTP request body. Used for secure, large, or state-modifying operations (login, registration, payments).
    • enctype: Defines the MIME encoding type of the data:
      • application/x-www-form-urlencoded (default for text).
      • multipart/form-data (mandatory for file uploads).

    3. Major Form Controls and Input Elements

    Form Element Description Code Example
    Text Input Single-line alphanumeric text box <input type="text" name="fullname" required>
    Password Masks characters with dots/asterisks <input type="password" name="pwd">
    Email Validates email syntax <input type="email" name="useremail">
    Radio Button Selects a single option from a group <input type="radio" name="gender" value="male"> Male
    Checkbox Selects multiple independent options <input type="checkbox" name="skills" value="Java"> Java
    Dropdown List Selectable dropdown menu <select name="country"><option value="IN">India</option></select>
    Textarea Multi-line text entry box <textarea name="comments" rows="4"></textarea>
    File Upload Selects local files for upload <input type="file" name="resume">
    Submit Button Submits the form data <input type="submit" value="Submit Form">
    Reset Button Resets form inputs to defaults <input type="reset" value="Clear">

    4. Comprehensive Working HTML Form Example

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Student Registration Form</title>
  <style>
    .form-container { width: 420px; padding: 20px; border: 1px solid #ccc; font-family: Arial, sans-serif; }
    .form-group { margin-bottom: 15px; }
    label { display: block; font-weight: bold; margin-bottom: 5px; }
    input[type="text"], input[type="email"], input[type="password"], select, textarea {
      width: 100%; padding: 8px; box-sizing: border-box;
    }
  </style>
</head>
<body>

<div class="form-container">
  <h2>Student Registration</h2>
  
  <form action="/register" method="POST" enctype="multipart/form-data">
    
    <!-- Text Input with Label -->
    <div class="form-group">
      <label for="name">Full Name:</label>
      <input type="text" id="name" name="student_name" placeholder="Enter full name" required>
    </div>

    <!-- Email Input -->
    <div class="form-group">
      <label for="email">Email Address:</label>
      <input type="email" id="email" name="student_email" placeholder="name@example.com" required>
    </div>

    <!-- Password Input -->
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" id="password" name="student_password" required>
    </div>

    <!-- Radio Buttons -->
    <div class="form-group">
      <label>Gender:</label>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male" style="display:inline;">Male</label>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female" style="display:inline;">Female</label>
    </div>

    <!-- Select Dropdown -->
    <div class="form-group">
      <label for="course">Branch / Course:</label>
      <select id="course" name="branch">
        <option value="CSE">Computer Science & Engineering</option>
        <option value="ECE">Electronics & Communication</option>
        <option value="EE">Electrical Engineering</option>
        <option value="ME">Mechanical Engineering</option>
      </select>
    </div>

    <!-- Textarea -->
    <div class="form-group">
      <label for="address">Address:</label>
      <textarea id="address" name="student_address" rows="3"></textarea>
    </div>

    <!-- Submit & Reset Buttons -->
    <div class="form-group">
      <input type="submit" value="Register Now">
      <input type="reset" value="Reset Form">
    </div>

  </form>
</div>

</body>
</html>
  16. Q2b. What are logical and physical tags in HTML? What is CSS?20207m

    Module I: Introduction to Web Technologies & Architectures

    What are logical and physical tags in HTML? What is CSS?

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Answer: Physical vs Logical Tags in HTML and Introduction to CSS

    1. Physical vs. Logical Tags in HTML

    HTML tags used for formatting text are historically categorized into Physical Tags and Logical Tags:

                                   +-----------------------------+
                               |     HTML FORMATTING TAGS    |
                               +--------------+--------------+
                                              |
                     +------------------------+------------------------+
                     |                                                 |
                     v                                                 v
           +--------------------+                            +--------------------+
           |   PHYSICAL TAGS    |                            |    LOGICAL TAGS    |
           | (Visual Appearance)|                            | (Semantic Meaning) |
           |  <b>, <i>, <u>     |                            | <strong>, <em>     |
           +--------------------+                            +--------------------+

    A. Physical Tags

    • Definition: Physical tags tell the browser strictly how to visually render the enclosed text (its appearance/style) without conveying any semantic meaning, importance, or context.
    • Characteristics: Focused entirely on visual layout; ignored by assistive screen readers in terms of vocal inflection.
    • Examples:
      • <b>Text</b>: Renders text in bold style.
      • <i>Text</i>: Renders text in italicized style.
      • <u>Text</u>: Underlines the text.
      • <s>Text</s> or <strike>: Renders text with a strikethrough line.
      • <tt>Text</tt>: Displays text in fixed-width teletype font.
      • <sub> / <sup>: Subscript and superscript formatting.

    B. Logical Tags (Semantic Tags)

    • Definition: Logical tags describe the semantic meaning, purpose, or structural importance of the enclosed content to the browser, search engines, and screen readers.
    • Characteristics: The browser standardly provides default formatting (e.g., <strong> is bolded, <em> is italicized), but screen readers adjust voice tone and emphasis accordingly.
    • Examples:
      • <strong>Text</strong>: Indicates strong importance or urgency (default rendered as bold).
      • <em>Text</em>: Indicates emphasized stress (default rendered as italic).
      • <code>Text</code>: Defines a snippet of computer code (monospace).
      • <cite>Text</cite>: References the title of a creative work or author.
      • <mark>Text</mark>: Highlights relevant text for reference.
      • <abbr title="World Health Organization">WHO</abbr>: Defines an abbreviation or acronym.

    C. Comparison Table

    Parameter Physical Tags Logical (Semantic) Tags
    Focus Visual appearance and styling Meaning, context, and structural value
    Accessibility (Screen Readers) Treated as normal text without vocal change Read with appropriate vocal stress and emphasis
    SEO Impact Minimal search engine value High value for search engine indexers
    W3C Recommendation Deprecated in modern HTML5 (use CSS instead) Strongly recommended in modern semantic HTML
    Examples <b>, <i>, <u>, <tt>, <big> <strong>, <em>, <code>, <cite>, <abbr>

    2. What is CSS (Cascading Style Sheets)?

    CSS (Cascading Style Sheets) is a style sheet language used to describe the visual presentation, layout, colors, typography, and responsive design of a document written in HTML or XML.

    CSS Rule Syntax:

    /* Selector { Property: Value; } */
h1 {
  color: #b23a2e;
  font-size: 24px;
  text-align: center;
}

    Three Ways to Apply CSS in HTML:

    1. Inline CSS: Applied directly to an element via the style attribute:
      <p style="color: red; font-size: 14px;">Inline Styled Text</p>
    2. Internal (Embedded) CSS: Written inside <style> tags within the <head> section:
      <style>
  body { background-color: #f5f6f2; }
</style>
    3. External CSS (Best Practice): Stored in a separate .css file and linked in <head>:
      <link rel="stylesheet" href="styles.css">

    Key Benefits of CSS:

    • Separation of Content and Design: Keeps HTML clean and easy to maintain.
    • Faster Page Load: External stylesheets are cached by browsers.
    • Responsive Layouts: Media queries (@media) allow dynamic adaptation across mobile, tablet, and desktop viewports.
  17. Q4a. What do you understand by working layer in DHTML? Explain with the help of example.20197m

    Module I: Introduction to Web Technologies & Architectures

    What do you understand by working layer in DHTML? Explain with the help of example.

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Answer: Working with Layers in DHTML

    1. What is a "Layer" in DHTML?

    In Dynamic HTML (DHTML), a Layer refers to an independent, positioning-enabled rectangular content container (typically a <div> element styled with CSS positioning) that exists on its own distinct plane above or below other page content.

    Layers enable overlapping content, 3D depth stacking (zz-indexing), dynamic visibility toggling, and animation across the X,YX, Y coordinate plane without requiring full-page reloads.

                      +-----------------------------------+
                  |        Top Layer (Z-Index: 3)     |
                  |     (Dropdown / Modal / Tooltip)  |
                  +-----------------+-----------------+
                                    |
         +--------------------------v------------------------+
         |              Middle Layer (Z-Index: 2)            |
         |                   (Sidebar / Menu)                |
         +--------------------------+------------------------+
                                    |
+-----------------------------------v-----------------------------------+
|                        Base Layer (Z-Index: 1)                        |
|                         (Main Web Page Text)                          |
+-----------------------------------------------------------------------+

    2. Core CSS & DOM Properties Governing DHTML Layers

    1. position: Enables coordinate positioning (absolute, relative, or fixed).
    2. top, left, right, bottom: Specifies exact 2D pixel coordinates of the layer relative to its container or viewport.
    3. z-index: Specifies the 3D stacking order along the Z-axis. Elements with higher integer values render on top of elements with lower values.
    4. visibility & display: Toggles visual appearance (visibility: visible/hidden or display: block/none).
    5. overflow & clip: Controls whether content overflowing the layer's boundaries is clipped or scrollable.

    3. Working Mechanism of DHTML Layers

    A working DHTML layer is realized through three cooperating layers of technology:

    1. HTML: Defines the layer structure (<div id="myLayer">).
    2. CSS: Establishes initial positioning, dimensions, background color, and z-index.
    3. JavaScript: Dynamically alters style coordinates and visibility properties in response to user events (element.style.left, element.style.display).

    4. Complete Working DHTML Layer Example

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DHTML Layers Demo</title>
  <style>
    body { font-family: Arial, sans-serif; }

    /* Base Layer (Normal Document Flow) */
    .base-content {
      background-color: #ebede7;
      padding: 20px;
      width: 500px;
      border: 1px solid #ccc;
    }

    /* Floating Interactive Layer */
    #popupLayer {
      position: absolute;
      top: 80px;
      left: 120px;
      width: 280px;
      padding: 15px;
      background-color: #ffffff;
      border: 2px solid #b23a2e;
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
      z-index: 100; /* Stacks above base content */
      display: none; /* Initially hidden */
    }
  </style>
</head>
<body>

  <div class="base-content">
    <h2>Main Webpage Content (Base Layer)</h2>
    <p>This text resides on the base layer of the webpage. DHTML layers can overlay this text dynamically.</p>
    
    <button onclick="toggleLayer()">Toggle Floating Layer</button>
    <button onclick="moveLayer()">Move Layer Right</button>
  </div>

  <!-- DHTML Layer -->
  <div id="popupLayer">
    <h3 style="margin-top:0; color:#b23a2e;">Floating DHTML Layer</h3>
    <p>I am an independent layer positioned above the base content using CSS z-index and absolute positioning.</p>
    <button onclick="toggleLayer()">Close Layer</button>
  </div>

  <script>
    const layer = document.getElementById("popupLayer");
    let currentLeft = 120;

    // Toggle Visibility
    function toggleLayer() {
        if (layer.style.display === "block") {
            layer.style.display = "none";
        } else {
            layer.style.display = "block";
        }
    }

    // Dynamic Coordinate Animation
    function moveLayer() {
        if (layer.style.display !== "block") layer.style.display = "block";
        currentLeft += 40;
        layer.style.left = currentLeft + "px"; // Dynamically update X-coordinate
    }
  </script>

</body>
</html>

    5. Applications of DHTML Layers

    • Modal Dialogs and Lightbox Popups
    • Dropdown & Flyout Navigation Menus
    • Floating Tooltips and Context Menus
    • Interactive Draggable Widgets & Games
  18. Q4b. How can you do dragging and dropping data using DHTML? Explain with example.20197m

    Module I: Introduction to Web Technologies & Architectures

    How can you do dragging and dropping data using DHTML? Explain with example.

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Answer: Dragging and Dropping Data Using DHTML / HTML5

    1. Introduction

    Drag and Drop (DnD) is an interactive user interface feature in DHTML/HTML5 that allows a user to click and hold the mouse button over an element, drag it across the screen, and release (drop) it onto a designated target container.

    +-------------------+                                       +-------------------+
|  Draggable Source |                                       |    Drop Target    |
|   (Item Box)      |                                       |     (Bucket)      |
+---------+---------+                                       +---------+---------+
          |                                                           |
          | 1. ondragstart                                            |
          |    (dataTransfer.setData('text', id))                     |
          |==================== [User Drags Item] ===================>|
          |                                                           |
          |                                                           | 2. ondragover
          |                                                           |    (event.preventDefault())
          |                                                           |
          |                                                           | 3. ondrop
          |                                                           |    (dataTransfer.getData('text'))
          v                                                           v

    2. The Drag and Drop Event Cycle

    A. Events on the Draggable Source:

    • dragstart: Fires when the user begins dragging the element. Used to populate the dataTransfer payload.
    • drag: Fires continuously while the element is being dragged.
    • dragend: Fires when the drag operation completes (released or cancelled).

    B. Events on the Drop Target:

    • dragenter: Fires when the dragged item enters the drop zone boundary.
    • dragover: Fires continuously while the dragged item hovers over the drop zone. Must call event.preventDefault() to allow dropping.
    • dragleave: Fires when the dragged item leaves the drop zone boundary.
    • drop: Fires when the dragged element is released onto the drop target.

    3. The DataTransfer Object

    The event.dataTransfer object holds the payload transferred during the drag operation:

    • setData(format, data): Sets the drag data and MIME type (e.g., event.dataTransfer.setData("text/plain", e.target.id)).
    • getData(format): Retrieves the stored data during the drop event.

    4. Complete Working DHTML Code Example

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DHTML Drag and Drop Demo</title>
  <style>
    body { font-family: Arial, sans-serif; }
    
    .container { display: flex; gap: 30px; margin-top: 20px; }

    /* Drop Zone Containers */
    .drop-box {
      width: 220px;
      min-height: 220px;
      padding: 15px;
      border: 2px dashed #5b6472;
      background-color: #f5f6f2;
      border-radius: 8px;
    }

    .drop-box.hovered {
      border-color: #b23a2e;
      background-color: #efe9de;
    }

    /* Draggable Item */
    .drag-item {
      padding: 12px;
      margin: 8px 0;
      background-color: #1f4b43;
      color: #ffffff;
      font-weight: bold;
      border-radius: 4px;
      cursor: grab;
      text-align: center;
    }

    .drag-item:active {
      cursor: grabbing;
      opacity: 0.6;
    }
  </style>
</head>
<body>

  <h2>DHTML Drag and Drop Data Demo</h2>
  <p>Drag items between Box A and Box B:</p>

  <div class="container">
    <!-- Box A -->
    <div id="boxA" class="drop-box" ondragover="allowDrop(event)" ondrop="handleDrop(event)" ondragleave="removeHover(event)">
      <div id="item1" class="drag-item" draggable="true" ondragstart="handleDragStart(event)">
        Item 1: JavaScript
      </div>
      <div id="item2" class="drag-item" draggable="true" ondragstart="handleDragStart(event)">
        Item 2: HTML5 & CSS3
      </div>
    </div>

    <!-- Box B -->
    <div id="boxB" class="drop-box" ondragover="allowDrop(event)" ondrop="handleDrop(event)" ondragleave="removeHover(event)">
      <div id="item3" class="drag-item" draggable="true" ondragstart="handleDragStart(event)">
        Item 3: Java Servlets
      </div>
    </div>
  </div>

  <script>
    // 1. Drag Start: Store element ID in dataTransfer
    function handleDragStart(event) {
        event.dataTransfer.setData("text/plain", event.target.id);
        event.dataTransfer.effectAllowed = "move";
    }

    // 2. Drag Over: Must preventDefault to permit dropping
    function allowDrop(event) {
        event.preventDefault();
        event.currentTarget.classList.add("hovered");
    }

    function removeHover(event) {
        event.currentTarget.classList.remove("hovered");
    }

    // 3. Drop: Retrieve element and append to new parent
    function handleDrop(event) {
        event.preventDefault();
        event.currentTarget.classList.remove("hovered");
        
        const draggedElementId = event.dataTransfer.getData("text/plain");
        const draggedNode = document.getElementById(draggedElementId);
        
        if (draggedNode && event.currentTarget.classList.contains("drop-box")) {
            event.currentTarget.appendChild(draggedNode);
        }
    }
  </script>

</body>
</html>
  19. Q9. Write short notes on the following : (a) HTML commands (b) DHTML dragging and drooping (c) AWT (d) JDBC202014m

    Module I: Introduction to Web Technologies & Architectures

    Write short notes on the following :

    (a) HTML commands
    (b) DHTML dragging and drooping
    (c) AWT
    (d) JDBC

    View this question on its own page →
    Search GoogleAsk AI
    Worked Solution

    Answer: Short Notes on Web & Java Technologies

    (a) HTML Commands (Tags & Elements)

    HTML (HyperText Markup Language) commands (commonly referred to as HTML tags and elements) are syntax keywords enclosed within angle brackets (<tagname>) used to define the structure, content, and hypermedia links of a webpage.

    Core HTML Command Categories:

    1. Document Skeleton Commands:
      • <!DOCTYPE html>: Declares HTML5 document type.
      • <html>, <head>, <body>: Defines the root, metadata, and visible document body.
    2. Text Formatting Commands:
      • <h1> to <h6>: Headings; <p>: Paragraph; <br>: Line break; <hr>: Horizontal rule.
    3. Hyperlinks & Media Commands:
      • <a href="...">: Creates clickable hyperlinks.
      • <img src="..." alt="...">: Embeds images.
    4. Lists & Tables:
      • <ul>, <ol>, <li>: Unordered (bulleted) and ordered (numbered) lists.
      • <table>, <tr>, <th>, <td>: Renders structured tabular data.
    5. Interactive Forms:
      • <form>, <input>, <select>, <button>, <textarea>: Collects user data.

    (b) DHTML Dragging and Dropping

    DHTML (Dynamic HTML) is not a standalone language, but rather the synergistic combination of HTML, CSS, JavaScript, and the Document Object Model (DOM) to create interactive, animated web pages.

    Drag and Drop Mechanism:

    Drag and Drop allows users to click, grab an onscreen element, drag it over a target zone, and drop it.

    [Draggable Element] -- (dragstart) --> [Dragging Over Target] -- (drop) --> [Dropped Element]
 (draggable="true")                     (event.preventDefault())             (dataTransfer)

    Core HTML5 / DHTML Drag-and-Drop Events:

    • dragstart: Fires when the user starts dragging an element. Uses event.dataTransfer.setData("text", target.id) to store data.
    • dragover: Fires continuously when a dragged element is over a valid drop target. Must invoke event.preventDefault() to allow dropping.
    • drop: Fires when the dragged item is released over the drop target. Retrieves data via event.dataTransfer.getData("text").
    <div id="dragItem" draggable="true" ondragstart="event.dataTransfer.setData('text', this.id)">
  Drag Me
</div>
<div id="dropZone" ondragover="event.preventDefault()" ondrop="this.appendChild(document.getElementById(event.dataTransfer.getData('text')))">
  Drop Zone
</div>

    (c) AWT (Abstract Window Toolkit)

    AWT (java.awt) is Java's original, platform-dependent Graphical User Interface (GUI) framework introduced in JDK 1.0.

                                   +-----------------------------+
                               |          Component          |
                               +--------------+--------------+
                                              |
                     +------------------------+------------------------+
                     |                                                 |
                     v                                                 v
           +--------------------+                            +--------------------+
           |  Basic Controls    |                            |     Container      |
           | Button, Checkbox,  |                            | (Panel, Window,    |
           | Label, TextField   |                            |  Frame, Dialog)    |
           +--------------------+                            +--------------------+

    Key Features of AWT:

    1. Heavyweight Components: AWT components rely directly on the underlying operating system's native GUI peer widgets (e.g., a java.awt.Button creates a native Windows button on Windows and a Motif button on Unix).
    2. Container Hierarchy:
      • Frame: Top-level window with a title bar, border, and minimize/maximize buttons.
      • Panel: Space-allocating container used to group components.
    3. Layout Managers: Automatically arrange component geometry (FlowLayout, BorderLayout, GridLayout, GridBagLayout).
    4. Event Delegation Model: Decouples event sources (e.g., Button) from event listeners (ActionListener, MouseListener).

    (d) JDBC (Java Database Connectivity)

    JDBC (java.sql / javax.sql) is the standard Java API specification that enables Java applications to interact independently with relational database management systems (RDBMS like MySQL, Oracle, PostgreSQL).

    +-----------------------+
|   Java Application    |
+-----------+-----------+
            | (JDBC API Calls)
            v
+-----------------------+
|  JDBC DriverManager   |
+-----------+-----------+
            |
            v
+-----------------------+
|   JDBC Driver (MySQL) |
+-----------+-----------+
            | (Database Protocol)
            v
+-----------------------+
|   RDBMS Database      |
+-----------------------+

    Standard 5 Steps to Execute JDBC Operations:

    1. Load Driver Class:
      Class.forName("com.mysql.cj.jdbc.Driver");
    2. Establish Database Connection:
      Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/db", "root", "password");
    3. Create Statement:
      Statement stmt = con.createStatement();
// Or PreparedStatement for parameterized SQL
    4. Execute SQL Query:
      ResultSet rs = stmt.executeQuery("SELECT * FROM students");
while (rs.next()) {
    System.out.println(rs.getInt("roll_no") + " : " + rs.getString("name"));
}
    5. Close Resources:
      rs.close(); stmt.close(); con.close();
Next moduleModule II: Browser & Apache Web Server Architecture; Common Protocols