html practice exercises | Code Ease (2024)

Answered on: Friday 29 March, 2024 / Duration: 13 min read

Programming Language: HTML , Popularity :9/10

Solution 1:

Exercise 1: Create a simple webpage with a heading and a paragraph

html
<!DOCTYPE html>
<html>
<head>
 <title>Exercise 1</title>
</head>
<body>
 <h1>Welcome to my webpage!</h1>
 <p>This is a simple exercise to practice HTML.</p>
</body>
</html>

Output:
Welcome to my webpage!
This is a simple exercise to practice HTML.

Exercise 2: Create a webpage with an image and a link

html
<!DOCTYPE html>
<html>
<head>
 <title>Exercise 2</title>
</head>
<body>
 <h1>Check out this cute cat!</h1>
 <img src="cat.jpg" alt="Cute Cat">
 <p>Click <a href="https://www.google.com">here</a> for more cute cats!</p>
</body>
</html>

Output:
Check out this cute cat!
[Image of a cute cat]
Click here for more cute cats!

Exercise 3: Create a webpage with a list

html
<!DOCTYPE html>
<html>
<head>
 <title>Exercise 3</title>
</head>
<body>
 <h1>My favorite fruits:</h1>
 <ul>
 <li>Apple</li>
 <li>Banana</li>
 <li>Orange</li>
 </ul>
</body>
</html>

Output:
My favorite fruits:
- Apple
- Banana
- Orange

These exercises are simple examples to practice basic HTML elements. You can modify and expand upon them to create more complex webpages.

Solution 2:

HTML Practice Exercise 1: Creating Basic Structure

Objective: Create a basic HTML document with a head, body, and title.

Code:

html
<!DOCTYPE html>
<html>
<head>
 <title>My First HTML Document</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML document. I hope you like it.</p>
</body>
</html>

Output:

html
<html>
 <head>
 <title>My First HTML Document</title>
 </head>
 <body>
 <h1>Welcome to My Website</h1>
 <p>This is my first HTML document. I hope you like it.</p>
 </body>
</html>

Explanation:

This code creates a basic HTML document that includes a title, header, and paragraph.

* : Specifies the document type as HTML5.
* : The root element of the document.
* : Contains the document's metadata, such as the title.
* : Defines the title of the document.
* : Contains the visible content of the document.
* Creates a level 1 heading.
*

Creates a paragraph.

HTML Practice Exercise 2: Adding Images and Links

Objective: Embed an image and create a link in an HTML document.

Code:

html
<!DOCTYPE html>
<html>
<head>
 <title>My Website with Images and Links</title>
</head>
<body>
 <h1>My Website</h1>
 <p>My website is still under construction, but here are some pictures of my dog:</p>
 <img src="dog.jpg" alt="My Dog">
 <a href="contact.html">Contact Me</a>
</body>
</html>

Output:

html
<html>
 <head>
 <title>My Website with Images and Links</title>
 </head>
 <body>
 <h1>My Website</h1>
 <p>My website is still under construction, but here are some pictures of my dog:</p>
 <img src="dog.jpg" alt="My Dog">
 <a href="contact.html">Contact Me</a>
 </body>
</html>

Explanation:

This code adds an image and a link to the previous HTML document.

* : Inserts an image into the document.
* src: Specifies the source of the image file.
* alt: Provides alternative text for the image, if it cannot be displayed.
* : Creates a hyperlink.
* href: Specifies the destination URL of the link.

HTML Practice Exercise 3: Creating a Simple Form

Objective: Create a simple form to collect user information.

Code:

html
<!DOCTYPE html>
<html>
<head>
 <title>My Form</title>
</head>
<body>
 <h1>My Form</h1>
 <form>
 <label for="name">Name:</label>
 <input type="text" id="name">
 <label for="email">Email:</label>
 <input type="email" id="email"> <input type="submit" value="Submit">
 </form>
</body>
</html>

Output:

html
<html>
 <head>
 <title>My Form</title>
 </head>
 <body>
 <h1>My Form</h1>
 <form>
 <label for="name">Name:</label>
 <input type="text" id="name">
 <label for="email">Email:</label>
 <input type="email" id="email"> <input type="submit" value="Submit">
 </form>
 </body>
</html>

Explanation:

This code creates a simple form that allows users to enter their name and email address.

* Defines a form.
* : Associates a label with an input element.
* : Creates an input field for user input.
* type: Specifies the type of input (text, email, etc.).
* id: Assigns a unique ID to the input element.
* : Creates a submit button.

Solution 3:

Sure, I'd be happy to provide a descriptive answer for HTML practice exercises with proper code examples and outputs.