Web Development

1 State the difference between the purpose of HTML and the purpose of CSS. 2

One mark for each of the following, to a maximum of 2.

• HTML defines the structure and content of the page
• CSS defines the appearance or style

Model answer. HTML is used to define the structure and content of a web page, describing what each part of the page is, such as a heading, a paragraph, a list or an image. CSS is used to control the appearance of those elements, setting things such as colours, fonts, spacing and layout.

2 Write the HTML needed to display a level one heading saying Welcome, a paragraph of text, and an image of a dog with suitable alternative text. 4

One mark for each of the following, to a maximum of 4.

• Correct h1 tag with the text Welcome
• Correct paragraph tags
• Correct img tag with a src attribute
• Suitable alt text describing the image

Model answer. <h1>Welcome</h1> <p>This is a paragraph of text about the website.</p> <img src="dog.jpg" alt="A golden retriever running across a field"> The h1 tag marks the most important heading on the page. The paragraph tags open and close around the text. The img tag is self closing and needs a src attribute giving the file name, plus an alt attribute describing what the image shows so that people using a screen reader still receive the information.

3 Explain why it is better to use an external stylesheet than to write styles inline on each element. 3

One mark for each of the following, to a maximum of 3.

• One stylesheet can be linked from every page of the site
• A style change only has to be made in one place
• It keeps structure and appearance separate, making the code easier to read and maintain

Model answer. An external stylesheet is a single CSS file that every page of the website links to, so the same styles are applied consistently across the whole site. This means that if the design needs to change, for example altering the heading colour or the body font, the edit is made once in that one file and every page updates immediately, whereas inline styles would have to be found and changed on every element on every page. It also keeps the HTML focused purely on structure and content while the CSS handles appearance, which makes both files considerably shorter, easier to read and far easier to maintain.

4 Describe three features that make a website accessible to people with disabilities. 6

One mark for each of the following, to a maximum of 6.

• Alternative text on images
• So that screen reader users know what the image shows
• Good colour contrast between text and background
• So that text is readable for people with limited vision or colour blindness
• Full keyboard access without needing a mouse
• Headings used in the correct order so screen readers can navigate the structure

Model answer. The first feature is alternative text on every meaningful image. A screen reader cannot interpret a picture, so it reads out the alt text instead, which means a blind user receives the same information as everyone else. Without it, the image is announced simply as an image and the content is lost. The second feature is strong colour contrast between text and its background. People with limited vision, and anyone reading a screen in bright sunlight, cannot read light grey text on a white background, so choosing colours with sufficient contrast makes the site readable for far more people. The third feature is full keyboard access. Many people cannot use a mouse, whether because of a motor impairment or because they rely on assistive technology, so every link, button and form field must be reachable and usable with the keyboard alone. Alongside these, using headings in the correct order matters greatly, because screen reader users navigate a page by jumping between headings, and skipping levels or using headings purely for their size makes that structure meaningless.

5 Explain the difference between a class and an id in CSS, and state when each should be used. 3

One mark for each of the following, to a maximum of 3.

• A class can be applied to many elements
• An id must be unique to one element on the page
• Use a class for a shared style and an id for a single unique element

Model answer. A class is used when several elements on a page should share the same appearance, and the same class can be applied to as many elements as needed, so a class called warning could style every warning box on the site. An id is used to identify one specific element, and each id must be unique within a page, so an id called mainHeader would apply to the single header at the top. In CSS a class is selected with a full stop before its name and an id with a hash. In practice classes are used far more often, because most styling applies to groups of similar elements, and ids are reserved for unique landmarks or for linking to a particular point in the page.