!
- To fix a complex webpage
- I can modify an existing webpage
- I can identify and fix errors on a webpage
In this extension task, you'll be identifying and fixing errors in an existing webpage.
Throughout this task, you'll find each error has a line underneath it saying:
<!-- There is an error on the line above -->.
- Change the document type to the correct HTML5 declaration: replace
<!DoCtYpe html>with<!DOCTYPE html>. - Fix the inline body styles:
- Correct the property name
font-famly→font-family. - Use
background-color(notbackground-colour). The full line should bestyle="font-family: Arial; background-color:#f7f7f7;". - Tip: If a CSS property "does nothing", check for American spellings like
colorandcenter.
- Correct the property name
- Fix the container styles:
- Change
background-colour→background-color. - Change
text-align: centre→text-align: center. - Result:
<div style="background-color:lightblue; text-align:center;">.
- Change
- Fix heading and paragraph colours:
- Change
colour→colorin both the<h1>and the following<p>.
- Change
- Repair the navigation links:
- Use
colorinstead ofcolourin each link style. - Fix
herf→hrefon the first two links. - Add a valid URL for "Home", e.g.
href="https://example.com". - Example corrected link:
<a style="color:blue" href="#about">About</a>.
- Use
- Fix mismatched heading tags in the "About" section:
- The line
<h2 style="colour:darkgreeen;">About Our Club</h3>has three issues:- Use
color, notcolour. - Fix
darkgreeen→darkgreen. - Close it properly:
</h2>, not</h3>.
- Use
- Final:
<h2 style="color:darkgreen;">About Our Club</h2>.
- The line
- Correct styles in the "Weekly Plan" section:
- Change
background-colour→background-color. - Fix the heading mismatch
<h3>...</h4>→<h3>...</h3>. - Close all
<li>tags properly. - In the
<span>, changecolour:white→color:white. - Tip: Run your HTML through a validator to catch unclosed tags quickly.
- Tip: For larger styled areas, prefer
<div>over<span>.
- Change
- Fix image elements in "Gallery":
- Change the sneaky
scr→src. - Add missing units:
width:300→width:300px. - Fix
widht→widthandheigth→height. - Tip: Always include units for CSS size values (e.g. px, %).
- Change the sneaky
- Repair the "Membership" table:
- Change
background-colour→background-color. - Close the table with
</table>before closing the<div>.
- Change
- Fix colours and typos in the "Contact Us" panel:
- Change
colour→coloreverywhere. - Fix label/input mismatch:
for="emial"→for="email"andid="emial"→id="email". - Fix button style:
backgroun→background.
- Change
- Fix the line break at the end:
- Replace
</br>with<br>. - Tip:
<br>is self-closing; don't use</br>.
- Replace
- General clean-up checklist:
- Ensure every opening tag has a matching closing tag.
- Close elements in order (e.g.
<table>before<div>). - Use valid CSS property names (
color,background-color,width,height). - Add units to numeric style values (e.g.
300px). - Check for attribute typos (
href,src,id,for).