HTML Exercises 1
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>[Link]</li>
<li>[Link]</li>
<li>[Link]</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="[Link] 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="[Link] target="_blank">Facebook</a></li>
<li><a href="[Link] target="_blank">Twitter</a></li>
<li><a href="[Link] 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="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">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>© 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>