HTML Unit 3: Images and Tables Flashcards
What is the purpose of the <img> tag in HTML?
Write an example of an <img> tag that includes its required attributes.
The <img> tag is used to embed an image in a web page. It creates a holding space for the referenced image, which is linked rather than inserted directly.
<img src="path/to/image.jpg" alt="Description of the image">
What is the significance of the <img> tag being an empty tag?
The <img> tag is an empty tag because it does not have a closing tag. It contains only attributes to define the image source and alternative text.
What does the src attribute do?
Load the image from a specified URL. When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.
Why is it important to provide a descriptive value for the alt attribute?
Providing a descriptive value for the alt attribute improves accessibility by helping screen readers convey the content of the image to users with visual impairments. It also provides context if the image cannot be loaded.
How should you handle the alt attribute for purely decorative images?
For purely decorative images that do not add meaningful content, you can use an empty alt attribute:
<img src="decorative-pattern.jpg" alt="">
This tells screen readers to ignore the image.
How can you specify the width and height of an image?
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Why is it recommended to use the style attribute for specifying image dimensions in HTML?
Using the style attribute for image dimensions prevents stylesheets from overriding the size of images, ensuring more consistent rendering.
What would happen in the following example if the external CSS rule sets width: 100% for images?
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
The image’s width would be overridden by the external CSS rule and resized to 100% of its container’s width.
Provide an example of referencing an image stored in a folder named “assets” in your project.
<img src="/assets/image.png" alt="Example Image" style="width:150px;height:150px;">
How do you reference an image from another server or website?
To reference an image from another server, use an absolute URL in the src attribute. You must have permission to use external images, as they might be under copyright. Using images without permission can violate copyright laws. Take note that the link to the external image might change or break.
How do you use an image as a hyperlink in HTML?
To use an image as a link, place the <img></img> tag inside an <a> tag:</a>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
How do you make an image float to the right of the text using CSS?
Use the float property in the style attribute:
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> The image will float to the right of the text.</p>
What does the CSS float property do when applied to an image?
The float property allows the image to float to the left or right of the surrounding text, causing the text to wrap around the image.
What should you be cautious about when using floating images?
When using floating images, be mindful of layout issues, as excessive use of floats can cause overlapping content or disrupt the page’s flow. It’s also important to clear floats when necessary. Clearing floats using style="clear:both;" causes any next elements to be entirely below any (left and right) floating images.
What is the “clearfix hack”, and when is it used?
having a clearfix class, setting.clearfix::after {
content: "";
clear: both;
display: table;
}
And then assigning this class to any container containing floating images, automatically handles clearing floats, and makes sure elements ‘flow around floats’.
