School result page: a table in one cell, a broken photo, a link that loses the page
A secondary school in Bharatpur is publishing its SEE result page. The page must show a table of Roll, Name and GPA for 40 students, a photograph of the school building, and a link to a PDF of the full result sheet.
The file structure on the school's web server is: index.html in the root folder, images/Logo.JPG in a subfolder, and results/see2081.pdf in another subfolder. A student wrote the page and tested it by double-clicking index.html on a school computer, where everything looked correct.
After uploading, three problems appear. The table shows all 40 students crammed into a single cell. The photograph shows a broken-image icon. Clicking the PDF link replaces the result page, so students lose their place in the table. The webmaster also notices that the page uses <font> tags and unclosed <p> tags throughout, and the school's server runs on Linux.
1. Explain why the whole table appears in one cell and write the corrected markup for the heading row and for the first data row (Roll 1, Sita Sharma, GPA 3.65).
Read the worked answer
A table cell is not closed automatically. When </td> and </tr> are missing, the browser keeps adding data to the cell that is still open until it meets a tag it cannot ignore, so all 40 rows land in one box. A missing </table> at the end produces the same symptom.
<TABLE border="1">
<TR><TH>Roll</TH><TH>Name</TH><TH>GPA</TH></TR>
<TR><TD>1</TD><TD>Sita Sharma</TD><TD>3.65</TD></TR>
</TABLE>
Rules to state: every row needs its own <TR>; every cell needs its own <TD> (or <TH> in the heading row); each of them must be closed; and the number of cells in a row should match the number of headings above it. The <font> tags should be replaced with CSS, since they are obsolete, and each <p> should be closed.
2. The photograph worked on the school computer but shows a broken-image icon on the server. Give three checks in the order you would make them, and write the corrected tag.
Read the worked answer
Order of checks, cheapest first:
- Path.
index.htmlsits in the root and the file sits in the images folder, so the source must beimages/Logo.JPG, notLogo.JPG. A missing folder level is the commonest cause of this exact symptom. - Exact case. The server runs on Linux, where
logo.jpgandLogo.JPGare different names. The school computer is Windows, which is case-insensitive - that is precisely why the local test passed and the upload failed. Either rename the file tologo.jpgor match the stored case exactly. - Extension. Check that the file really is a JPEG and not a PNG renamed with a .jpg ending.
Corrected tag: <IMG src="images/Logo.JPG" alt="Main building of the school" width="240">
The alt attribute is not decoration: it is what the browser displays when the image fails, which is exactly the situation here, and it is what a screen reader announces to a visually impaired visitor.
3. Fix the PDF link so the result page is not lost, and explain what the change does. Mention one other improvement you would make to that link.
Read the worked answer
<A href="results/see2081.pdf" target="_blank" rel="noopener">Full result sheet (PDF)</A>
By default a link opens in the same tab, so the result table is replaced by the PDF and the student loses their position - especially painful when they were scrolling to find their roll number. target="_blank" opens the PDF in a new tab or window, leaving the result page untouched.
The path results/see2081.pdf must be relative to index.html, and again the case must match the server exactly. rel="noopener" is good practice on modern browsers because it stops the new page from reaching back into the original page through the window object.
One further improvement: the PDF should be compressed, and a size should be printed beside the link (for example 'Full result sheet, 1.2 MB'), because many students will open it on a mobile connection and a large file is the difference between seeing the result and giving up.