1.
Remember
a) Define Internet and Extranet.
Internet: A global, public, decentralized network of interconnected computers that use
standardized communication protocols (like TCP/IP) to share information and
resources. It is the massive "network of networks" accessible to anyone with a
connection.
Extranet: A controlled private network that allows secure access to a specific portion
of an organization's internal network to selected external users, such as partners,
vendors, or customers. It is an extension of a company's intranet over the Internet with
strict security and access controls.
b) List devices used to access the Internet.
Personal Computers (Desktops, Laptops)
Smartphones
Tablets
Smart TVs and Streaming Devices
Gaming Consoles (e.g., PlayStation, Xbox)
Servers
Internet of Things (IoT) Devices (e.g., smart speakers, wearables, home appliances)
c) Identify popular HTML tags used to structure a web page.
Tag Purpose
<html> The root element that wraps all content on the entire page.
Contains meta-information about the document, like its title and
<head>
links to scripts & CSS.
Sets the title of the web page, shown in the browser's title bar or
<title>
tab.
Tag Purpose
<body> Contains all the visible content of the web page.
Define HTML headings, with <h1> being the most important
<h1> to <h6>
and <h6> the least.
<p> Defines a paragraph of text.
A generic container used to group content for layout and styling
<div>
purposes.
<a> Defines a hyperlink to link to another web page or resource.
<img> Embeds an image into the web page.
Define unordered (bulleted) lists, ordered (numbered) lists, and
<ul>, <ol>, <li>
list items.
<header> Represents introductory content or a set of navigational links.
<nav> Defines a section of navigation links.
<main> Specifies the main content of a document.
<section> Defines a thematic grouping of content.
<article> Defines independent, self-contained content (e.g., a blog post).
<footer> Defines a footer for a document or section.
d) What is the difference between static and dynamic web pages?
Aspect Static Web Pages Dynamic Web Pages
Content is generated on-the-fly by
Content Pre-built, fixed content
the server or client in response to
Generation stored on the server.
user requests.
Uses server-side languages (PHP,
Technology Used Pure HTML, CSS. Python, ASP.NET) and often a
database.
Highly interactive. Content can
Low interactivity. The
Interactivity change based on user input, time,
same for every user.
or preferences.
Complexity & Simpler and faster to More complex to develop and
Development develop for small sites. requires server-side processing.
Database No interaction with a Directly interacts with databases to
Interaction database. fetch, store, or manipulate data.
A company's "About Us" Facebook news feed, Amazon
Example
page, a portfolio website. product pages, Gmail.
2. Understand
a) Explain the evolution and significance of the Internet and Extranet.
The Internet evolved from ARPANET, a Cold War-era project, into a global
commercial and social platform with the advent of the World Wide Web (WWW) and
web browsers. Its significance is profound: it has revolutionized communication (email,
social media), access to information (search engines), commerce (e-commerce),
entertainment (streaming), and education (online learning), making it a critical
infrastructure for modern society.
The Extranet evolved from the need for businesses to collaborate securely with external
entities without exposing their entire internal network. Its significance lies in enhancing
supply chain management (allowing suppliers to view inventory), improving customer
service (providing clients with support portals), and enabling secure B2B collaboration,
leading to increased efficiency and strengthened partner relationships.
b) Discuss the client-server model with the help of real-world
examples.
The client-server model is a distributed application structure that partitions tasks or
workloads between providers of a resource or service, called servers, and service
requesters, called clients.
How it works: A client (e.g., a web browser) sends a request over a network to a server
(e.g., a web server). The server processes the request, performs the necessary tasks (like
retrieving data from a database), and sends back a response to the client.
Real-world Example 1: Website Browsing. You (the client)
type www.google.com into your browser. Your browser sends a request to Google's
web servers. The servers process the request and send back the HTML, CSS, and
JavaScript files that construct the Google homepage, which your browser then renders.
Real-world Example 2: Email. You use an email client (like Outlook or Gmail's web
app) to view your inbox. The client requests your emails from the email server (e.g.,
Gmail's servers). The server authenticates you, retrieves your messages from its
database, and sends them to your client to display.
c) Describe how CSS enhances the visual presentation of a web page.
CSS (Cascading Style Sheets) separates the presentation of a document from its
structure (defined by HTML). It enhances visual presentation by providing precise
control over:
Layout: Controlling the position of elements (using Flexbox, Grid, floats, and
positioning) to create complex, responsive page structures.
Typography: Defining fonts, sizes, colors, spacing (line-height, letter-spacing), and
alignment of text.
Colors and Backgrounds: Setting text colors, background colors, and background
images for elements.
Spacing: Controlling margins (outer space) and padding (inner space) to create visual
hierarchy and breathing room between elements.
Borders and Effects: Adding borders, shadows, rounded corners, and
animations/transitions to create depth and interactivity.
Without CSS, web pages would be plain text documents with hyperlinks, devoid of any
modern design.
d) Summarize the role of XML in data storage and transport.
XML (eXtensible Markup Language) is a meta-markup language that defines rules for
encoding documents in a format that is both human-readable and machine-readable. Its
primary roles are:
Data Transport: It acts as a universal format for exchanging data between disparate
systems. Because it is plain text and self-describing (tags define what the data is),
systems built on different technologies can share data seamlessly. (e.g., APIs often use
XML or JSON to send data).
Data Storage: It provides a structured way to store configuration data and complex
hierarchical information. Files like configuration settings for software are often stored
in XML format.
Foundation for Other Technologies: Many web technologies are based on XML,
including RSS feeds for news updates, SVG for vector graphics, and XHTML.
3. Apply
a) Demonstrate how to create a static web page using HTML.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my first static web page. It is built using only HTML
.</p>
<img src="image.jpg" alt="A descriptive image" width="300">
<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>
b) Use form elements in HTML to design a simple contact form.
html
<form action="/submit-form" method="post">
<label for="name">Full Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email Address:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Your Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><
br><br>
<input type="submit" value="Send Message">
</form>
c) Apply inline and external CSS styles to modify a basic HTML page.
Inline CSS (within the HTML element):
html
<h1 style="color: blue; text-align: center;">This is a Blue, Centered Heading</h1>
<p style="font-family: Arial; font-size: 18px;">This paragraph has custom font and si
ze.</p>
External CSS (in a separate file, e.g., styles.css):
css
/* styles.css */
body {
background-color: #f0f0f0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
color: darkgreen;
border-bottom: 2px solid black;
}
Linking the External CSS in HTML (<head> section):
html
<head>
...
<link rel="stylesheet" href="styles.css">
</head>
d) Write a simple HTML5 document structure.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Document Structure</title>
</head>
<body>
<header>
<h1>Website Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Main Content Section</h2>
<article>
<h3>Article Title</h3>
<p>This is the content of the article.</p>
</article>
</section>
</main>
<footer>
<p>© 2024 Company Name. All rights reserved.</p>
</footer>
</body>
</html>
4. Analyze
a) Differentiate between HTML and XHTML.
Aspect HTML XHTML
More forgiving. Tags can be
Documen Strict. Requires well-formed
improperly nested or left
t XML. All elements must be
unclosed. Browsers will often
Structure properly nested and closed.
render it anyway.
Case-
Tag Case-sensitive. All elements and
insensitive. <DIV> and <div> ar
Syntax attributes must be in lowercase.
e treated the same.
Attribute values don't always All attribute values must be
Attribute
need quotes. (e.g., <input enclosed in quotes. (e.g., <input
Syntax
type=text>) type="text" />)
All elements must be closed. Void
Void elements
Element elements must be self-closing
(e.g., <br>, <img>, <hr>) do not
Handling with a trailing slash (e.g., <br />,
require a closing slash.
<img />).
Parsed strictly; a single syntax
Parsed with error-correction,
Parsing error can prevent the page from
making it more fault-tolerant.
rendering.
Should be served with
MIME Served with the text/html MIME the application/xhtml+xml MIM
Type type. E type for strict parsing, though
often isn't.
b) Analyze the differences in rendering static vs. dynamic web pages.
The rendering process is fundamentally different:
Static Page Rendering: 1. User requests a page (e.g., about.html). 2. The web server
locates the pre-existing HTML file on its hard drive. 3. The server sends this file directly
to the user's browser. 4. The browser renders it. The content is fixed from the moment
it was created until it is manually edited.
Dynamic Page Rendering: 1. User requests a page (e.g., product.php?id=25). 2. The
web server recognizes this is a script (e.g., PHP) and executes it. 3. The script runs,
often querying a database to get product ID 25. 4. The script takes the data, inserts it
into an HTML template, and generates a complete HTML page. 5. This newly
generated HTML is sent to the user's browser. 6. The browser renders it. The content is
generated uniquely for that specific request.
c) Compare the structure and role of HTML vs. XML.
Aspect HTML XML
To display data and
Primary To store and transport data. It focuses
define the structure and
Role on what data is.
content of a web page.
Has a predefined set of
Tag Has no predefined tags. The author
tags with specific
Predefinit defines their own tags specific to their
meanings (<p>, <h1>,
ion needs.
<table>).
Syntax Forgiving syntax (loose Extremely strict syntax. It must be "well-
Strictness parsing). formed" to be parsed correctly.
Nature A presentational language. A data-descriptive language.
Error Browsers will render even Applications will stop processing if an
Handling malformed HTML. XML document is not well-formed.
Aspect HTML XML
<message><to>Alice</to><from>Bob</
Example <b>This is bold text</b>
from><body>Hello!</body></message>
d) Examine how forms and CSS work together.
Forms provide the functional skeleton for user input (text fields, buttons, dropdowns),
while CSS provides the visual styling and layout that makes the form usable and
appealing. They work together symbiotically:
CSS enhances usability: It can style input fields to show focus (e.g., a blue glow when
you click into a box), provide visual feedback for valid/invalid entries (green
checkmarks, red X's), and style buttons to look clickable.
CSS controls layout: Using CSS techniques like Flexbox or Grid, form elements can
be arranged in a logical, accessible, and responsive layout (e.g., labels above inputs on
mobile, beside them on desktop).
CSS creates a theme: Forms can be styled to match the overall look and feel of the
website, creating a cohesive and professional user experience, which is crucial for
things like checkout pages where trust and ease-of-use are paramount.
5. Evaluate
a) Justify the importance of using CSS over inline formatting for large
websites.
Using external CSS is critically important for maintaining large websites for three key
reasons:
1. Consistency and Branding: A single CSS file (or a set of them) defines the style for
the entire site. Changing the primary color or font only requires an edit in one place,
ensuring every page updates automatically. With inline styles, this change would
require manually editing thousands of HTML files, which is error-prone and
impractical.
2. Maintainability and Efficiency: It separates content (HTML) from presentation
(CSS). Developers and designers can work independently. The HTML code is cleaner
and easier to read without being cluttered with style attributes, making debugging
faster.
3. Performance: External CSS files are cached by the browser. On a large site with many
pages, the user downloads the CSS once. On subsequent page visits, only the HTML is
downloaded, drastically improving page load times and reducing bandwidth usage.
Inline styles are repeated in every HTML file, increasing load times.
b) Evaluate the impact of using dynamic web pages over static ones for
an e-commerce website.
Using dynamic web pages is not just beneficial but essential for an e-commerce
website.
Benefits:
o Personalization: Dynamic pages can display user-specific content like
"Recommended for You," past orders, and saved carts.
o Real-time Data: Product availability, prices, and promotions are fetched from a
database in real-time, preventing the display of outdated information.
o Shopping Cart and Checkout: These are inherently dynamic functionalities that
require server-side processing to manage user state and transactions.
o Content Management: A dynamic site powered by a CMS allows non-technical staff
to easily add, remove, or edit products without touching any HTML code.
Challenges: They are more complex and expensive to develop and host due to the need
for server-side programming and databases. However, for e-commerce, the benefits so
overwhelmingly outweigh the challenges that static pages are not a viable option.
c) Assess the benefits and challenges of the client-server model in a
school management system.
Benefits:
o Centralized Management: All data (grades, attendance, student records) is stored on
central servers, making it easy to backup, secure, and update. A change (e.g., a student's
address) is instantly available everywhere.
o Controlled Access: User roles and permissions can be managed on the server (e.g.,
teachers can enter grades, students can only view them, parents can view attendance).
o Scalability: The system can be scaled by upgrading server hardware to accommodate
more users (students, teachers) without needing to upgrade every individual client
computer.
Challenges:
o Single Point of Failure: If the central server goes down, the entire system becomes
unavailable for all users until it is fixed.
o Network Dependency: The system requires a reliable network connection. If the
network fails, clients cannot access the server and its resources.
o Cost and Maintenance: Setting up and maintaining powerful servers and network
infrastructure requires specialized IT staff and involves significant ongoing costs.
6. Create
a) Design a multi-section webpage using HTML5 and CSS for a
personal portfolio.
(This is a conceptual structure; the full code would be lengthy)
HTML (index.html):
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jane Doe | Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<p>Web Developer & Designer</p>
</header>
<nav>...</nav>
<section id="about">
<h2>About Me</h2>
<p>...</p>
</section>
<section id="projects">
<h2>My Projects</h2>
<div class="project">...</div>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form>...</form>
</section>
<footer>...</footer>
</body>
</html>
CSS (style.css):
css
body { font-family: Arial, sans-serif; margin: 0; }
header { background-color: #333; color: white; text-align: center; padding: 2rem; }
#about, #projects, #contact { padding: 2rem; }
.project { border: 1px solid #ccc; padding: 1rem; margin: 1rem 0; }
/* Additional styles for layout, colors, etc. */
b) Create a form-based HTML page for user registration.
html
<!DOCTYPE html>
<html>
<head>
<title>User Registration</title>
</head>
<body>
<h2>Register an Account</h2>
<form>
<label for="username">Username:*</label>
<input type="text" id="username" name="username" required><br><br>
<label for="email">Email:*</label>
<input type="email" id="email" name="email" required><br><br>
<label for="pwd">Password:*</label>
<input type="password" id="pwd" name="pwd" minlength="8" required><br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob"><br><br>
<label for="avatar">Profile Picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"><br>
<br>
<input type="submit" value="Register">
</form>
</body>
</html>
c) Build a composite web application diagram.
Client Tier: The user's web browser that renders the interface.
Web Server Tier: Handles HTTP requests, serves static files (CSS, images), and often
passes dynamic requests to the application server.
Application Server Tier: Contains the business logic, processes requests, interacts
with the database, and generates dynamic HTML.
Database Tier: Stores and manages the application's data persistently.
d) Develop an XML schema to represent a simple student gradebook
structure.
XML Document (grades.xml):
xml
<?xml version="1.0" encoding="UTF-8"?>
<gradebook>
<student id="S12345">
<name>Alice Smith</name>
<course code="CS101">
<title>Introduction to Programming</title>
<grade>A</grade>
<percentage>92</percentage>
</course>
<course code="MATH202">
<title>Calculus II</title>
<grade>B+</grade>
<percentage>88</percentage>
</course>
</student>
<student id="S67890">
<name>Bob Johnson</name>
<course code="CS101">
<title>Introduction to Programming</title>
<grade>B</grade>
<percentage>85</percentage>
</course>
</student>
</gradebook>
