Assignment: Advanced HTML Skills Assessment

Posted on by

Objective: This assignment aims to assess your proficiency in HTML, including advanced topics such as forms, multimedia integration, and CSS styling.

Instructions:

Task 1: Complex HTML Structure (15 points)

Create an HTML document with the following structure:

  • Declare the document type and HTML version.
  • Implement a multi-column layout using semantic HTML5 elements like <header>, <nav>, <main>, <section>, and <footer>.
  • Use appropriate attributes and labels to ensure the structure is semantically meaningful.

Task 2: Forms and Input Elements (20 points)

Inside the <main> section:

  • Develop a complex form that includes text inputs, text areas, radio buttons, checkboxes, a dropdown select box, and a submit button.
  • Utilize the <label> element to associate labels with form fields.
  • Implement form validation using HTML5 attributes like required, pattern, and minlength.

Task 3: Multimedia Integration (15 points)

  • Embed a video from an external source (e.g., YouTube) using the <iframe> element.
  • Include at least two images, one of which should be responsive (adjust to different screen sizes) using appropriate HTML and CSS techniques.
  • Implement audio integration using the <audio> element.

Task 4: HTML5 Semantic Elements (15 points)

  • Use at least five different HTML5 semantic elements such as <article>, <aside>, <figure>, <figcaption>, and <time> to enhance the structure and meaning of your content.

Task 5: CSS Styling (20 points)

  • Create an external CSS stylesheet and link it to your HTML document.
  • Apply CSS styling to format your web page, including fonts, colors, margins, and padding.
  • Use CSS to style at least one of the form elements differently (e.g., change the background color when focused or add hover effects to buttons).

Task 6: Accessibility (10 points)

  • Ensure your web page is accessible by adding appropriate alt attributes for images and providing keyboard navigation support.
  • Include ARIA attributes where applicable to improve accessibility.

Task 7: Responsive Design (15 points)

  • Implement responsive design techniques using CSS media queries to ensure your web page adapts gracefully to different screen sizes (e.g., desktop, tablet, mobile).

Submission:

Submit your HTML file (.html), external CSS file (.css), and any associated resources (images, if applicable) in a zip folder. Include your name in the file name (e.g., “YourName_Advanced_HTML_Assignment.zip”).

Grading:

Your assignment will be graded based on the completeness, correctness, adherence to HTML and CSS standards, accessibility considerations, and responsive design. Ensure that your code is well-structured and well-documented.