1. Home
HTML

Learn HTML: A Comprehensive Tutorial for Beginners | Step-by-Step Guide

Learn HTML from scratch! Our tutorial covers basics to advanced concepts. Start coding websites today with step-by-step guidance.

  • 49
  • 12 Hours
right-top-arrow
46. 

HTML Exercises

Updated on 27/08/2024469 Views
Content

The only way we get better at something is by practicing it. The same goes for HTML programming. An effective way to get better at HTML programming is to practice HTML exercises. Even when I started my coding journey, I solved HTML examples for practice. It is a great way to get better at coding using HTML. 

With that being said, let’s talk about some HTML exercises today in this guide. 

Advantages of doing HTML exercises

Before delving into examples of HTML exercises you need to know about the benefits. In this section of the tutorial, I’ve discussed some of them with you.

Hands-on experience

Exercises give you practical, hands-on experience coding HTML, which helps you understand concepts better than passive learning methods.

Skill development

Regular practice helps you improve your HTML skills, including understanding tags, elements, attributes, and page structure, allowing you to become more proficient in web development.

Problem-solving

Exercises frequently present challenges or tasks to complete, encouraging you to think critically and develop problem-solving abilities that are essential for real-world web development scenarios.

Code Efficiency

HTML exercises help you write cleaner, more efficient code, which improves readability and maintainability in your HTML projects.

Creativity

Through exercises, you can experiment with different ways to structure and design web content, encouraging creativity and innovation in your HTML coding.

Portfolio building

Completing HTML exercises allows you to create a portfolio of HTML projects that demonstrate your skills to potential employers or clients, thereby expanding your career opportunities in web development.

HTML Practice Exercises With Solutions

Let us start from the very basics. In this section of the tutorial, I will discuss all the basic concepts of HTML programming. Solutions are attached after every exercise, but try to solve the problem yourself first. This will really push you to learn the concept yourself. 

These HTML assignments for students are sure to help you get better at HTML programming.

HTML headings

Question 1: Create an HTML document containing three headings:

Heading 1: "Welcome to HTML practice worksheets"

Heading 2, with the text "Practice Makes Perfect"

Heading 3 has the text "HTML Basics"

Solution: 

solution to first html heading problem

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML Headings Practice</title>

</head>

<body>

    <h1>Welcome to HTML practice worksheets</h1>

    <h2>Practice Makes Perfect</h2>

    <h3>HTML Basics</h3>

</body>

</html>

Question 2: Add the text "Keep Doing HTML Exercises for Practice Every Day" as a subheading under "Practice Makes Perfect".

Solution to the second question on HTML headings

HTML links

Question 1: Create an HTML page using the following headings

  • A heading labeled "My Favorite Websites"
  • Create a list (unordered or ordered) with three items:
  • The first item should include a link to "upGrad" (https://www.upgrad.com/).
  • The second item should include a link to "GitHub" (https://github.com).
  • The third item should include a link to "Wikipedia" (https://www.wikipedia.org).

Solution:

Solution for the first question in HTML link

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML Link Exercise</title>

</head>

<body>

    <h1>My Favorite Websites</h1>

    <ul>

        <li><a href="https://www.upgrad.com/">upGrad</a></li>

        <li><a href="https://github.com">GitHub</a></li>

        <li><a href="https://www.wikipedia.org">Wikipedia</a></li>

    </ul>

</body>

</html>

HTML tables

Question 1: Create an HTML document with a table displaying a simple list of Cars. Include the following information about each car:

  • Name
  • Color
  • Quantity

Solution:

Solution to the first question of HTML tables

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Car List</title>

    <style>

        table {

            width: 100%;

            border-collapse: collapse;

        }

        th, td {

            border: 1px solid black;

            padding: 8px;

            text-align: left;

        }

        th {

            background-color: #f2f2f2;

        }

    </style>

</head>

<body>

    <h1>Car List</h1>

    <table>

        <tr>

            <th>Name</th>

            <th>Color</th>

            <th>Quantity</th>

        </tr>

        <tr>

            <td>Ford Fiesta</td>

            <td>Red</td>

            <td>10</td>

        </tr>

        <tr>

            <td>Toyota Supra</td>

            <td>Yellow</td>

            <td>15</td>

        </tr>

        <tr>

            <td>Tata Indica</td>

            <td>Green</td>

            <td>20</td>

        </tr>

    </table>

</body>

</html>

HTML images

Question 1: Create an HTML page containing the following image-related tasks:

  • Use the tag to insert your desired image.
  • Create a gallery section with at least three images arranged in a grid layout.
  • Use the alt attribute to provide alternative text for each image.
  • Use CSS to style the images and gallery for better presentation. 

HTML images exercise

Output for HTML images

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HTML Images Exercise</title>

<style>

  body {

    font-family: Arial, sans-serif;

    margin: 20px;

  }

  h1 {

    text-align: center;

  }

  .gallery {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 10px;

  }

  .gallery img {

    width: 100%;

    height: auto;

    border-radius: 5px;

  }

  #pic1{

      height: 300px;

      width: 400px;

  }

  img{

      height:300px;

      width: 400px;

  }

  

</style>

</head>

<body>

<h1>Image Gallery Exercise</h1>

<!-- Task 1: Insert a single image -->

<img id="pic1" src="https://cdn.pixabay.com/photo/2024/03/07/10/38/simba-8618301_1280.jpg" alt="Description of your image">

<!-- Task 2: Create a gallery of images -->

<div class="gallery">

  <img src="https://cdn.pixabay.com/photo/2024/03/07/10/38/simba-8618301_1280.jpg" alt="Cat">

  <img src="https://cdn.pixabay.com/photo/2024/03/07/10/38/simba-8618301_1280.jpg" alt="Cat2">

  <img src="https://cdn.pixabay.com/photo/2024/03/07/10/38/simba-8618301_1280.jpg" alt="Cat3">

</div>

</body>

</html>

HTML styles and formatting

Question 1: Using HTML and CSS, create a webpage with the following elements, with appropriate styles and formatting.

The header has a navy background, white text, centered text, and 20px padding.

The navigation bar has a dark blue background, white text, centered text, 10px padding, and inline links.

The main content area has a light gray background color, 20px padding, and a 10px border-radius. The footer has a navy background, white text, centered text, and a 15px padding. 

Solution:

HTML styles and formatting exercise

Solution for HTML styles and formatting exercise

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HTML Styles and Formatting Exercise</title>

<style>

  body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    background-color: #f0f0f0;

  }

  header {

    background-color: navy;

    color: #fff;

    text-align: center;

    padding: 20px;

  }

  nav {

    background-color: #0d47a1;

    color: #fff;

    text-align: center;

    padding: 10px;

  }

  nav a {

    color: #fff;

    text-decoration: none;

    padding: 5px 10px;

    margin: 0 10px;

    border-radius: 5px;

  }

  main {

    background-color: #f5f5f5;

    padding: 20px;

    border-radius: 10px;

    margin: 20px;

  }

  footer {

    background-color: navy;

    color: #fff;

    text-align: center;

    padding: 15px;

  }

</style>

</head>

<body>

<header>

  <h1>HTML STYLE EXERCISE</h1>

</header>

<nav>

  <a href="#">Home</a>

  <a href="#">About</a>

  <a href="#">Services</a>

  <a href="#">Contact</a>

</nav>

<main>

  <h2>Main Content Area</h2>

  <p>Content for main content area.</p>

</main>

<footer>

  <p>&copy; HTML Exercise </p>

</footer>

</body>

</html>

HTML forms

Question 1: Create an HTML form for a user registration page that includes the following fields:

  • First Name (Text input)
  • Last name (text input).
  • Email Address (email input)
  • Password (password input)
  • Confirm Password (password input)
  • Gender (radio buttons for men and women)
  • Date of Birth (date input)
  • Country (select dropdown with options: USA, Canada, UK, and Australia)
  • Apply appropriate labels, placeholders, and required attributes to the form fields.

Solution:

HTML form exercise

HTML form exercise solution

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>User Registration Form</title>

<style>

  body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 20px;

  }

  form {

    max-width: 600px;

    margin: 0 auto;

    background-color: #f9f9f9;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

  }

  label {

    display: block;

    margin-bottom: 5px;

  }

  input[type="text"],

  input[type="email"],

  input[type="password"],

  select,

  input[type="date"] {

    width: 100%;

    padding: 10px;

    margin-bottom: 10px;

    border-radius: 5px;

    border: 1px solid #ccc;

    box-sizing: border-box;

  }

  input[type="radio"] {

    margin-right: 10px;

  }

  input[type="submit"] {

    background-color: #4CAF50;

    color: white;

    border: none;

    padding: 10px 20px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 10px 0;

    cursor: pointer;

    border-radius: 5px;

  }

  input[type="submit"]:hover {

    background-color: #45a049;

  }

</style>

</head>

<body>

<form action="#" method="POST">

  <label for="firstName">First Name:</label>

  <input type="text" id="firstName" name="firstName" placeholder="Enter your first name" required>

  <label for="lastName">Last Name:</label>

  <input type="text" id="lastName" name="lastName" placeholder="Enter your last name" required>

  <label for="email">Email Address:</label>

  <input type="email" id="email" name="email" placeholder="Enter your email address" required>

  <label for="password">Password:</label>

  <input type="password" id="password" name="password" placeholder="Enter your password" required>

  <label for="confirmPassword">Confirm Password:</label>

  <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm your password" required>

  <label>Gender:</label>

  <label><input type="radio" name="gender" value="male"> Male</label>

  <label><input type="radio" name="gender" value="female"> Female</label>

  <label for="dob">Date of Birth:</label>

  <input type="date" id="dob" name="dob" required>

  <label for="country">Country:</label>

  <select id="country" name="country" required>

    <option value="">Select Country</option>

    <option value="USA">USA</option>

    <option value="Canada">Canada</option>

    <option value="UK">UK</option>

    <option value="Australia">Australia</option>

  </select>

  <input type="submit" value="Register">

</form>

</body>

</html>

Summing Up

Writing HTML code for practice is a great way to improve your programming skills in HTML. It is an efficient way to give you hands-on experience and teach you industry standards. This tutorial has provided you with HTML programs for practice with output to help clear your concepts.

To learn more advanced topics in HTML programming, I suggest checking out certified courses from reputed sources. I recommend upGrad. Their courses are curated by some of the best professors in the field and are collaborated with some of the best universities around the world.

Frequently Asked Questions

  1. How can I practice my HTML?

You can practice HTML by creating projects such as personal websites, using online coding platforms for tutorials and exercises, taking part in coding challenges, cloning existing websites, and experimenting with new HTML tags.

  1. Where can I exercise HTML?

First, you can do the HTML exercises given in this tutorial. Additionally, HTML can be practiced on online platforms such as Codecademy, freeCodeCamp, and W3Schools by creating personal websites, participating in coding challenges, or cloning existing websites.

  1. How can I practice HTML on my phone?

Although difficult, you can practice HTML on your phone. Firstly you have to download an HTML editor or a coding platform. You can then practice exercises and make projects here although it is not recommended.

  1. Can I learn HTML in 3 days?

Yes, with proper study and practice, you can learn the fundamentals of HTML in three days. In this time frame, you can cover the most important tags, attributes, and page structures. However, mastery and a deeper understanding may necessitate additional time and practice.

  1. Is learning HTML easy?

Yes, HTML is generally thought to be easier to learn than many other programming languages. It uses a simple syntax and focuses on structuring content on a web page. With some dedication and practice, most people can quickly grasp the fundamentals of HTML.

  1. How can I teach myself HTML?

You can learn HTML by using online tutorials and resources and practicing regularly by creating projects such as personal websites or forms. Then try experimenting with code editors. You can also try seeking help from coding communities and staying up to date on the latest standards and best practices.

Ankit Mittal

Ankit Mittal

Working as an Senior Software Engineer at upGrad, with proven experience across various industries.

Get Free Career Counselling
form image
+91
*
By clicking, I accept theT&Cand
Privacy Policy
image
Join 10M+ Learners & Transform Your Career
Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.
right-top-arrowleft-top-arrow

upGrad Learner Support

Talk to our experts. We’re available 24/7.

text

Indian Nationals

1800 210 2020

text

Foreign Nationals

+918045604032

Disclaimer

upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...