Web · Links and Images
Quizz
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Identify the Correct Syntax
Which of the following code snippets correctly shows an image with a link around it?
Options
• ```<a href="https://example.com"><img src="image.jpg" alt="Example"></a>```
• ```<img href="https://example.com" src="image.jpg" alt="Example">```
• ```<a src="https://example.com"><img href="image.jpg" alt="Example"></a>```
• ```<link href="https://example.com"><img src="image.jpg" alt="Example"></link>```
Hint : Think about which tag is used for links and which attributes belong to each tag (links vs images).
Exercise 2 — Complete the Email Link
Complete the HTML code to create a proper email link that opens the user's email client with a subject line about Codémon support.
<a ____="____support@codemon.com?subject=Codémon Support">Contact Support</a>
Options: href mailto: src email: link url=
Hint : Remember the correct attribute for links and the proper protocol for email links.
Exercise 3 — Match HTML Attributes with Their Purpose
Match each HTML attribute with its correct purpose:
Items to match
• href
• src
• alt
• target
Definitions
• Specifies the URL for a link
• Specifies the path to an image
• Provides alternative text for an image
• Specifies where to open a linked document
Exercise 4 — Best Practice for Link Text
Which of the following link texts provides the best accessibility and user experience?
Options
• ```<a href="guide.html">Codémon Training Guide</a>```
• ```<a href="guide.html">Click here</a>```
• ```<a href="guide.html">https://codemon.com/guides/training</a>```
• ```<a href="guide.html">Read more...</a>```
Hint : Consider which link text clearly describes where the link will take the user without requiring additional context.
Exercise 5 — Complete the Accessible Image
Complete the HTML code to create an accessible image of Aquachu with 300 width and 200 height.
<img ____="aquachu.jpg" ____="Aquachu, a blue water-type Codémon" ____="300" ____="200">
Options: src alt width height size link
Hint : Think about the essential attributes for an image tag that provide both the image source and information for accessibility.
Exercise 6 — Choosing the Correct Path
You're working on an HTML file located at
/codemon/guides/beginners.html
. Which path would correctly link to an image at
/codemon/images/aquachu.jpg
?
Options
• ```"../images/aquachu.jpg"```
• ```"images/aquachu.jpg"```
• ```"/images/aquachu.jpg"```
• ```"../../images/aquachu.jpg"```
Hint : Consider where the HTML file is located relative to the image. You need to navigate from the current directory to reach the images directory.
Exercise 7 — Match Link Types with Examples
Match each type of link with its correct example:
Items to match
• Absolute URL
• Relative URL
• Email link
• Anchor link
Definitions
• <a href="https://www.codemon.com/guides">Guides</a>
• <a href="guides/beginners.html">Beginners</a>
• <a href="mailto:info@codemon.com">Contact Us</a>
• <a href="#section3">Jump to Section 3</a>
Exercise 8 — Complete the Anchor Link
Complete the HTML code to create a table of contents with an anchor link to a section further down the page.
<!-- Table of contents -->
<ul>
<li><a ____="____">Types of Codémon</a></li>
</ul>
<!-- Later in the document -->
<h2 ____="types">Types of Codémon</h2>
Options: href #types src link id name
Hint : Consider how anchor links work - one element needs an identifier, and the link needs to reference that identifier with a special symbol.
Exercise 9 — Best Alt Text
Which alt text best describes a chart showing the relative strengths of different Codémon types?
Options
• "Chart showing water types are strong against fire types, fire types are strong against plant types, and plant types are strong against water types"
• "Image of a chart"
• "Codémon strengths and weaknesses"
• "This is a colorful circular diagram with arrows pointing between different Codémon type icons, showing which types are effective against others in a visually appealing way"
Hint : Consider which alt text provides the most useful information about the content of the image without being too lengthy or too vague.
Exercise 10 — Complete the Phone Link
Complete the HTML code to create a proper phone link that allows mobile users to call the Codémon support line directly.
<a ____="____+1-555-123-4567">Call Codémon Support</a>
Options: href tel: phone: src call: dial:
Hint : Think about the proper protocol to use for phone numbers in links, similar to how email links work.
Exercise 11 — Image Dimensions Best Practice
What's the best practice when using width and height attributes on images?
Options
• Always specify both width and height to prevent layout shifts during loading
• Never specify dimensions and rely on CSS for all styling
• Only specify width and let the browser calculate height automatically
• Always use percentage values instead of pixel values
Hint : Consider how specifying dimensions affects page loading behavior and user experience.
Exercise 12 — Match Link Attributes with Values
Match each link attribute with an appropriate value:
Items to match
• href
• target
• rel
• download
Definitions
• "https://codemon.com/guide"
• "_blank"
• "noopener noreferrer"
• "codemon-guide.pdf"
Exercise 13 — Complete the External Link
Complete the HTML code to create an external link that opens in a new tab with recommended security attributes.
<a href="https://www.codemon.com" ____="____" ____="noopener noreferrer">Official Codémon Website</a>
Options: target _blank new tab rel security
Hint : Think about which attribute controls where a link opens and what additional security measures are recommended for external links.
Exercise 14 — Troubleshooting Broken Links
Your image isn't displaying, and you see a broken image icon. The HTML code is:
<img src="/images/codemon.jpg" alt="Codémon">
. What's the most likely issue?
Options
• The path to the image is incorrect or the file doesn't exist
• The alt attribute is causing the image to fail
• Using src instead of href for the image source
• Missing width and height attributes
Hint : Consider what causes a broken image icon to appear, and which part of the code controls where the browser looks for the image file.
Exercise 15 — Decorative Images
What's the correct way to handle a purely decorative image that doesn't add any meaningful content to the page?
Options
• ```<img src="decoration.jpg" alt="">```
• ```<img src="decoration.jpg">```
• ```<img src="decoration.jpg" alt="decorative image">```
• ```<img src="decoration.jpg" role="presentation">```
Hint : Think about what's the best practice for alt text on images that are purely decorative and don't add content to the page.
Exercise 16 — Create a Thumbnail Link
Complete the HTML code to create a thumbnail image that links to a larger version of the same image.
<____ ____="large-aquachu.jpg">
<img ____="aquachu-thumb.jpg" ____="Thumbnail of Aquachu" width="100" height="100">
</a>
Options: a href src alt img link
Hint : Consider the correct structure for creating an image that also functions as a link, and which attributes belong to which elements.
Exercise 17 — Match Path Types with Scenarios
Match each type of path with the scenario where it's most appropriate to use:
Items to match
• Absolute URL (https://...)
• Relative URL (page.html)
• Root-relative URL (/images/pic.jpg)
• Parent directory URL (../styles/main.css)
Definitions
• Linking to a different website
• Linking to another page in the same directory
• Linking to a resource from the root of your website
• Linking to a resource in a different branch of the folder structure
Exercise 18 — Link Accessibility
Which of the following is a best practice for making links more accessible?
Options
• Make link text descriptive of where the link will take users
• Always use "click here" for link text to make the action clear
• Use only URLs as link text to show the exact destination
• Keep all link text as short as possible, ideally just one word
Hint : Consider how different users navigate web content, especially those using screen readers or other assistive technologies.
Exercise 19 — Complete the Image with Dimensions
Complete the HTML code to create an image of Pyrochu with appropriate width and height attributes.
<img src="pyrochu.jpg" alt="Pyrochu fire-type Codémon" ____="300" ____="200">
Options: width height size w h dimension
Hint : Think about which attributes are used to specify the size of an image in pixels.
Exercise 20 — Correct Anchor Link
Which is the correct way to create a link that jumps to an element with id="types" on the same page?
Options
• ```<a href="#types">Jump to Types</a>```
• ```<a href="types">Jump to Types</a>```
• ```<a name="types">Jump to Types</a>```
• ```<a href="@types">Jump to Types</a>```
Hint : Remember the correct syntax for creating an anchor link to another part of the same page.
Exercise 21 — Best Image Format
Which image format would be most appropriate for a logo with transparent background on a website?
Options
• PNG
• JPEG
• GIF
• BMP
Hint : Consider which image formats support transparency and are commonly used for web graphics with clean edges.
Exercise 22 — Match Link Types with Examples
Match each type of link with its correct example:
Items to match
• External link
• Email link
• Phone link
• Anchor link
Definitions
• <a href="https://www.example.com">Visit Example</a>
• <a href="mailto:contact@codemon.com">Email Us</a>
• <a href="tel:+15551234567">Call Support</a>
• <a href="#section1">Go to Section 1</a>
Exercise 23 — Create a Download Link
Complete the HTML code to create a link that will prompt the user to download a PDF file named 'codemon-guide.pdf' when clicked.
<a ____="codemon-guide.pdf" ____="codemon-guide.pdf">Download Codémon Guide</a>
Options: href download src target link file
Hint : Consider which attribute is needed to specify the resource location and which attribute tells the browser to download the file instead of navigating to it.
Exercise 24 — Missing Image Behavior
What happens when a browser tries to load an image but the file is missing or the path is incorrect?
Options
• The browser displays the alt text in place of the image
• The browser automatically searches for a similar image
• The page fails to load completely
• The image is replaced with a default placeholder
Hint : Think about why the alt attribute is important and what role it plays when images cannot be displayed.
Exercise 25 — Anchor Link Components
Match each part of an anchor link system with its correct syntax:
Items to match
• Link to a section
• Target section identifier
• Link to a specific section on another page
• Link to top of current page
Definitions
• <a href="#section-id">Go to section</a>
• <h2 id="section-id">Section Title</h2>
• <a href="page.html#section-id">Go to section on another page</a>
• <a href="#">Back to top</a>