Website authoring

1. (a) Name the three layers used in web development. [3]
2. (b) State which layer each of these belongs to: (i) a CSS file that sets the font colour of headings; (ii) a script that checks a form has been filled in before it is sent; (iii) the HTML table that holds the page text. [3]

1. (a) State the purpose of the head section and the body section of a web page. [2]
2. (b) Give two items that are placed in the head section. [2]

1. (a) State what each of these HTML elements is used for: <tr>, <td>, <th>. [3]
2. (b) State what the attribute colspan="2" does to a table cell. [1]

You are creating a web page for a hiking club in Gilgit. The stylesheet hike.css is in the same folder as the page.

1. (a) Write the HTML to attach the stylesheet hike.css to the page. [2]
2. (b) State where in the HTML document this line must be placed. [1]
3. (c) Write the HTML to make the page title, shown in the browser tab, 'Gilgit Hikers'. [1]

1. (a) Write the HTML for a hyperlink with the text 'Email us' that opens an email to info@hikersclub.org with the subject 'Membership'. [3]
2. (b) Write the HTML for a hyperlink with the text 'Route map' that opens the local file routes.html in a new window or tab. [2]

An image file falcon.jpg is stored in a folder called images, inside the folder that holds the web page.

1. (a) Write the HTML to place this image on the page with the alternative text 'Peregrine falcon' and a width of 300 pixels, keeping its aspect ratio. [3]
2. (b) Explain why the path images/falcon.jpg is used rather than C:\Users\Sara\website\images\falcon.jpg. [1]

1. (a) Write the CSS rule to set the background colour of the whole page to light yellow #FFFFE0. [2]
2. (b) Write the CSS rule that makes all paragraphs 12 pt and fully justified. [2]

A stylesheet called museum.css contains the rule h1 { color: red; font-size: 24px }.

1. (a) Identify the punctuation error in this rule and rewrite the rule correctly, giving the colour as the hex code for pure red. [2]
2. (b) Write a CSS comment containing the text 'Heading styles'. [1]

A student must add a sound file called school_bell.mp3 (in the same folder as the page) with controls so that visitors can play it.

1. (a) Write the HTML to add the sound with controls. [3]
2. (b) State why the controls attribute is needed. [1]

A web page for a plant nursery in Multan is being prepared for search engines.

1. (a) Write the meta tag that sets the keywords to: plants, nursery, Multan, gardening. [2]
2. (b) Write the meta tag that gives the author as Green Leaf Nursery. [1]
3. (c) Write the meta tag that makes the page fit the width of the device it is viewed on. [2]

1. (a) Describe the purpose of each of these metatags: (i) description (ii) keywords (iii) author (iv) viewport. [4]
2. (b) State the purpose of the meta tag <meta charset="UTF-8">. [1]

1. (a) Explain why the presentation layer should be kept separate from the content layer by using an external stylesheet. [4]
2. (b) Explain why the <link> to an external stylesheet is placed in the head section. [1]

A web page contains the hyperlink <a href="https://www.example.org/news/sports.html" target="_blank">Sports news</a>.

1. (a) Describe what happens when a user clicks the words Sports news. [2]
2. (b) Explain the difference between an absolute file path and a relative file path, and why relative paths are used for files within the same website. [3]

A student describes the behaviour layer as 'the layer that makes the website look nice'.

1. (a) Explain why the student is wrong and describe what the behaviour layer does. [3]
2. (b) Give one reason why behaviour scripts are often kept in separate files. [1]

A photograph of Badshahi Mosque, mosque.png, is 1600 pixels wide and 1200 pixels high.

1. (a) The image must be displayed 480 pixels wide with its aspect ratio maintained. Calculate the height in pixels. [2]
2. (b) Write the HTML to display the image at this size with alternative text 'Badshahi Mosque, Lahore'. [2]
3. (c) Explain why the image should also be resized in image-editing software before it is uploaded. [2]

A table must have this structure: row 1 has one cell spanning all three columns, containing the heading 'Exam Timetable'; row 2 has three header cells: Subject, Date, Time; row 3 has three data cells: Physics, 12 May, 09:00.

1. (a) Write the HTML for this table. [5]
2. (b) State how a th cell normally appears differently from a td cell when no CSS is applied. [1]

1. (a) Write a CSS rule that makes all h2 headings: dark blue (#00008B), a sans-serif font with Arial as the first choice, 18 pt, centre aligned and italic. [5]
2. (b) Explain why a generic font family such as sans-serif is added at the end of the font-family list. [1]

A stylesheet contains:body { background-color: #FFFFFF; font-family: Georgia, serif; }.note { color: #8B0000; font-weight: bold; }table { border-collapse: collapse; width: 90%; }td { border: 1px solid #333333; padding: 6px; }

1. (a) Write the HTML to make the paragraph 'Bring water and a hat.' use the note class. [2]
2. (b) Describe how the table cells will appear. [3]
3. (c) State what the font of the body text will be if Georgia is not available. [1]

A page for a book club has the following content in the body:<h1>Monthly Picks</h1><h2>Fiction</h2><p>Three new novels this month.</p><h2>Non-fiction</h2><p>Two biographies.</p>

1. (a) Write the HTML to add an unordered (bulleted) list after the first paragraph containing the items 'The Lantern Bearers', 'River of Stars' and 'Salt and Sand'. [3]
2. (b) State the change needed to make it a numbered list. [1]
3. (c) State why the developer used h1 and h2 instead of making p text bold and larger. [2]

The colour for headings on a web page is set as color: #2E8B57;

1. (a) State the red, green and blue values (0–255) of this colour. [3]
2. (b) Write the hex code for a colour with red 255, green 165, blue 0. [1]

1. (a) Write the HTML for a level 3 heading containing the text 'Opening Hours'. [1]
2. (b) Write the HTML to make the words 'Back to top' a link to an element on the same page with the id top. [2]
3. (c) Write the HTML so that all links on the page open in a new tab by default, and state where it must go. [2]

1. (a) A web page has an external stylesheet that sets h1 { color: #000080; }, an internal style in the head that sets h1 { color: #008000; } (placed after the link to the external stylesheet), and one heading written as <h1 style="color: #800000;">Results</h1>. State the colour in which the heading Results is displayed and explain why. [3]
2. (b) State the colour of a second h1 heading on the page that has no inline style, and explain why. [2]

1. (a) Explain the purpose of a bookmark (anchor) on a web page and describe how to create a link to one. [3]
2. (b) Explain why a web developer should give every image an alt attribute. [2]

1. (a) Compare a CSS class with an inline style for formatting part of a web page. [4]

A web page for a science museum in Karachi uses a table that is 800 pixels wide with 4 columns. The first column must be 20% of the table width and the other three columns must share the remaining width equally.

1. (a) Calculate the width in pixels of the first column and of each other column. Give the width of each other column correct to 1 decimal place. [2]
2. (b) Write the CSS rule to make every table on the page 800 pixels wide with a 2-pixel dashed green (#006400) border. [3]
3. (c) Explain why a width of 100% may be better than 800 pixels for visitors using phones. [1]

A web page must show a video file called tour.mp4, stored in a folder called media, 640 pixels wide with playback controls. If the browser cannot play the video, the text 'Your browser does not support this video.' must be shown.

1. (a) Write the HTML to place the video. [5]
2. (b) Explain why the attribute autoplay is often avoided on web pages. [1]

A table is required with this structure (3 columns):Row 1: a cell 'Logo' that spans 2 rows in column 1; a cell 'Karachi Science Museum' spanning columns 2 and 3.Row 2: cells 'Open daily' (column 2) and '09:00–18:00' (column 3).Row 3: a single cell 'Tickets: Rs 500' spanning all 3 columns.

1. (a) Write the HTML for this table. [6]
2. (b) Explain why row 2 contains only two td elements even though the table has three columns. [1]

The head of a web page contains:<link rel="stylesheet" href="main.css"><link rel="stylesheet" href="summer.css">main.css contains: p { color: #000000; font-size: 11pt; }summer.css contains: p { color: #FF4500; }One paragraph is written as <p style="font-size: 14pt;">Summer sale now on.</p>

1. (a) State the colour and font size of the paragraph 'Summer sale now on.' and explain your answer. [4]
2. (b) State the colour and size of another paragraph with no inline style. [2]

A developer writes this rule in a stylesheet: .highlight { background-color: #FFFF00; padding: 4px; } and wants to apply it to one table cell and to one paragraph.

1. (a) Write the HTML for a table cell containing 'Rs 1,200' and a paragraph containing 'Offer ends Friday', both using the class. [2]
2. (b) Explain the difference between padding and margin. [2]
3. (c) The developer accidentally writes the class in HTML as class=".highlight". Explain the effect. [2]

A web page for a school robotics competition must be built from a single table that is 100% of the window width. Row 1 holds a logo image (left) and the page title (right). Row 2 has a single cell spanning both columns containing a 30-second video. Row 3 has two cells: a list of rules (left) and a hyperlink to the registration form register.html (right), which opens in a new tab.

1. (a) Write the HTML for the table. Use logo.png for the logo (alternative text 'Robotics logo', width 150), the title 'Robotics Challenge 2026' as a level 1 heading, the video robots.mp4 with controls and width 600, rules as an ordered list with the items 'Teams of 3' and 'Robots under 2 kg', and the link text 'Register here'. [8]