optional · CSS study notes
P-II · VI. Web Engineering & Technologies
CSS Computer Science (Optional) — Paper-II, Section-B, Topic VI. Index for Web Engineering & Technologies. Every syllabus item has its own page with structured notes, code examples, model answers, past-paper questions, MCQ traps and a Self-Check with answers. Standard reference: Kappel, Pröll, Reich & Retschitzegger, Web Engineering.
🧭 How the Topics Fit Together
graph LR
A["Web engineering + modeling"] --> B["Requirements: types and RE process"]
B --> C["Architecture: styles, components, layers, integration, data"]
C --> D["Client side: HTML, CSS, JS, DOM, XML"]
C --> E["Server side: PHP, APIs"]
D --> F["Process and methodologies"]
E --> F
F --> G["Deployment and promotion"]
G --> H["Issues: accessibility, testing, performance, operation, maintenance, security"]
H --> B
📚 Syllabus Pages (in syllabus order)
I. Foundations and Requirements
II. Markup and Architecture
III. Web Technologies
IV. Process, Deployment and Issues
📌 Past CSS Paper Frequency (verified 2017–2021)
| Year | Web Engineering questions | Page |
|---|---|---|
| 2017 | localStorage & sessionStorage, HTML5 application cache, manifest file, Web Worker · SVG and its advantages over JPEG/GIF · Non-breaking space in HTML | 18, 5 |
| 2018 | Three-tier architecture (presentation, business logic, data access) · XHTML vs XML · Agile vs Waterfall for web application development | 9, 15, 21 |
| 2019 | Cloud solution for an advertising company's web applications — justify with example · Role of validation in RE · Functional vs non-functional requirements (web) | 22, 4, 3 |
| 2020 | "Web engineering is more challenging than traditional software engineering" — argue (7) · Role of V&V in RE (6) · FR and NFR in web application development (7) | 1, 4, 3 |
| 2021 | Analyse HTML code and draw the resulting table · Role of RE in web engineering + list FR/NFR for a website (5) · Security mechanisms for encrypting website content, explain one (6) | 5, 3, 27 |
Web Engineering is Question 7 or 8 of Paper-II every year (one full 20-mark question). Requirements (FR/NFR, V&V) appeared in three consecutive years (2019–2021). Papers from 2016 and 2022 onward are worth checking directly on FPSC or past-paper sites.
🔥 High-Yield Ranking
| Priority | Topic | Why |
|---|---|---|
| 🔴 Must | Requirements: FR vs NFR, role of RE, V&V (pages 3–4) | Asked 2019, 2020, 2021 |
| 🔴 Must | HTML + client-side/HTML5 features (pages 5, 18) | 2017 and 2021; code-writing questions |
| 🔴 Must | Layered/three-tier architecture, MVC, JSP models (pages 6, 9) | 2018; basis of any architecture answer |
| 🟠 High | Security and encryption (page 27) | 2021 |
| 🟠 High | Methodologies: Agile vs Waterfall (page 21) | 2018 |
| 🟠 High | Deployment and cloud (page 22) | 2019 |
| 🟠 High | XML/XHTML (pages 15, 18) | 2018 |
| 🟡 Medium | CSS, JavaScript, DOM, PHP (pages 12–14, 19) | Syllabus-named; likely code questions |
| 🟡 Medium | Intro to web engineering (page 1) | 2020 "argue" question |
| 🟢 Base | Modeling, components, classifications, integration, data-aspect, RSS, API, testing, performance, accessibility, maintenance | Short notes and supporting points |
✍️ Answer-Writing Strategy for Web Engineering
- Define in one line, then use a comparison table (FR vs NFR, Agile vs Waterfall, XML vs XHTML, SOAP vs REST).
- Always give a concrete website example (university admission portal, e-commerce store, banking app) — generic answers score less.
- Write code neatly for HTML/CSS/JS/PHP questions, with comments.
- Draw diagrams: three-tier, MVC, request lifecycle, TLS handshake, RE process cycle.
- Make NFRs measurable ("≤ 2 s for 95% of requests", "99.9% uptime").
✅ Self-Test (with Answers)
Q1. Distinguish the roles of HTML, CSS and JavaScript in a web page.
Ans: HTML defines structure and content (headings, paragraphs, forms); CSS defines presentation (colours, layout, fonts, responsiveness); JavaScript defines behaviour (validation, DOM updates, events, AJAX).
Q2. What is the difference between client-side and server-side programming? Give one language each.
Ans: Client-side code runs in the browser, is visible to users and handles UI and interactivity (JavaScript). Server-side code runs on the server, is hidden, and handles business logic, databases and security (PHP). Client-side checks must always be repeated on the server.
Q3. Explain what the DOM is and why JavaScript relies on it.
Ans: The DOM is a tree of objects representing the HTML document with a standard API. JavaScript reads and modifies the page (text, attributes, styles, adding/removing elements) through DOM nodes, which the browser then re-renders.
Q4. Distinguish SQL injection, XSS and CSRF.
Ans: SQL injection inserts malicious SQL through input to manipulate the database (defence: prepared statements). XSS injects scripts that run in other users' browsers (defence: output encoding, CSP). CSRF tricks a logged-in user's browser into sending unwanted requests (defence: anti-CSRF tokens, SameSite cookies).
Q5. What does n-tier architecture achieve, and what are its typical layers?
Ans: It separates concerns so each tier can be developed, secured and scaled independently. Typical layers: presentation (browser/UI), business logic (application server), data access (database), often with extra tiers for caching, integration and services.
Q6. Differentiate functional and non-functional requirements with one website example each.
Ans: Functional — what the system does: "Applicants can upload documents." Non-functional — how well: "Pages load within 2 seconds for 95% of requests; 99.9% uptime."
Q7. Verification vs validation in RE?
Ans: Verification asks "are we building the product right?" — requirements are consistent, complete, unambiguous (reviews, inspections). Validation asks "are we building the right product?" — requirements reflect real stakeholder needs (prototypes, walkthroughs).
Q8. Why is Agile usually preferred to Waterfall for web applications?
Ans: Web requirements are volatile and markets move fast; Agile delivers working increments every few weeks, involves the client continuously, and absorbs change cheaply, whereas Waterfall fixes requirements upfront and reveals problems late.
Q9. Differentiate XHTML and XML.
Ans: XML is a meta-language for defining any markup to store/transport data with user-defined tags; XHTML is one XML application — HTML with strict XML syntax and a fixed tag set for displaying pages. Every XHTML document is XML, not vice versa.
Q10. How does HTTPS protect website content?
Ans: TLS authenticates the server with a CA-signed certificate, uses asymmetric key exchange to agree a secret session key, then encrypts all HTTP traffic with fast symmetric encryption and integrity checks — preventing eavesdropping, tampering and impersonation.