Easy Level Tasks for HTML Beginners

by

HTML Basics: Test Your Knowledge with These 5 Small Tasks

After learning essential HTML tags like headings, paragraphs, anchors, line breaks, images, and text formatting tags, it’s time to test your knowledge! Below are five simple tasks that will help you apply what you’ve learned so far. Try them out and see how well you understand these fundamental HTML elements.

Task 1: Create a Basic Webpage Structure

Instructions:

  • Create an HTML file.
  • Add a heading that says “Welcome to My Webpage” using the <h1> tag.
  • Add a paragraph that introduces yourself using the <p> tag.
  • Insert a horizontal line below the paragraph using the <hr> tag.

Full Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>Hello! My name is [Your Name], and I am learning HTML.</p>
    <hr>
</body>
</html>

Task 2: Add an Image and a Link

Instructions:

  • Insert an image of your choice using the <img> tag.
  • Below the image, add a link that says “Visit My Instagram” using the <a> tag.
  • Make sure the link opens in a new tab.

Full Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image and Link</title>
</head>
<body>
    <img src="https://www.example.com/image.jpg" alt="Sample Image" width="300" height="200">
    <br>
    <a href="https://www.instagram.com/yourpage" target="_blank">Visit My Instagram</a>
</body>
</html>

Task 3: Formatting Text

Instructions:

  • Write a sentence and format it using bold, italic, and underline tags.
  • Example sentence: “HTML is bold, italic, and underlined!”

Full Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Formatting</title>
</head>
<body>
    <p>HTML is <b>bold</b>, <i>italic</i>, and <u>underlined</u>!</p>
</body>
</html>

Task 4: Subscript and Superscript Usage

Instructions:

  • Display the chemical formula for water: H₂O.
  • Display the mathematical equation for square: x².

Full Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Subscript and Superscript</title>
</head>
<body>
    <p>Water formula: H<sub>2</sub>O</p>
    <p>Mathematical equation: x<sup>2</sup></p>
</body>
</html>

Task 5: Small and Big Text

Instructions:

  • Write a sentence where some text appears smaller and some appears bigger.
  • Example: “This is small text and big text!”

Full Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Small and Big Text</title>
</head>
<body>
    <p>This is <small>small text</small> and <big>big text</big>!</p>
</body>
</html>

Leave a Comment