5. HTML (HyperText Markup Language)

CSS Optional — Paper-II, Section-B · P-II.VI.5 · Asked in 2017 (non-breaking space; HTML5 storage/app cache/manifest/Web Workers; SVG) and 2021 (analyse table code and draw the resulting table). Expect code-reading and code-writing questions.

1. Definition and History

• HTML is the standard markup language that defines the structure and content of web pages using elements (tags). It is not a programming language — it has no logic or computation.
• HyperText = text with links to other text; Markup = tags that annotate content.

2. Basic Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome</h1>
  <p>This is a <a href="about.html">link</a>.</p>
  <script src="app.js"></script>
</body>
</html>

• <!DOCTYPE html> tells the browser to use standards mode (HTML5).
• head holds metadata (title, charset, CSS links, SEO meta tags); body holds visible content.

3. Elements, Tags and Attributes

• Element = start tag + content + end tag, e.g. <p>Hello</p>. Empty (void) elements have no content/end tag: br, img, hr, input, meta, link.
• Attributes give extra information in the start tag: <img src="logo.png" alt="Logo" width="100">. Global attributes: id, class, style, title, lang.
• Block-level elements start on a new line and take full width (div, p, h1–h6, ul, table, form). Inline elements flow within text (span, a, img, strong, em).

4. Common Tags

5. Tables — rowspan and colspan (CSS 2021-type)

<table border="1">
  <tr><th colspan="3">Timetable</th></tr>
  <tr><th>Day</th><th>9 AM</th><th>10 AM</th></tr>
  <tr><td rowspan="2">Mon</td><td>DB</td><td>Web</td></tr>
  <tr><td colspan="2">DIP Lab</td></tr>
</table>

Resulting table (drawn):

+-------------------------+
|        Timetable        |   <- one cell spanning 3 columns
+-------+--------+--------+
|  Day  |  9 AM  | 10 AM  |
+-------+--------+--------+
|       |   DB   |  Web   |
|  Mon  +--------+--------+   <- Mon spans 2 rows
|       |     DIP Lab     |   <- spans 2 columns
+-------+-----------------+

Method: draw a grid with the maximum number of columns; place cells row by row; a rowspan cell "occupies" the same column in the rows below, so those rows start one column later.

6. Forms and GET vs POST

<form action="register.php" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <input type="password" name="pwd" minlength="8">
  <select name="city"><option>Karachi</option><option>Lahore</option></select>
  <input type="radio" name="gender" value="M"> Male
  <input type="checkbox" name="terms"> I agree
  <button type="submit">Register</button>
</form>

HTML5 input types: email, number, date, tel, url, range, color, search, file; attributes required, pattern, placeholder, min/max give built-in validation.

7. Character Entities — Non-Breaking Space (CSS 2017)

• Browsers collapse multiple spaces into one and may break lines at any space.
•   inserts a non-breaking space: a space that (1) is not collapsed and (2) prevents a line break between the words it joins.
• Example: Rs. 500 keeps "Rs." and "500" on the same line; 10 km; Mr. Ali. A   B shows three visible spaces.
• Other entities: < (<), > (>), & (&), " ("), © (©).

8. HTML5 Features (summary; details on the Client-Side Programming page)

• Semantic elements; native audio/video; canvas and inline SVG; new form input types.
• APIs: Web Storage (localStorage, sessionStorage), Web Workers, Geolocation, Drag-and-Drop, WebSockets, History API; Application Cache/manifest (now deprecated → Service Workers).

9. SVG vs JPEG/GIF (CSS 2017)

SVG (Scalable Vector Graphics) is an XML-based vector image format. Advantages over raster JPEG/GIF:

1. Scales infinitely without pixelation (logos, icons, maps look sharp on any screen).
2. Small file size for simple graphics.
3. Text-based XML → editable in any text editor, searchable, indexable by search engines, compresses well with gzip.
4. Styleable and scriptable with CSS and JavaScript (hover effects, animations, interactive charts).
5. Accessible — can include title/description text.
6. Supports transparency (JPEG cannot) and far more colours than GIF's 256.

Limitation: unsuitable for photographs (JPEG is better).

---

🎯 CSS Exam Angle

Write code by hand neatly with indentation. For "draw the table" questions, draw the grid and label spanned cells. For short notes (nbsp, SVG, HTML5 features) give definition → example code → advantages.

📌 Past CSS Paper Frequency

⚠️ MCQ Traps

• HTML is a markup language, not a programming language.
• br, img, hr, input are empty elements.
• alt on img is for accessibility and shown if the image fails; title is a tooltip.
• colspan merges columns (horizontally); rowspan merges rows (vertically).
• target="_blank" opens a link in a new tab.
• HTML5 DOCTYPE is simply <!DOCTYPE html>.

---

✅ Self-Check (with Answers)

Q1. Write HTML for an ordered list of three Pakistani cities starting at number 5.

Ans: <ol start="5"><li>Karachi</li><li>Lahore</li><li>Islamabad</li></ol>

Q2. What will <p>Hello World</p> display, and how would you keep all five spaces?

Ans: "Hello World" — spaces collapse to one. Use Hello     World (or the pre element).

Q3. A table row has td rowspan="3" in the first column. How many cells should the next two rows contain if the table has 4 columns?

Ans: 3 cells each — the first column is already occupied by the spanned cell.

Q4. Why should a login form use POST instead of GET?

Ans: GET places the username and password in the URL, where they are visible, stored in browser history and server logs, and may be cached; POST sends them in the request body (and must also be over HTTPS).

Q5. Name four HTML5 semantic elements and one benefit of using them.

Ans: header, nav, article, footer (also main, section, aside). Benefits: better accessibility for screen readers, better SEO, and more readable code.

Q6. When is SVG a poor choice?

Ans: For photographs and complex images with many colour gradients — the vector description becomes huge and slow; JPEG/WebP are better.

📜 Past-Paper Questions & MCQs (CSS 2016–2026)

2017 · Paper-II · Q8(a) · 8 marks

Q. Explain the following web concepts: (i) localStorage and sessionStorage objects (ii) Application cache in HTML5 (iii) Manifest file (iv) Web Worker.

Ans.

• (i) localStorage and sessionStorage (HTML5 Web Storage): store key/value pairs in the browser (about 5–10 MB, much more than cookies, and not sent to the server).
  • localStorage: persists with no expiry, even after the browser is closed.
  • sessionStorage: lasts only for the session (the tab or window) and is cleared when it is closed.
  • Both are limited to the same origin. API: localStorage.setItem('k','v'), getItem('k'), removeItem('k').
• (ii) Application cache: lets a web application work offline by storing the files it needs (HTML, CSS, JS, images) in the browser. Benefits: offline browsing, faster loading and less server load. (AppCache is now deprecated and replaced by Service Workers.)
• (iii) Manifest file: a text file (.appcache) linked from the page with <html manifest="cache.manifest">. It starts with CACHE MANIFEST and has sections: CACHE: (files to store), NETWORK: (files that always need the network) and FALLBACK: (substitute pages when offline).
• (iv) Web Worker: a JavaScript script that runs in a background thread, so heavy computation does not freeze the page. It cannot access the DOM and talks to the main page with postMessage() and onmessage.

2017 · Paper-II · Q8(b) · 6 marks

Q. What is SVG? What are the advantages of SVG over JPEG or GIF?

Ans.

• SVG (Scalable Vector Graphics) is an XML-based format that describes images with shapes, paths and text (vector graphics), and is part of HTML5.
• Advantages over JPEG and GIF (raster formats):
  • scalable: no loss of quality at any size or zoom (resolution independent)
  • small files for logos, icons and diagrams
  • text-based: searchable, editable in any text editor and compresses well
  • interactive and animated: styled with CSS and scripted with JavaScript
  • supports transparency and is accessible (text inside is readable)
• Limit: not suited to photographs (use JPEG).

2017 · Paper-II · Q8(c) · 6 marks

Q. Explain the non-breaking space in HTML with an example.

Ans.

• HTML collapses several spaces into one and may break a line at any space. The non-breaking space   is a special entity that keeps a space visible and prevents a line break at that point.
• Examples:

<p>Hello&nbsp;&nbsp;&nbsp;World</p>      <!-- shows three spaces -->
<p>Price: 500&nbsp;PKR</p>               <!-- "500" and "PKR" stay on the same line -->

2021 · Paper-II · Q8(a) · 8 marks

Q. Analyse the code and draw the resulting table.

Ans. The table has 4 columns. colspan merges cells across columns and rowspan merges them down rows.

+-----+---------------------+
|  1  |          2          |                       row 1
+-----+----------+----------+
|     |    4     |    5     |                       row 2
|  3  +----+-----+----------+
|     | 6  |  7  |    18    |                       row 3
+-----+----+-----+----------+
|        9         |  (empty)                       row 4
+-----+------------+--------+
| 10  |           11        |                       row 5
+-----+----+-------+--------+
| 12  | 13 |  14   | (empty)                        row 6
+-----+----+-------+--------+
| 15  |   16       |   17   |                       row 7
| (rowspan 2)               |

• Row 2: cell 3 spans rows 2–3 in column 1, and cell 4 spans columns 2–3. Row 3 therefore starts at column 2 (6, 7, 18). Row 4: cell 9 spans three columns, leaving the last empty. Row 5: 10 then 11 spanning three columns. Row 6: only three cells, so the last column is empty. Row 7: 15 has rowspan="2", but there is no row 8, so the browser lets it occupy only row 7.

MCQs

2025 P-II · Q16. Which error is invoked when the SQLTransaction callback does not execute?

• (A) INVALID_ACCESS_ERR
• (B) UNKNOWN_ERR ✅
• (C) TIMEOUT_ERR
• (D) INVALID_STATE_ERR
• Answer: (B) UNKNOWN_ERR (best reading).
• Why: in Web SQL, UNKNOWN_ERR means the transaction failed for a reason unrelated to the database itself and not covered by another error code, such as a callback that could not run. TIMEOUT_ERR is for a lock that could not be obtained in time.
• Note: Web SQL is obsolete, and this key is my best reading of the specification.