Image Gallery (Activity 5.1)

This activity showcased the use of the <figure> and <figcaption> tags to display images alongside descriptive captions, creating a structured gallery layout.

• Output (Activity 5.1): The browser output displays the images in a gallery format, and the captions appear below each image, providing titles and artists, demonstrating a complete visual and structural presentation. (Image Here: output2 – Image Gallery.jpg – showing multiple images with captions)

Styling and Sizing (Activity 5.2)

Activity 5.2 focused on applying basic inline styling and dimension control to a single image.

• Output (Activity 5.2): The output shows a single image (a rose) clearly rendered with the specified dimensions and surrounded by the black border, confirming the successful application of both sizing and border styling. (Image Here: output3 – Image with Border.jpg – showing rose image with black border)

Clickable Images (Activity 5.3)

This exercise combined the linking power of the anchor tag (<a>) with the visual element of the <img> tag to create an interactive, clickable image.

• Output (Activity 5.3): The output displays the TikTok icon image. When a user clicks this image, the browser navigates to the external TikTok website in a new tab, proving the image acts as a functioning hyperlink. (Image Here: output4 – Clickable Image Link.png – showing TikTok icon)

Self-Linking Image (Activity 5.4)

Activity 5.4 built upon the previous concept by creating an image that links back to its own file, demonstrating the ability to open the full-sized image in the browser.

• Output (Activity 5.4): The page displays the image with a heading “Self-Linking Image.” Clicking the displayed image opens the image file itself in the browser, isolating it from the HTML document. (Image Here: output5 – Self-Linking Image.jpg – showing the self-linking image)

HTML Codes

HTML Code (Activity 5.1): The code uses multiple <figure> blocks. Each block contains an <img> tag with the relative path to the image file (e.g., src="image1.webp"), along with specific width and height attributes to control size. Crucially, the <figcaption> tag provides context for the famous artworks displayed. (Image Here: html code.png – showing activity5-1.html and activity5-2.html code)

HTML Code (Activity 5.2): The <img> tag for this activity includes the src attribute pointing to a local file (Flower.jpg). The width and height attributes are set to define the image size, and an inline style attribute is used to apply a solid 2-pixel black border, demonstrating simple styling control. (Image Here: html code.png – showing activity5-1.html and activity5-2.html code)

HTML Code (Activity 5.3): The key technique is nesting the <img> tag inside the <a> tag. The <a> tag sets the external destination (href="https://www.tiktok.com/") and the target (target="_blank" to open in a new tab). The image path and dimensions are set on the inner <img> tag. (Image Here: html code2.png – showing activity5-3.html and activity5-4.html code)

HTML Code (Activity 5.4): Similar to Activity 5.3, the <img> is wrapped in an <a> tag. However, the href attribute of the <a> tag points to the same file path as the src attribute of the <img> tag (golo.jpg). This allows the user to click the preview image and view the full-resolution image alone in the browser window. (Image Here: html code2.png – showing activity5-3.html and activity5-4.html code)

What I Learned

Activity 5 solidified the process of integrating and controlling visual content in HTML:

• Essential Attributes: I mastered the fundamental attributes of the <img> tag: src (defining the image location), alt (crucial for accessibility and SEO when the image fails to load), and setting explicit width and height for layout stability.
• Image as a Link: By nesting <img> inside <a>, I learned how to transform any visual element into an interactive navigational tool, whether for external sites or local files.
• Structured Content: The use of <figure> and <figcaption> introduced semantic structure for media, which is best practice for ensuring images and their descriptions are logically grouped.