Assignment: Intermediate HTML Skills Assessment
Objective: This assignment aims to test your understanding of intermediate-level HTML concepts and your ability to create structured and well-formatted web pages.
Instructions:
Task 1: Basic HTML Structure (10 points)
Create an HTML document with the following structure:
- Declare the document type and HTML version.
- Create an
<html>
element with appropriate attributes. - Include
<head>
and<body>
sections. - Inside the
<head>
section, include a<title>
element with a title for your web page.
Task 2: Heading and Paragraphs (15 points)
Inside the <body>
section:
- Create an
<h1>
heading with a title for your web page. - Add a
<p>
element with a brief introduction to the topic of your web page. - Create two more
<p>
elements with some sample text.
Task 3: Lists (15 points)
- Create an unordered list (
<ul>
) with at least three list items (<li>
). Use appropriate content for the list items. - Create an ordered list (
<ol>
) with at least three list items (<li>
). Use appropriate content for the list items.
Task 4: Hyperlinks (15 points)
- Add a hyperlink to an external website of your choice using the
<a>
element. Make sure it opens in a new tab. - Create a hyperlink to an internal section of your web page using an anchor (
<a>
) and anid
attribute.
Task 5: Images (15 points)
- Include an image in your web page using the
<img>
element. Use a suitable image file (you can download one from the internet or use your own). Provide alternative text for the image. - Create a second image, but this time, link it to a larger version of the same image. Ensure that clicking on the image opens the larger version in a new tab.
Task 6: Tables (20 points)
- Create a table with at least three rows and three columns. Use appropriate content for the table cells. Add a caption to the table.
- Apply different attributes such as
border
,cellpadding
, andcellspacing
to the table to enhance its appearance.
Task 7: Forms (20 points)
- Create a simple form that includes text input fields, a radio button group, checkboxes, and a submit button.
- Use appropriate labels (
<label>
) for each form element. - Specify the
name
andid
attributes for each form element.
Task 8: Validation (10 points)
- Add HTML comments (
<!-- ... -->
) to your code to explain the purpose of specific elements or sections within your web page.
Submission:
Submit your HTML file (.html) and any associated resources (images, if applicable) in a zip folder. Make sure to include your name in the file name (e.g., “YourName_HTML_Assignment.zip”).
Grading:
Your assignment will be graded based on the completeness, correctness, and adherence to HTML standards, as well as the quality of explanations and comments in your code.