In this task, you will combine everything you’ve learned about hyperlinks, lists, and text formatting to create a functional and visually organized webpage. You will create external links, internal links, anchor links, ordered and unordered lists, and apply text formatting.
Instructions
- Create an Html Document:
- Start with a proper <!DOCTYPE> and Include the <html>, <head>, <title> and <body> tags.
- Add a Title and Introduction:
- Create a heading (<h1>) for the title of your webpage: “HTML Practice Task”.
- Add a short introduction paragraph (<p>), using the <b> tag to bold the phrase “HTML basics”.
- Add an Anchor Link:
- Add a link to jump to the “Contact Us” section on the same page using an anchor link.
- At the bottom of the page, create the “Contact Us” section using the <h2> tag with the id=”contact”.
- Create a List Section:
- Add an ordered list (<ol>) with 3 steps to learn HTML: (Use the examples below in your ordered list)
- Learn about tags and attributes.
- Practice creating links and lists.
- Style the page with text formatting.
- Add an unordered list (<ul>) of 3 benefits of learning HTML: (Use the examples below in your unordered list)
- Build your own website.
- Customize web pages.
- Improve coding skills.
- Add an ordered list (<ol>) with 3 steps to learn HTML: (Use the examples below in your ordered list)
- Enhance the Page with Text Formatting:
- Use <i> to italicize one item in your lists.
- Use <u> to underline a sentence in your introduction.
- Use <s> to show a price reduction in a promotional message (e.g.,
$100$80).
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 Task
Write the HTML document based on the instructions and click “Test Your Code”.