Class 11 Computer Science Unit 6: Web Technology I CDC Code: Com. 4271 8 Credit Hours | Board Weight: ~6 Marks

Unit 6: Web Technology I - HTML5 & CSS3 Notes

Internet architecture, WWW, DNS, HTTP/HTTPS, HTML5 semantic structure, tables, forms, multimedia tags, CSS styling methods, and the CSS box model.

1. Internet & Web Concepts
  • Internet: A global network of interconnected computer networks utilizing the standardized TCP/IP protocol suite.
  • WWW (World Wide Web): An information space of interconnected hypertext documents and multimedia resources accessed via the Internet, invented by Sir Tim Berners-Lee in 1989.
  • DNS (Domain Name System): The "phonebook" of the Internet; translates human-friendly domain names (e.g. neb.gov.np) into machine IP addresses (e.g. 103.240.120.15).
  • HTTP vs HTTPS: Hypertext Transfer Protocol. HTTPS encrypts data in transit using SSL/TLS encryption for secure banking, passwords, and personal transactions.
2. HTML5 Semantic Elements & Tags

Complete HTML5 Webpage Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Registration Form</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .form-group { margin-bottom: 12px; }
        label { display: inline-block; width: 120px; font-weight: bold; }
        input[type="text"], input[type="email"] { padding: 6px; width: 220px; }
    </style>
</head>
<body>
    <h2>NEB Class 11 Student Registration Form</h2>
    <form action="submit.php" method="POST">
        <div class="form-group">
            <label for="name">Full Name:</label>
            <input type="text" id="name" name="fullname" required>
        </div>
        <div class="form-group">
            <label for="email">Email Address:</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label>Gender:</label>
            <input type="radio" id="m" name="gender" value="Male"> <label for="m" style="width:auto;">Male</label>
            <input type="radio" id="f" name="gender" value="Female"> <label for="f" style="width:auto;">Female</label>
        </div>
        <div class="form-group">
            <input type="submit" value="Register Now">
            <input type="reset" value="Clear Form">
        </div>
    </form>
</body>
</html>
3. CSS (Cascading Style Sheets) & Box Model

Three Ways of Inserting CSS:

  1. Inline CSS: Applied directly inside the HTML opening tag using the style attribute: <p style="color: blue;">
  2. Internal / Embedded CSS: Written inside the <style> element inside the <head> section of the document.
  3. External CSS: Stored in an external .css file and linked using <link rel="stylesheet" href="style.css"> (best for multi-page websites).

The CSS Box Model:

Every element in a webpage is rendered as a rectangular box comprising four concentric layers:

  • Content: The innermost area where text and images appear.
  • Padding: Transparent space clearing the area immediately surrounding the content.
  • Border: A visible boundary wrapping around the padding and content.
  • Margin: Transparent space clearing the area outside the border, separating it from neighboring elements.