Gallery
Share
Explore

HTML Exercises 1

Student Lab Workbook - Web Technologies: HTML Mastery
Introduction
Welcome to the Student Lab Workbook for Web Technologies! In this workbook, you will find 10 progressively complex exercises designed to teach new learners how to write full-featured HTML pages. By completing these exercises, you will gain a solid understanding of HTML and be able to create your own websites from scratch.

Student Lab Workbook: HTML Basics

Introduction

This workbook contains 10 simple HTML writing exercises that cover various HTML elements. By completing these exercises, you will gain a solid understanding of HTML and become proficient web developers.

Exercise 1: Creating an HTML Document

Create a basic HTML document with a <!DOCTYPE html> declaration, an opening and closing <html> tag, a <head> section containing a <title> tag, and a <body> section.
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Document</title>
</head>
<body>

</body>
</html>

Exercise 2: Adding Headings and Paragraphs

Add a level 1 heading (<h1>) and two paragraphs (<p>) inside the <body> section of your HTML document.
html
Copy code
<body>
<h1>Welcome to My Website</h1>
<p>My name is John Doe, and this is my personal website.</p>
<p>I love web development and sharing my knowledge with others.</p>
</body>

Exercise 3: Creating Lists

Create an ordered list (<ol>) and an unordered list (<ul>) inside the <body> section, each containing three list items (<li>).
html
Copy code
<body>
...
<h2>My Hobbies</h2>
<ol>
<li>Playing guitar</li>
<li>Reading books</li>
<li>Traveling</li>
</ol>
<h2>My Favorite Websites</h2>
<ul>
<li>example.com</li>
<li>anotherexample.com</li>
<li>yetanotherexample.com</li>
</ul>
</body>

Exercise 4: Adding Images

Add an image (<img>) inside the <body> section, using the src attribute to specify the image file URL.
html
Copy code
<body>
...
<h2>My Favorite Place</h2>
<img src="https://example.com/myimage.jpg" alt="A beautiful landscape">
</body>

Exercise 5: Creating Hyperlinks

Add three hyperlinks (<a>) inside the <body> section, each pointing to a different website.
<body>
...
<h2>My Social Media Profiles</h2>
<ul>
<li><a href="https://facebook.com" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com" target="_blank">Twitter</a></li>
<li><a href="https://linkedin.com" target="_blank">LinkedIn</a></li>
</ul>
</body>

Exercise 6: Creating a Navigation Menu

Create a simple navigation menu using an unordered list (<ul>) and hyperlinks (<a>).
html
Copy code
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
...
</body>

Exercise 7: Adding a Footer

Add a footer (<footer>) inside the <body> section, containing a copyright notice.
html
Copy code
<body>
...
<footer>
<p>&copy; 2022 John Doe. All rights reserved.</p>
</footer>
</body>

Exercise 8: Adding Basic CSS

Add a <style> tag inside the <head> section and provide basic CSS styling for your headings, paragraphs, lists, images, hyperlinks, navigation menu, and footer.
html
Copy code
<head>
...
<style>
body {
font-family: Arial, sans-serif;
}
h1, h2 {
color: #333;
}
a {
text-decoration: none;
color: blue;
}
a:hover {
color: red;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav li {
display: inline;
margin-right: 10px;
}
footer {
text-align: center;
font-size: 0.8em;
}
</style>
</head>

Exercise 9: Creating a Responsive Design

Add a media query inside the <style> tag to make your navigation menu and other page elements responsive.
html
Copy code
<style>
...
@media screen and (max-width: 600px) {
nav li {
display: block;
margin-bottom: 10px;
}
img {
max-width: 100%;
height: auto;
}
}
</style>

Exercise 10: Testing and Iterating

Test your HTML document on different devices and browsers to ensure compatibility and consistency. Make any necessary adjustments to your code.
By completing these exercises, you have learned various HTML elements and created a basic, responsive website. Keep practicing anditerating on your code to improve your web development skills. Good luck!
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.