Welcome to Day 3 of your journey to mastering HTML and CSS! Today, we'll focus on how to create lists and add images to your web pages. By the end of this post, you'll be able to organize content using lists and enhance your pages with images.
please subscribe to my YouTube channel to support my channel and get more web development tutorials.
Creating Lists in HTML
HTML provides several types of lists to organize content: unordered lists, ordered lists, and description lists.
1.Unordered Lists: Unordered lists are used for items that don’t require a specific order. They use the <ul> tag and list items are enclosed in <li> tags.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
2.Ordered Lists: Ordered lists are used for items that need to be in a specific order. They use the <ol> tag and list items are enclosed in <li> tags.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
3.Description Lists: Description lists are used to display a list of terms and their descriptions. They use the <dl>, <dt>, and <dd> tags.
<dl>
<dt>Term 1</dt>
<dd>Description of Term 1</dd>
<dt>Term 2</dt>
<dd>Description of Term 2</dd>
</dl>
Adding Images in HTML
Images are an essential part of web content, making it more engaging and informative. The <img> tag is used to embed images in HTML.
1.Basic Image: Use the src attribute to specify the image source and the alt attribute to provide alternative text.
<img src="image.jpg" alt="Description of the image">
2.Image Size: You can specify the width and height of an image using the width and height attributes.
<img src="image.jpg" alt="Description of the image" width="300" height="200">
3.Responsive Images: To make images responsive, you can use CSS properties like max-width and height.
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<img src="image.jpg" alt="Description of the image">
Creating Your HTML Document with Lists and Images
Let's create an HTML document that incorporates lists and images:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lists and Images</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<h2>Unordered List</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Description List</h2>
<dl>
<dt>Term 1</dt>
<dd>Description of Term 1</dd>
<dt>Term 2</dt>
<dd>Description of Term 2</dd>
</dl>
<h2>Adding an Image</h2>
<img src="image.jpg" alt="A beautiful scenery">
<p>This is an example of an image embedded in an HTML page.</p>
</body>
</html>
Summary
In this blog post, we learned how to create different types of lists and how to add images to an HTML document. Practice using these tags to organize your content and enhance your web pages with images.
Series Index
| Part | Title | Link |
|---|---|---|
| 1 | Day 1: Getting Started with HTML | Read Part 1 |
| 2 | Day 2: Text Formatting and Links in HTML | Read Part 2 |
| 3 | Day 3: Lists and Images in HTML | Read Part 3 |
| 4 | Day 4: Creating Tables in HTML | Read Part 4 |
| 5 | Day 5: Creating Forms in HTML | Read Part 5 |
| 6 | Day 6: Introduction to Semantic HTML | Read Part 6 |
| 7 | Day 7: Introduction to CSS | Read Part 7 |
Stay tuned for Day 4, where we will cover tables and their uses in HTML. Happy coding!
Follow me for more tutorials and tips on web development. Feel free to leave comments or questions below!
Follow and Subscribe:
- Website: Dipak Ahirav
- Email: dipaksahirav@gmail.com
- Instagram: devdivewithdipak
- YouTube: devDive with Dipak
- LinkedIn: Dipak Ahirav
Top comments (0)