with your full name + " | Profile" (2) [d] <header> with site title in <h1> (3) [e] <nav> containing two links: (5) - "Profile" -> index.html - "About" -> about.html [f] <main> with one <article> containing: (6) - <h2> "About Me" - 1-2 paragraphs introducing yourself - At least one <img> with descriptive alt text IMPORTANT (public repo): use a placeholder image or avatar, NOT a real photo. e.g. download an avatar from https://api.dicebear.com and save as images/profile.png [g] A <section> "Education" with a <ul> of 3+ items (4) Each item: programme + year + institution [h] A <section> "Skills" with a <ul> of 5+ items (3) [i] A <section> "Contact" with a contact form: (8) - <label for="name"> + <input type="text" id="name" required> - <label for="email"> + <input type="email" id="email" required> - <label for="message"> + <textarea id="message"> + <button type="submit"> [j] <footer> with copyright + your first name + last initial + year (3) Rules: - Exactly ONE <h1> on the page. - Every <input> MUST have a matching <label for="...">. - <img> MUST have meaningful alt text. - No inline CSS. No <style> blocks. No JavaScript. - File must end with <html> closing tag and have no extra characters after. ---------------------------------------------------------------- TASK 2 -- about.html (About Us) (40 marks) ---------------------------------------------------------------- Create a valid HTML5 page about your team, your class group, or your programme (BCS or BITAM). Include: [a] Same DOCTYPE / head / meta / nav structure as index.html (5) [b] <title> "About | <something descriptive>" (2) [c] <header> with <h1> (2) [d] <main> with at least: (10) - One <article> introducing the group / programme - One <section> "Our Mission" with a paragraph - One <section> "Members" with a <ul> or <ol>: list AT LEAST 3 members. Each item should include the member's name and role. [e] At least ONE <table> -- "Course Schedule" or "Team Roles". (10) Use <thead>, <tbody>, <tr>, <th>, <td> properly. At least 3 rows of data + a header row. [f] At least ONE link to an external site (2) (e.g., the SUZA website, Wikipedia, a learning resource). Use target="_blank" rel="noopener noreferrer". [g] One <aside> with a "Did you know?" fact (3) [h] <footer> matching index.html (2) [i] The nav links MUST work both directions (4) (clicking "Profile" from about.html returns to index.html) ---------------------------------------------------------------- TASK 3 -- README.md (10 marks) ---------------------------------------------------------------- Update the README.md that came with the starter. Replace the TODO sections with: - Your first name + last initial (e.g., "Amina S.") -- since this repo is PUBLIC, do NOT include your registration number - Programme (BCS or BITAM) - One-paragraph description of what you built - How to view the site (just open index.html in a browser) - A list of which HTML elements you used that you had not used before (this is for your own reflection, 3+ items) IMPORTANT (because this repo is public): - Do NOT use a real photo of yourself. Use a placeholder image, avatar (e.g. https://api.dicebear.com), or stylised illustration. - Do NOT include phone numbers, home address, or registration number anywhere in the HTML files. - Email is OK if you want; use your suza.ac.tz address. ---------------------------------------------------------------- TASK 4 -- Validation & Git hygiene (10 marks) ---------------------------------------------------------------- - Both HTML files MUST pass the W3C validator with no errors: https://validator.w3.org/#validate_by_upload Take a screenshot of the green "Document checking completed. No errors or warnings to show." for each page and put them in a folder /validation/ in your repo. - At least 5 commits with meaningful messages (NOT "update", "fix", "asd", "final final v2"). Good examples: "Add profile sections", "Add contact form", "Fix nav link to about page". ---------------------------------------------------------------- DELIVERABLES (auto-collected by GitHub Classroom) ---------------------------------------------------------------- Your repo MUST contain these files at these exact paths: index.html about.html images/profile.jpg (or .png, .webp) validation/profile.png (W3C screenshot of index.html) validation/about.png (W3C screenshot of about.html) README.md (filled in) Files at any other path will not be checked. ---------------------------------------------------------------- GRADING (100 marks) ---------------------------------------------------------------- Task 1 Profile page ............................. 40 Task 2 About Us page ............................ 40 Task 3 README ................................... 10 Task 4 Validation + Git history ................. 10 Auto-checks (run by GitHub Classroom on every push): + index.html and about.html exist (10) + Both pages contain the required tags (header, nav, main, section, article, footer) (20) + index.html has exactly one <h1> (5) + Every <img> has alt; every <input> has label (10) + about.html has a working <table> with thead (5) + Nav links connect the two pages (5) ... up to 55 marks awarded automatically. The remaining 45 marks are awarded by the lecturer based on content quality, completeness, README, and screenshots. ---------------------------------------------------------------- COMMON MISTAKES -- DO NOT DO THESE ---------------------------------------------------------------- - Do NOT use <div> + <span> for everything. Use semantic tags. - Do NOT use a <table> for layout. Tables are for tabular data. - Do NOT skip alt on images. Empty alt="" is OK ONLY for purely decorative images. - Do NOT use <br><br> for spacing. That's a CSS concern. - Do NOT submit by emailing me a zip. Push to your repo. ---------------------------------------------------------------- LATE / PLAGIARISM POLICY ---------------------------------------------------------------- Late submissions: -10 marks per day, max 3 days. Plagiarism (including copying from a classmate or generating the entire site with AI without disclosure): 0 marks and a reported academic offence. AI assistance is allowed BUT must be acknowledged in your README -- list which parts you used AI for and how you verified the output yourself. ---------------------------------------------------------------- HOW TO ASK FOR HELP ---------------------------------------------------------------- - Stuck? Open an issue on YOUR repo titled "Question: ..." and @-mention the lecturer. Don't email. - Office hours: see Moodle. - Pair-debugging is allowed; copying code is not.

================================================================ LAB 1a — HTML Only: Personal Profile + About Us Page ================================================================ Course: Web Technologies (BCS & BITAM, Semester II 2025/2026) Topic: Lecture 4 (HTML & CSS Basics) -- HTML PORTION ONLY Time: 1 hour lab + 1 hour self-study Submit: Accept the GitHub Classroom invite (link on Moodle) DO NOT email files. DO NOT zip and submit on Moodle. NOTE: This lab uses HTML only. NO CSS in this submission. A separate lab (Lab 1b) covers CSS. ---------------------------------------------------------------- LEARNING GOALS ---------------------------------------------------------------- - Write a valid HTML5 document from scratch - Use semantic HTML5 elements correctly (header, nav, main, section, article, aside, footer) - Use the right elements for the right content (headings, lists, links, images, forms) - Pass HTML validation (no errors) - Make a multi-page site with working navigation - Practice good Git habits: commits, push, README ---------------------------------------------------------------- WHAT YOU WILL BUILD ---------------------------------------------------------------- A small personal website with TWO pages: index.html -- "Profile" page about YOU about.html -- "About Us" page about your team / class / programme Both pages share a header and a navigation menu so the user can move between them. NO CSS this time -- the page will look plain, that is fine. We will style it next week. ---------------------------------------------------------------- ACCEPT THE ASSIGNMENT (FIRST STEP) ---------------------------------------------------------------- 1. Open the GitHub Classroom invite link posted on Moodle. 2. Sign in with your GitHub account. 3. Accept the assignment. Classroom will create a private repo for you, named something like: wt-2026-lab01a-html-profile- 4. Clone YOUR repo to your laptop: git clone cd wt-2026-lab01a-html-profile- 5. You will see a starter README and two empty HTML files. ---------------------------------------------------------------- TASK 1 -- index.html (Your Profile) (40 marks) ---------------------------------------------------------------- Create a valid HTML5 page that contains: [a] DOCTYPE, , , (4) [b] and viewport meta (2) [c] with your full name + " | Profile" (2) [d] <header> with site title in <h1> (3) [e] <nav> containing two links: (5) - "Profile" -> index.html - "About" -> about.html [f] <main> with one <article> containing: (6) - <h2> "About Me" - 1-2 paragraphs introducing yourself - At least one <img> with descriptive alt text IMPORTANT (public repo): use a placeholder image or avatar, NOT a real photo. e.g. download an avatar from https://api.dicebear.com and save as images/profile.png [g] A <section> "Education" with a <ul> of 3+ items (4) Each item: programme + year + institution [h] A <section> "Skills" with a <ul> of 5+ items (3) [i] A <section> "Contact" with a contact form: (8) - <label for="name"> + <input type="text" id="name" required> - <label for="email"> + <input type="email" id="email" required> - <label for="message"> + <textarea id="message"> + <button type="submit"> [j] <footer> with copyright + your first name + last initial + year (3) Rules: - Exactly ONE <h1> on the page. - Every <input> MUST have a matching <label for="...">. - <img> MUST have meaningful alt text. - No inline CSS. No <style> blocks. No JavaScript. - File must end with <html> closing tag and have no extra characters after. ---------------------------------------------------------------- TASK 2 -- about.html (About Us) (40 marks) ---------------------------------------------------------------- Create a valid HTML5 page about your team, your class group, or your programme (BCS or BITAM). Include: [a] Same DOCTYPE / head / meta / nav structure as index.html (5) [b] <title> "About | <something descriptive>" (2) [c] <header> with <h1> (2) [d] <main> with at least: (10) - One <article> introducing the group / programme - One <section> "Our Mission" with a paragraph - One <section> "Members" with a <ul> or <ol>: list AT LEAST 3 members. Each item should include the member's name and role. [e] At least ONE <table> -- "Course Schedule" or "Team Roles". (10) Use <thead>, <tbody>, <tr>, <th>, <td> properly. At least 3 rows of data + a header row. [f] At least ONE link to an external site (2) (e.g., the SUZA website, Wikipedia, a learning resource). Use target="_blank" rel="noopener noreferrer". [g] One <aside> with a "Did you know?" fact (3) [h] <footer> matching index.html (2) [i] The nav links MUST work both directions (4) (clicking "Profile" from about.html returns to index.html) ---------------------------------------------------------------- TASK 3 -- README.md (10 marks) ---------------------------------------------------------------- Update the README.md that came with the starter. Replace the TODO sections with: - Your first name + last initial (e.g., "Amina S.") -- since this repo is PUBLIC, do NOT include your registration number - Programme (BCS or BITAM) - One-paragraph description of what you built - How to view the site (just open index.html in a browser) - A list of which HTML elements you used that you had not used before (this is for your own reflection, 3+ items) IMPORTANT (because this repo is public): - Do NOT use a real photo of yourself. Use a placeholder image, avatar (e.g. https://api.dicebear.com), or stylised illustration. - Do NOT include phone numbers, home address, or registration number anywhere in the HTML files. - Email is OK if you want; use your suza.ac.tz address. ---------------------------------------------------------------- TASK 4 -- Validation & Git hygiene (10 marks) ---------------------------------------------------------------- - Both HTML files MUST pass the W3C validator with no errors: https://validator.w3.org/#validate_by_upload Take a screenshot of the green "Document checking completed. No errors or warnings to show." for each page and put them in a folder /validation/ in your repo. - At least 5 commits with meaningful messages (NOT "update", "fix", "asd", "final final v2"). Good examples: "Add profile sections", "Add contact form", "Fix nav link to about page". ---------------------------------------------------------------- DELIVERABLES (auto-collected by GitHub Classroom) ---------------------------------------------------------------- Your repo MUST contain these files at these exact paths: index.html about.html images/profile.jpg (or .png, .webp) validation/profile.png (W3C screenshot of index.html) validation/about.png (W3C screenshot of about.html) README.md (filled in) Files at any other path will not be checked. ---------------------------------------------------------------- GRADING (100 marks) ---------------------------------------------------------------- Task 1 Profile page ............................. 40 Task 2 About Us page ............................ 40 Task 3 README ................................... 10 Task 4 Validation + Git history ................. 10 Auto-checks (run by GitHub Classroom on every push): + index.html and about.html exist (10) + Both pages contain the required tags (header, nav, main, section, article, footer) (20) + index.html has exactly one <h1> (5) + Every <img> has alt; every <input> has label (10) + about.html has a working <table> with thead (5) + Nav links connect the two pages (5) ... up to 55 marks awarded automatically. The remaining 45 marks are awarded by the lecturer based on content quality, completeness, README, and screenshots. ---------------------------------------------------------------- COMMON MISTAKES -- DO NOT DO THESE ---------------------------------------------------------------- - Do NOT use <div> + <span> for everything. Use semantic tags. - Do NOT use a <table> for layout. Tables are for tabular data. - Do NOT skip alt on images. Empty alt="" is OK ONLY for purely decorative images. - Do NOT use <br><br> for spacing. That's a CSS concern. - Do NOT submit by emailing me a zip. Push to your repo. ---------------------------------------------------------------- LATE / PLAGIARISM POLICY ---------------------------------------------------------------- Late submissions: -10 marks per day, max 3 days. Plagiarism (including copying from a classmate or generating the entire site with AI without disclosure): 0 marks and a reported academic offence. AI assistance is allowed BUT must be acknowledged in your README -- list which parts you used AI for and how you verified the output yourself. ---------------------------------------------------------------- HOW TO ASK FOR HELP ---------------------------------------------------------------- - Stuck? Open an issue on YOUR repo titled "Question: ..." and @-mention the lecturer. Don't email. - Office hours: see Moodle. - Pair-debugging is allowed; copying code is not.