HTML Intermediate Practical Memo
PRACTICAL
1. Create a four-page website named IntermediatePractical(StudentNr) (e.g., Home, Services, Contact, Specials).
Save all files in a single folder. Ensure proper navigation between all pages.
Marks are awarded for correct coding, design consistency, and originality.
2. Page Layout with Advanced Tables (10)
Create a page layout using a main table (<table> ... </table>) – 3
Inside one cell, insert a nested table (<table> inside <td>) – 3
Apply cellspacing and cellpadding attributes – 2
Apply a background colour (inline/CSS or bgcolor) – 1
Use at least one blank cell ( ) – 1
3. Graphics and Imagemaps (10)
Insert at least two images (<img src="..." alt="...">) – 2
One image uses spacing (hspace/vspace or CSS margin) – 2
One image clickable (<a href="..."><img ...></a>) – 2
Client-side imagemap (<map>, <area>, usemap) with ≥2 hotspots – 4
4. Forms and Advanced Forms (12)
(On the Contact page, create a form:)
Text box with SIZE + MAXLENGTH (<input type="text" size=".." maxlength="..">) – 2
Password box (<input type="password">) – 2
Radio buttons (<input type="radio" name="...">) ≥2 – 2
Checkboxes (<input type="checkbox" name="...">) ≥2 – 2
Drop-down list (<select><option>..</option></select>) – 2
Textarea (<textarea rows=".." cols=".."></textarea>) – 1
Submit + Reset buttons (<input type="submit">, <input type="reset">) – 1
5. Frames (6)
Create frameset (<frameset>, <frame>) with ≥2 frames – 3
Left frame = nav, right frame = content (target="right") – 3
6. Dynamic & Interactive Documents (8)
META refresh (<meta http-equiv="refresh" content="30">) – 3
JavaScript alert (<script>alert("...");</script>) – 3
External CSS linked (<link rel="stylesheet" href="[Link]">) – 2
7. Apply Styles (CSS) (10)
Background colour or image (body { background: ... }) – 2
Different colours for headings vs body (h1,h2,h3 { color:.. } body { color:.. }) – 2
Class selector (.classname { } used with <p class="classname">) – 3
Span styled (<span class="highlight">...</span>) – 3
8. Design & Consistency (4)
Headings <h1>–<h3> used correctly – 2
Consistent layout across pages – 1
Good design (readability, navigation, balance) – 1
9. Bonus: Imagination & Creativity (+3)
Email link ([Link]
JavaScript validation
Animated GIF
Transparent GIFs for layout
Page 1