Summary
Highlights
Images can be resized using `width` and `height` attributes, specified in pixels. It's noted that pixels are not a standard unit of measurement across all screens.
The tutorial introduces the `<img>` tag for inserting images into HTML web pages. The `src` attribute is crucial for specifying the image's location.
Users can link to images available on the internet by providing their full URL in the `src` attribute. An example of linking a scary dinosaur image is demonstrated.
The `alt` attribute is explained as essential for providing descriptive text if an image cannot be loaded or for screen readers. It's recommended to always include a descriptive `alt` text.
The tutorial shows how to link to images stored on the user's local computer by providing the relative path to the image file in the `src` attribute, using a 'cute cat' image as an example.
A common issue with resizing is distorting the image by not maintaining its aspect ratio. The tutorial advises finding the original aspect ratio of the image and scaling both width and height proportionally to avoid distortion.
Images can be made clickable by embedding the `<img>` tag inside an `<a>` (anchor) tag, turning the image into a hyperlink. This demonstrates the versatility of images within HTML.
The tutorial re-emphasizes the importance of the `alt` attribute, showing how it serves as a crucial fallback when an image link is broken, maintaining the integrity and usability of the website.