Tamil Nadu HSE First Year Computer Applications: Science Exhibition Page That Fails on the Web Server

Science Exhibition Page That Fails on the Web Server

A Class XI student is building a page for the school science exhibition. The page must show a three-column table of events, a link to a registration form stored in a subfolder named pages, and a photograph of last year's exhibition. The student writes:

Science Exhibition Science & Technology Exhibition

Welcome to our exhibition.

Event	Venue	Time
Quiz	Lab 1	10:00
Model display	Hall	11:30

When opened from the school's web server, the link gives '404 Not Found', the photograph does not appear, and the table border is uneven. The student cannot understand why the page works on a laptop but fails on the server.

1. Identify the markup and path errors in the page and give a corrected version of the table, image and link. Explain why each correction is needed.

Read the worked answer

The defects are:

Unclosed table cells. Each <td> should end with </td>. Browsers may auto-close them, but rendering and borders become inconsistent.
Paragraph not closed. The <p> should end with </p> before the table. A table is not allowed inside a paragraph, so the browser may close the paragraph itself and change the layout.
Raw ampersand. In valid HTML the ampersand in “Science & Technology” should be written &. Browsers often tolerate it, but validation fails.
Image source. photo.jpg is relative to the page. On the server the photograph may be in an images folder or may have different capitalisation. The image also needs an alt attribute.
Link path. register.html is relative to the current page, but the form is inside pages. It should be pages/register.html.

Corrected section:

<h1>Science &amp; Technology Exhibition</h1>
<p>Welcome to our exhibition.</p>
<table border='1'>
  <tr><th>Event</th><th>Venue</th><th>Time</th></tr>
  <tr><td>Quiz</td><td>Lab 1</td><td>10:00</td></tr>
  <tr><td>Model display</td><td>Hall</td><td>11:30</td></tr>
</table>
<img src='images/photo.jpg' alt='Exhibits at last year's science exhibition'>
<a href='pages/register.html'>Register here</a>

The table border looked uneven mainly because the missing </td> tags left the browser to repair the row structure differently from the intended markup.

2. Explain the difference between the relative paths register.html and pages/register.html when the page URL is http://school.edu/exhibition/index.html. State exactly what the browser requests in each case.

Read the worked answer

A relative URL is resolved against the directory of the current page. The current page is http://school.edu/exhibition/index.html, so its directory is http://school.edu/exhibition/.

href='register.html' requests http://school.edu/exhibition/register.html.
href='pages/register.html' requests http://school.edu/exhibition/pages/register.html.

Since the registration form is stored in the pages subfolder, the first URL asks for a file that does not exist and the server returns 404. The second URL matches the actual location. If the student wanted an absolute path from the site root, /exhibition/pages/register.html would also work, but it is less portable if the folder is renamed.

3. The same page appears to work when opened directly from the laptop's file system but fails on the server. Give two reasons for this difference and state one check the student should perform.

Read the worked answer

First, the local folder may contain a copy of register.html beside index.html, while the server has it only inside pages. The relative path register.html therefore works locally but not remotely. Second, local Windows file systems are usually case-insensitive, while many web servers run Linux and are case-sensitive. A file named Photo.JPG will load on the laptop even if the src says photo.jpg, but it will fail on the server. The same applies to folder names such as Pages versus pages.

The student should open the browser's developer tools, reload the page and check the Network panel for the exact URL being requested and the status code. That shows whether the request is going to the wrong folder or failing because of letter case.