Part 1: Semantic HTML
1 Create a Semantic Webpage Layout:
- Add a <header> that includes:
- A website title (<h1>).
- A navigation menu with three links: “Home,” “About,” and “Contact.”
- Add a <section> titled “About Us”:
- Include a short paragraph describing the purpose of the webpage.
- Add another <section> titled “Our Services”:
- Include two <article> elements, each describing a service offered.
- Add a <footer>:
- Include copyright information and a link to a privacy policy.
Part 2: Tables
2. Create a Pricing Table:
- Add a <table> with a <caption> titled “Pricing Plans.”
- The table should have three columns:
- Plan Name (e.g., Basic, Standard, Premium)
- Features (e.g., Access to content, Support, Customization)
- Price (e.g., $10, $20, $30 per month)
- Use <th> for the header row and <td> for the data rows.
- Add borders and spacing using the border attribute or CSS.
Part 3: Forms
3. Build a Contact Form:
- Add a <form> with the following fields:
- Name (Text input
- Email (Email input)
- Message (Textarea)
- Include labels for each input field using the <label> tag.
- Group the fields using a <fieldset> with a <legend> titled “Contact Us”.
- Add a submit button with the label “Send Message.”
To complete this test, you will use the EduCourse Code Editor below to write the provided HTML code. The editor is specifically designed to help you practice coding with immediate feedback. After writing your code, click the Test Your Code button. If your code is correct, you will receive a green success message indicating that everything is written properly. This confirmation ensures your code is free of errors and follows the required structure. Once you see the green message, you can preview the outcome of your code in the built-in browser preview tool. This feature allows you to see how your webpage will look and function, giving you a clear understanding of how your code translates into a visual format. If your code is incorrect you will receive an error message with what needs to be added again. You may start the task again. By completing this task, you’ll gain confidence in coding and see the results of your work instantly.
HTML Practice Game
Write the HTML document based on the instructions and click “Test Your Code”.