0
0
HTMLmarkup~15 mins

Image sizing basics in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Image sizing basics
📖 Scenario: You are creating a simple webpage to display a company logo. The logo image needs to be shown with a specific size to fit nicely on the page.
🎯 Goal: Build a basic HTML page that includes an image with a fixed width and height using HTML attributes.
📋 What You'll Learn
Use semantic HTML5 structure
Include an image with the exact source URL 'https://example.com/logo.png'
Set the image width to 200 pixels using the width attribute
Set the image height to 100 pixels using the height attribute
Add an alt attribute describing the image as 'Company Logo' for accessibility
💡 Why This Matters
🌍 Real World
Websites often need to display logos or pictures at specific sizes to keep the design neat and consistent.
💼 Career
Knowing how to properly size images and add alt text is essential for web developers to create accessible and visually appealing websites.
Progress0 / 4 steps
1
Create the basic HTML structure
Write the basic HTML5 skeleton with html, head, and body tags. Inside the body, add an empty img tag.
HTML
Need a hint?

Remember to include the img tag inside the body section.

2
Add the image source and alt text
Add the src attribute with the value "https://example.com/logo.png" and the alt attribute with the value "Company Logo" to the img tag.
HTML
Need a hint?

The src attribute tells the browser where to find the image. The alt text helps screen readers describe the image.

3
Set the image width
Add the width attribute to the img tag and set it to 200 to fix the image width to 200 pixels.
HTML
Need a hint?

The width attribute controls how wide the image appears on the page.

4
Set the image height
Add the height attribute to the img tag and set it to 100 to fix the image height to 100 pixels.
HTML
Need a hint?

The height attribute controls how tall the image appears on the page.