Images | HTML | Tutorial 9

Summary

In this tutorial by Draft Academy, Mike explains how to effectively use images on a website using HTML. He covers essential elements such as the `<img>` tag, detailing attributes like `src` for image location and `alt` for alternative text. Mike demonstrates how to link images from the internet and local files, emphasizing the importance of maintaining the aspect ratio when resizing images. He also shows how to make images clickable by wrapping them in anchor tags. The tutorial highlights best practices for using images to enhance web design while ensuring accessibility.

Takeaways

• 😀 Using images on your website enhances visual appeal and engagement.
• 🖼️ An image tag is created using the <img> tag, which includes the 'src' attribute for the image location.
• 🌐 Images can be linked from the internet by pasting the image's URL into the 'src' attribute.
• 💾 You can also link to images stored on your computer by providing the file path in the 'src' attribute.
• 📝 The 'alt' attribute is crucial for accessibility, providing alternative text when an image cannot be displayed.
• 📏 Images can be resized using 'width' and 'height' attributes, but maintaining the aspect ratio is important.
• 🔄 An image's aspect ratio can be calculated from its original dimensions to avoid distortion when resizing.
• 🔗 Images can be made clickable by wrapping the <img> tag with an <a> tag, linking to another URL.
• 💡 Always include the 'alt' attribute to ensure a good user experience and website functionality.
• 👍 Viewer feedback is encouraged to help improve the content of future tutorials.

Q & A

What is the primary purpose of the tutorial?

The tutorial aims to teach users the basics of using images on their websites, including how to insert, resize, and properly attribute images in HTML.

What is the syntax for the HTML image tag?

The syntax for the HTML image tag is <img>, which is a self-closing tag that requires the 'src' and 'alt' attributes.

How do you specify the location of an image in the image tag?

You specify the location of an image in the image tag using the 'src' attribute, which can contain a URL or a file path.

Why is the 'alt' attribute important?

The 'alt' attribute is important for accessibility; it provides a text description of the image for users who cannot see it and appears when the image cannot be loaded.

What are some common reasons an image might not load?

An image might not load due to reasons such as the image being deleted from its source, an incorrect URL, or browser issues.

How can you resize an image in HTML?

You can resize an image in HTML by using the 'width' and 'height' attributes in the image tag, specifying values in pixels.

What should you keep in mind when resizing images?

When resizing images, it's important to maintain the aspect ratio to prevent distortion. This means that the proportional relationship between width and height should remain consistent.

Can images be clickable in HTML? If so, how?

Yes, images can be made clickable by wrapping the <img> tag in an anchor (<a>) tag, linking it to a URL.

What is a good practice regarding the use of the 'alt' attribute?

A good practice is to always include the 'alt' attribute with a descriptive sentence about the image, enhancing both accessibility and user experience.

What did the tutorial suggest to do if an image link is broken?

If an image link is broken, the browser will display the text from the 'alt' attribute, which is why it's crucial to always include it.