Images turn a plain document into a real web page, and in HTML they are added with a single, self-closing element: img. Unlike paragraphs or headings, the img element has no content between tags — everything it needs comes from its attributes. The src attribute points to the image file, alt describes the image for people who cannot see it, and width and height tell the browser how much space to reserve while the page loads.
This matters in COP4813 because the site you build in this module must work for everyone and must not break when files move. A src path that is correct on your machine but wrong on the server produces a broken image; a missing or careless alt attribute makes your page unusable with a screen reader. You will also need to make sensible choices about file formats — JPEG for photographs, PNG for graphics needing transparency, SVG for logos and icons, and newer formats such as WebP for smaller file sizes.
As you watch, pay attention to three things: how relative paths are written when images live in a subfolder like images/, how each speaker decides what alt text should actually say (including when it should be empty), and why setting dimensions in the HTML or CSS helps page layout and performance. Try each example in your own editor rather than only watching.
A short, beginner-focused introduction from W3Schools covering the img element and its core attributes, including src, alt, and sizing. Based on its title and description, it walks through how images are embedded in a page and gives practical advice on using them correctly. It is part of a larger HTML tutorial series, so the explanations assume only basic HTML knowledge.
W3Schools is a widely used, reliable reference for HTML syntax, and this clip gives a fast, accurate overview of the img element that maps directly to the first subtopics of this lesson.
A longer tutorial from LinkedIn Learning focused specifically on img tag attributes and image resolution. The description indicates it addresses incorporating images in ways that are dynamic, accessible, and responsive, which suggests coverage of src, alt, and dimension attributes along with how images adapt to different screen sizes and resolutions.
It goes deeper than a basic introduction, connecting the width and height attributes to responsive and high-resolution displays — a useful bridge between syntax and real-world image sizing decisions.
An episode of the HTTP 203 series in which two Chrome developer advocates discuss what should actually go into an image's alt attribute. Rather than teaching syntax, it works through the judgment calls: describing the purpose of an image in context, what to do with decorative images, and common mistakes that make alt text unhelpful.
Produced by Chrome for Developers, it is an authoritative and unusually practical treatment of the alt text and accessibility best practices subtopics, where most students' mistakes occur.
Together these videos target MO2 directly: the W3Schools overview establishes correct img syntax with src and alt, the LinkedIn Learning tutorial extends that to width, height, and resolution choices, and the Chrome for Developers episode supplies the accessibility judgment needed to write alt text that genuinely helps users. The emphasis on relative source paths also reinforces the file and folder organization skills in MO4 and the relative-path thinking behind MO3, while the accessibility guidance gives you concrete criteria for the image and accessibility testing required in MO5 and supports the accessible page structure goal in MO1.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.