This chapter is built from the official PCTB textbook Computer Science and Entrepreneurship, Class 9 (based on the Revised National Curriculum of Pakistan 2023, approved by the Punjab Curriculum and Textbook Board, Lahore). The exercise questions below are the book's own exercise questions; the answers are model answers written for this guide.
Chapter titles and exercise questions are taken from the official book's contents and exercise pages. No page numbers are claimed for individual questions.
HTML (HyperText Markup Language) gives a web page its structure. A basic page has <html>, a <head> (title and metadata) and a <body> (what the visitor sees). Most tags come in pairs, for example <p>...</p> for a paragraph.
Common tags: <h1>–<h6> headings, <a href="..."> for a hyperlink, <img> for an image, <ul> with <li> for an unordered (bulleted) list, <ol> for an ordered list, <table> for a table, <hr> for a horizontal line, and <br> for a line break. An HTML comment is written <!-- comment --> and is not shown on the page.
ایچ ٹی ایم ایل ویب پیج کو ساخت دیتا ہے۔ بنیادی پیج میں html، head (عنوان اور معلومات) اور body (جو دیکھنے والا دیکھتا ہے) ہوتا ہے۔ زیادہ تر ٹیگز جوڑوں میں آتے ہیں جیسے پیراگراف کے لیے p۔ عام ٹیگز: سرخیوں کے لیے h1 تا h6، لنک کے لیے a، تصویر کے لیے img، غیر ترتیب شدہ فہرست کے لیے ul، ترتیب شدہ کے لیے ol، جدول کے لیے table، افقی لکیر کے لیے hr اور تبصرے کے لیے جو پیج پر نظر نہیں آتا۔
CSS (Cascading Style Sheets) controls how a page looks: colours, fonts, spacing and layout. A CSS rule has the form selector { property: value; } — for example p { color: blue; } makes all paragraphs blue. Note the colon after the property and the semicolon after the value.
Three selector types are used most: the element selector (p, h1) styles every element of that type; the class selector (.note) styles every element with class="note"; the id selector (#header) styles the single element with that id. Inline styles use the style attribute, for example <p style="color:red;">.
سی ایس ایس پیج کی شکل طے کرتا ہے: رنگ، فونٹ، فاصلہ اور ترتیب۔ سی ایس ایس اصول کی صورت ہے: سلیکٹر { خاصیت: قدر؛ } مثلاً p { color: blue; } تمام پیراگراف نیلے کر دیتا ہے۔ تین عام سلیکٹر ہیں: ایلیمنٹ سلیکٹر جو اس قسم کے ہر ایلیمنٹ پر اثر کرتا ہے، کلاس سلیکٹر جو مخصوص کلاس والے ایلیمنٹس پر، اور آئی ڈی سلیکٹر جو صرف ایک ایلیمنٹ پر۔ ان لائن اسٹائل کے لیے style ایٹریبیوٹ استعمال ہوتا ہے۔
JavaScript makes pages interactive: it can react to clicks, check what a user typed, change text on the page, and show or hide things without reloading. A variable stores a value (for example let name = "Ali";), a function is a reusable block of code, and an event (like a click) triggers code to run.
JavaScript works with HTML and CSS as a team: HTML is the skeleton, CSS is the appearance, JavaScript is the behaviour. A responsive page adjusts its layout to the screen size, usually with CSS, while JavaScript handles interaction on every screen.
جاوا اسکرپٹ پیج کو انٹرایکٹو بناتا ہے: یہ کلک پر ردعمل دے سکتا ہے، صارف کی لکھی ہوئی چیز جانچ سکتا ہے اور پیج کو دوبارہ لوڈ کیے بغیر تبدیل کر سکتا ہے۔ ویری ایبل قدر محفوظ کرتا ہے، فنکشن دوبارہ استعمال ہونے والا کوڈ ہے اور ایونٹ جیسے کلک کوڈ کو چلاتا ہے۔ ایچ ٹی ایم ایل ڈھانچہ، سی ایس ایس شکل اور جاوا اسکرپٹ رویہ ہے — تینوں مل کر مکمل ویب پیج بناتے ہیں۔
To start web development you need only two tools: a text editor (for example VS Code) to write code, and a browser to test it. Save the file with a .html extension, open it in the browser, and refresh after every change. Organise a project in folders: one for pages, one for styles, one for images.
Build in this order: (1) write the HTML structure with headings, paragraphs, an image and a link; (2) add CSS for colours and layout; (3) add a little JavaScript for interaction; (4) test on a phone-sized screen as well as a computer screen, and fix what breaks.
ویب ڈویلپمنٹ شروع کرنے کے لیے صرف دو اوزار چاہییں: ٹیکسٹ ایڈیٹر کوڈ لکھنے کے لیے اور براؤزر جانچنے کے لیے۔ فائل کو .html کے ساتھ محفوظ کریں، براؤزر میں کھولیں اور ہر تبدیلی کے بعد ریفریش کریں۔ منصوبے کو فولڈرز میں ترتیب دیں: پیجز، اسٹائلز اور تصاویر الگ الگ۔ ترتیب یہ ہے: پہلے ایچ ٹی ایم ایل ساخت، پھر سی ایس ایس، پھر تھوڑا جاوا اسکرپٹ، اور آخر میں موبائل اور کمپیوٹر دونوں پر جانچ۔
اس chapter کی exercise میں book کے MCQs, short questions اور long questions ہیں — تمام سوال کتاب کی exercise کے ہیں, جواب کے ساتھ.
1. Which of the following tag is not a correct HTML tag?
⚠️ Note: اس سوال کے دیے گئے options میں سے کوئی ایک درست جواب نہیں ہے (یہ کتاب کی غلطی لگتی ہے — چاروں options درست HTML tags ہیں). اس لیے اس MCQ پر کوئی option mark نہیں کیا گیا; نیچے وضاحت پڑھو.
Wazahat: All four are correct HTML tags — <div>, <span>, <head> and <footer> are all valid — so no printed option is the 'incorrect' one. This looks like an error in the book's question, so no option is marked; see the note on the question.
2. What does CSS stand for?
Answer: (a) — CSS stands for Cascading Style Sheets.
3. Which of the following tag is used to create a hyperlink in HTML?
Answer: (b) — The <a> tag creates a hyperlink; <link> links external resources like stylesheets.
4. Which HTML attribute is used to define inline styles?
Answer: (b) — The style attribute defines inline styles.
5. Which of the following is the correct syntax for a CSS rule?
Answer: (a) — The correct CSS rule syntax is selector {property: value;}.
6. In HTML, which markup is used for comments?
Answer: (d) — HTML comments are written <!-- comment -->.
7. Which HTML tag is used to create an unordered list?
Answer: (b) — The <ul> tag creates an unordered (bulleted) list; <li> marks each item.
8. Which tag is used to display a horizontal line in HTML?
Answer: (b) — The <hr> tag displays a horizontal line.
Answer: The <head> tag holds information about the page that is not displayed: the title, character set, links to stylesheets and scripts.
Answer: An ordered list (<ol>) shows items numbered (1, 2, 3); an unordered list (<ul>) shows items with bullets. Both use <li> for each item.
Answer: Write an HTML comment as <!-- your comment -->. It is ignored by the browser and does not appear on the page.
Answer: CSS can be applied three ways: inline (style attribute on one element), internal (a <style> block in the <head>), and external (a separate .css file linked with <link>).
Answer: Include JavaScript with a <script> element: either <script> code </script> inside the page, or <script src="file.js"></script> for an external file, usually near the end of the body or in the head.
Answer: The syntax is <a href="page.html">Link text</a> — the href attribute gives the destination and the text between the tags is what the visitor clicks.
Answer: The <div> tag is a generic block container: it groups other elements together so they can be styled or positioned as one section.
Answer: The <table> tag creates a table of rows and columns for tabular data, using <tr> for rows, <th> for headings and <td> for data cells.
Answer: The CSS box model says every element is a box made of content, padding (space inside the border), border, and margin (space outside the border).
Answer: A development environment needs: a text editor or IDE (for example VS Code) to write code with colour highlighting and error hints; a web browser (Chrome/Firefox) to run and test pages, using its developer tools to inspect elements and find errors; and a file system organised by project (folders for pages, styles, images). Optional but useful: a local server for testing, version control (Git), and an internet connection for references. Steps: install the editor and browser, create a project folder, write an index.html file, open it in the browser, and refresh after each change.
Answer: A basic page with a header, paragraph, image and hyperlink: <!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>Welcome to My Page</h1> <p>This is my first web page.</p> <img src="picture.jpg" alt="My picture"> <a href="https://punjabtest.com">Visit PunjabTest</a> </body> </html>. The h1 is the header, the p is the paragraph, img shows the image, and the a tag creates the link.
Answer: A table with 3 rows and 2 columns: <table> <tr> <th>Name</th> <th>Class</th> </tr> <tr> <td>Ali</td> <td>9</td> </tr> <tr> <td>Ahmed</td> <td>10</td> </tr> </table>. The first row is the header row (th), the next two rows are data rows (td), and every row has two cells — so the table has 3 rows and 2 columns.
Answer: Three CSS selectors: (1) Element selector — p { color: blue; } styles every paragraph. (2) Class selector — .note { background: yellow; } styles every element with class="note". (3) ID selector — #header { text-align: center; } styles the single element with id="header". Element selectors are broad, class selectors are reusable, and id selectors are unique to one element.
Answer: A responsive page adjusts to the screen size: use CSS media queries to change layout at different widths (for example, a two-column layout becomes one column on a phone), flexible widths in percentages, and images that scale (max-width: 100%). JavaScript adds interaction that also adapts: for example, a button that toggles a menu open or closed on small screens — document.querySelector('.menu-btn').addEventListener('click', () => menu.classList.toggle('open')) — while the CSS decides what 'open' looks like at each screen size. Test on both a phone-sized and a computer-sized window.
HTML gives a page its structure, CSS gives it appearance through selectors and the box model, JavaScript gives it behaviour through variables, functions and events, and a simple editor plus browser are enough to build and test a first site.
Revision guidance: پہلے MCQs خود حل کرو, پھر جواب ملاؤ; short سوالوں کے جواب اپنے الفاظ میں لکھ کر practice کرو; long سوالوں کے لیے ہر section کی headings اور مثالیں یاد رکھو.
ایچ ٹی ایم ایل پیج کو ساخت، سی ایس ایس سلیکٹرز اور باکس ماڈل سے شکل، اور جاوا اسکرپٹ ویری ایبلز، فنکشنز اور ایونٹس سے رویہ دیتا ہے؛ اور ایک سادہ ایڈیٹر اور براؤزر پہلی ویب سائٹ بنانے اور جانچنے کے لیے کافی ہیں۔
رہنمائی: پہلے ایم سی کیوز خود حل کریں پھر جوابات ملائیں؛ مختصر سوالات کے جوابات اپنے الفاظ میں لکھ کر مشق کریں؛ تفصیلی سوالات کے لیے ہر سیکشن کی سرخیاں اور مثالیں یاد رکھیں۔
Is chapter ke topics: HTML: The Structure of a Web Page · CSS: Styling Pages with Selectors · JavaScript: Making Pages Interactive · Setting Up and Building a Simple Website · مشق
Topics (Urdu): ایچ ٹی ایم ایل: ویب پیج کی ساخت · سی ایس ایس: سلیکٹرز سے پیج کی سجاوٹ · جاوا اسکرپٹ: پیج کو انٹرایکٹو بنانا · ویب سائٹ بنانے کی تیاری اور سادہ ویب سائٹ
Revision guidance: پہلے MCQs خود حل کرو, پھر جواب ملاؤ; short سوالوں کے جواب اپنے الفاظ میں لکھ کر practice کرو; long سوالوں کے لیے ہر section کی headings اور مثالیں یاد رکھو.
Chapter-wise tests, fresh random papers اور instant score کے لیے PunjabTest.com کا میں test section دیکھو:
PunjabTest.com — Complete Guide Book • Class 9 Computer Science, Chapter 5 (official PCTB book exercise, Session 2026–27) • English + Urdu