Exam practice

• Tag: a label in angle brackets that marks part of a page, such as the opening tag <h1> or the closing tag </h1>.
• Element: an opening tag, its content and its closing tag together, such as <h1>Bhaktapur</h1>; or an empty element such as <br>.
• Attribute: extra information in an opening tag, a name and a value, such as href="festivals.html" in a link or alt="…" in a picture.
• Selector: the part of a CSS rule that says which elements it styles, such as h2 (every h2) or .note (every element with class note).
• Declaration: one setting inside a CSS rule’s braces, a property and a value, such as color: maroon;.

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>My favorite food</title>  </head>  <body>    <h1>Momo</h1>    <p>I like momo because they are hot, juicy and best shared with friends.</p>    <ul>      <li>flour</li>      <li>minced vegetables or meat</li>      <li>onion, garlic and ginger</li>    </ul>  </body></html>

A bulleted list is <ul>; each thing in it is an <li>. (Any food is fine, as long as the elements are right and properly nested.)

1. <html> has no lang: write <html lang="en"> (and add the <!DOCTYPE html> line and a head with a title).
2. The first heading should be an <h1>, and its closing tag needs a slash: <h1>Our school</h1>.
3. <strong> and <p> cross: <p>We have <strong>600 students</strong>.</p>.
4. The picture has no alt text: <img src="school.jpg" alt="Our school's three-storey building and its playground">.

body {  color: #333;  font-family: sans-serif;} h1 {  color: maroon;} .fare {  background-color: #fff3c4;  padding: 8px;}

Text color and font set on body are passed down to everything inside it. Space inside the border is padding.

Padding is the space inside the border, between the border and the content; it is filled with the element’s background color. Margin is the space outside the border, between this box and the boxes around it; it is always see-through. The drawing has the content in the middle, then the padding round it, then the border line, then the margin outside (as in Figure 5.4).

• One style sheet can style every page of a website, so a change (a new color for every heading) is made once, not on every page.
• The content stays meaningful whatever it looks like: screen readers, search engines and phones use the HTML’s headings, lists and links, while the CSS can change for a phone, for print or for a new design without touching the content.
• (Also: HTML files stay shorter and easier to read and correct.)

People using a screen reader: it reads the Nepali text with English rules and an English voice, which comes out as nonsense. Search engines and translation tools also take the page for English, so it may not be found by people searching in Nepali. The fix is <html lang="ne">. The mistake can’t be seen on the screen, which is why it is easy to miss.

<table>  <tr> <th>To</th>        <th>Fare</th>  </tr>  <tr> <td>Kathmandu</td> <td>Rs 50</td> </tr>  <tr> <td>Banepa</td>    <td>Rs 60</td> </tr></table>

The first row has heading cells, <th>, which tell a screen reader what each column is; each row after it has the same number of <td> cells.

Improvements: (1) after booking, show a clear message with the date, time and a booking number, and send it by SMS; (2) keep what was typed when a box is wrong, and say next to that box what to fix; (3) a darker button color with enough contrast, and the whole site in Nepali as well as English.

1. Choose a user who wasn’t involved in making it, such as a younger student or a parent.
2. Give them real tasks: “Find out when the club meets” and “Find out how to join.”
3. Ask them to think aloud; watch without helping or explaining, and write down where they hesitate, what they tap that doesn’t work, and what they say.
4. Afterwards, ask what was hard or confusing.
5. List the problems, fix the biggest first (for example, put the meeting time near the top, change link words that weren’t clear), then test again, with a new user if possible, to check the change helped. Keep notes of what was changed and why.