MetaPage
Design Specification Cross-Reference & Validation Evidence
Design Specification Mapping
This page cross-references all assessment requirements
(DS1 through DS17), indicating which pages implement each
specification, the relevant HTML
and CSS files, and notes on
implementation.
Use this as a verification checklist to confirm all
rubric criteria are satisfied.
| Req. | Description | Implemented In | Status & Notes |
|---|---|---|---|
| DS1 | Topic from Canvas list | All pages (index.html primary) | ✓ Topic: "Black Holes. The Mystery." — selected from approved Canvas list. Reflected in all page titles. |
| DS2 | 6 Required Pages |
index.html Contact.html References.html MetaPage.html Mysteries.html Types.html |
✓ All 6 pages present. Student Name: Nasim Anzum Promise Student ID: uXXXXXXXX 7 Harvard references (5+ required) |
| DS3 | Images in all 6 pages | All HTML files |
✓ Images with alt, border, width, align attributes. SVG logos, background images, content images, video elements, YouTube iframe. |
| DS4 | Hyperlinks (external + email) | index.html, Contact.html, References.html, MetaPage.html |
✓ External NASA links, mailto: links, W3C validator links, reference source links. |
| DS5 | Contact Form | Contact.html |
✓ Text input, email, select dropdown, radio buttons, checkboxes, textarea, submit, reset. Demonstration only — does not submit data. |
| DS6 | 3 Types of Lists | index.html, References.html |
✓ Type 1: <ul> — Finding Black Holes Type 2: <ol> — Black Holes Are Not Type 3: <dl> — Key Terms |
| DS7 | UTF-8 Symbols | All pages |
✓ Navigation emojis, star (⭐), magnifying glass (🔍), spaghetti (🍝), lightning (⚡), explosion (💥), arrows, bullets, special characters. |
| DS8 | Writing Elements | index.html, Contact.html, References.html, MetaPage.html, Types.html |
✓ Line break: <br> in hero headings Blockquote: Hawking quote in index.html Phrase: <strong>, <em>, <abbr> throughout |
| DS9 | Structural Elements | All pages |
✓ <div>, <header>, <nav>, <main>, <footer> on every page following DS14 wireframes. |
| DS10 | 3 CSS Styling Types | All HTML + style.css |
✓ External: style.css Embedded: <style> in head Inline: style="" attributes |
| DS11 | 5+ CSS Properties | style.css, embedded styles |
✓ 25+ properties: background-color, color, font-family, font-size, font-style, font-weight, margin, padding, text-align, text-decoration, text-indent, text-shadow, width, max-width, height, border, border-radius, letter-spacing, text-transform, line-height, display, position, z-index, overflow, transition, box-shadow, grid-template-columns, gap |
| DS12 | Hex Colour Values | All CSS |
✓ ALL colours use #hex format. No RGB, RGBA, HSL, or named colours for colour properties. Examples: #ffffff, #000000, #111111, #1a1a2e, #0b3d91 |
| DS13 | Class & ID Selectors | style.css (external) |
✓ Class: .sidebar-nav, .page-wrapper,
.content-section, .site-header, .bh-table, etc. ID: #detection-table, #notable-bh-table, #types-section |
| DS14 | Layout / Wireframes | All pages |
✓ Wireframe (a): index.html Wireframe (b): Mysteries.html, Types.html, MetaPage.html Custom: Contact.html, References.html |
| DS15 | 3+ Tables / 5+ Properties | index.html, MetaPage.html |
✓ Table 1: Detection Methods Table 2: Types (colspan/rowspan) Table 3: Notable Black Holes Table 4: This MetaPage table Properties: borders(width,style,color), size(width), alignment(left,right,center), th/td styles, responsiveness(overflow-x), spanning(rowspan,colspan) |
| DS16 | Validation | MetaPage.html |
✓ W3C HTML & CSS validation screenshots below. Links to validators provided. |
| DS17 | Structure / Site Map | All nav sections |
✓ Navigation menu in <nav> on every page links to all 6 pages matching site structure diagram. |
Validation Screenshots
DS16 Validation Evidence: Below are screenshots showing successful HTML and CSS validation using the W3C validation services. All pages pass validation with no errors, confirming standards-compliant code.
📝 Implementation Summary
This website fully implements all 17 Design Specifications
(DS1-DS17) as outlined in the IIT 4478/8936 assignment rubric.
HTML: All required structural elements, 6 complete pages with consistent navigation, contact form with multiple input types, 3 list types, 4 tables with spanning and alignment, UTF-8 symbols throughout, writing elements (blockquote, phrase elements, line breaks), images with all required attributes (alt, border, width, align), external and email hyperlinks.
CSS: All three styling methods (external style.css, embedded <style> blocks, inline style attributes), 25+ CSS properties, exclusive hexadecimal colour values, class and ID selectors in external file, responsive design with media queries for tablet and mobile, consistent dark/light colour scheme across all pages.
Structure: Wireframe-compliant layouts with flexbox and grid, website map in nav menu, validated HTML and CSS code, accessible semantic markup.
HTML: All required structural elements, 6 complete pages with consistent navigation, contact form with multiple input types, 3 list types, 4 tables with spanning and alignment, UTF-8 symbols throughout, writing elements (blockquote, phrase elements, line breaks), images with all required attributes (alt, border, width, align), external and email hyperlinks.
CSS: All three styling methods (external style.css, embedded <style> blocks, inline style attributes), 25+ CSS properties, exclusive hexadecimal colour values, class and ID selectors in external file, responsive design with media queries for tablet and mobile, consistent dark/light colour scheme across all pages.
Structure: Wireframe-compliant layouts with flexbox and grid, website map in nav menu, validated HTML and CSS code, accessible semantic markup.