HTML Lesson 10 – Images and Media | Dataplexa

HTML

I. HTML Fundamentals
1. Introduction to HTML 2. How the Web Works 3. HTML Document Structure 4. HTML Elements and Tags 5. HTML Attributes 6. Text Formatting Tags 7. Headings and Paragraphs 8. Comments and Whitespace
II. Core HTML Elements
9. Links and Navigation 10. Images and Media 11. Lists in HTML 12. Tables in HTML 13. Forms Overview 14. Input Types 15. Form Validation Basics 16. Buttons and Actions
III. Advanced HTML & Semantics
17. Semantic HTML 18. Layout Elements 19. Audio and Video 20. Iframes and Embeds 21. Meta Tags and SEO 22. Accessibility Basics 23. ARIA Attributes 24. Responsive HTML
IV. Best Practices & Projects
25. HTML Best Practices 26. Clean and Readable HTML 27. HTML Performance Tips 28. HTML Security Basics 29. Browser Compatibility 30. Debugging HTML 31. Mini Project – Portfolio Page 32. Mini Project – Landing Page 33. Mini Project – Form Page 34. Mini Project – Blog Layout 35. HTML Interview Questions 36. HTML Real-World Use Cases 37. HTML Case Study 38. HTML Project Planning 39. HTML Final Project 40. HTML Course Wrap-Up
HTML MODULE • LESSON 10

Images and Media

Master the img tag, add photos to Alex's portfolio, and control how images display on your website.

Pictures make websites come alive. Think about Instagram, Pinterest, or any news site. Without images, they'd be boring walls of text. The img tag brings visual content into your HTML pages. Unlike most HTML tags, img is self-closing. It doesn't wrap around content like paragraphs or headings. Instead, it points to an image file somewhere else and displays it right in your page.

The img Tag Anatomy

Every image needs two essential pieces: the tag itself and a path to the image file. The src attribute (short for "source") tells the browser which image to load.
<img src ="photo.jpg" alt ="Alex smiling" >
Opening tag • Attribute name • Attribute value • Alt attribute • Alt text • Self-closing
The alt attribute describes what's in the picture. Screen readers use this text to help visually impaired users understand your content. Search engines read it too. Always include meaningful alt text.

Adding Images to Alex's Portfolio

Alex wants to add a professional headshot to their portfolio homepage. The image file sits in the same folder as the HTML file, making the path simple. 
<!-- Alex's professional photo on the homepage -->
<h1>Alex Thompson</h1>
<img src="headshot.jpg" alt="Alex Thompson, web developer">
<p>Welcome to my portfolio. I build modern websites that work beautifully on every device.</p>
localhost/index.html

What just happened?

The browser loaded Alex's headshot image and displayed it between the heading and paragraph. The alt text describes the image content for accessibility. Try this: hover over the image placeholder to see how screen readers would interpret it.

Notice how the image appears exactly where you placed the img tag in your HTML. Images are inline elements by default, meaning they flow with your text content.

Controlling Image Size

Images often come in huge sizes straight from cameras or design tools. You can control their display size using width and height attributes, measured in pixels. 
<!-- Resizing Alex's headshot to fit the layout -->
<img src="headshot.jpg" alt="Alex Thompson, web developer" width="200" height="200">
<h2>About Me</h2>
<p>I specialize in creating user-friendly websites using HTML, CSS, and JavaScript.</p>
localhost/index.html

What just happened?

The image now displays at exactly 200 by 200 pixels, creating a neat square format. The browser scaled the original image to fit these dimensions. Try this: experiment with different width values to see how the layout changes.

Watch out for distortion

Setting both width and height can stretch your image unnaturally. If your original photo is rectangular but you force it into a square, people might look squeezed or stretched. Set only width OR height to maintain the original proportions.

Project Screenshots

Alex's portfolio needs screenshots of completed projects. Each project gets its own image with a descriptive caption underneath. 
<!-- Project showcase with images -->
<h2>My Projects</h2>
<h3>E-commerce Website</h3>
<img src="ecommerce-project.jpg" alt="Online store homepage with product grid" width="400">
<p>Built a responsive online store with shopping cart functionality.</p>

<h3>Restaurant Website</h3>
<img src="restaurant-project.jpg" alt="Restaurant homepage with menu and contact info" width="400">
<p>Created an elegant site featuring online reservations and menu display.</p>
localhost/projects.html

What just happened?

Two project images appeared with consistent 400-pixel widths, creating a uniform look. Each image sits between its project title and description. The alt text describes what visitors would see in each screenshot. Try this: notice how the layout stays organized even with different image content.

Professional portfolios like those on Dribbble or Behance follow this exact pattern. Project title, screenshot, brief description. Simple but effective.

Image File Paths

Your src attribute can point to images in different locations. Understanding file paths prevents broken image links that show up as empty boxes with red X marks.

Same Folder

src="photo.jpg"

Image sits next to your HTML file. Simplest approach for small sites.

Images Folder

src="images/photo.jpg"

Organized approach. Create an "images" folder to keep media files separate from HTML.

Most developers create an images folder (or assets or media) to stay organized. Your folder structure might look like this:
portfolio/
├── index.html
├── projects.html
└── images/
    ├── headshot.jpg
    ├── ecommerce-project.jpg
    └── restaurant-project.jpg
When your images live in a subfolder, include the folder name in your src path: src="images/headshot.jpg". The forward slash tells the browser to look inside the images folder.

Common Image Formats

Different image formats serve different purposes. Choosing the right format affects file size, quality, and loading speed.

JPG/JPEG

Photos and complex images. Smaller file sizes, good for web. Most camera photos are JPEGs.

PNG

Graphics, logos, images with transparency. Larger files but perfect quality. Great for screenshots.

SVG

Vector graphics and icons. Scale to any size without blur. Perfect for logos and simple graphics.

WebP

Modern format with excellent compression. Smaller than JPG with better quality. Supported by all modern browsers.

For Alex's portfolio, use JPG for photographs (headshot, lifestyle photos) and PNG for project screenshots (they stay crisp). Many design tools export PNG by default.

The Title Attribute

Add a title attribute to show helpful tooltips when users hover over images. This creates a small popup with additional information. 
<!-- Adding hover tooltips to portfolio images -->
<img src="headshot.jpg" 
     alt="Alex Thompson, web developer" 
     title="Professional headshot taken in 2024"
     width="200">
     
<img src="ecommerce-project.jpg" 
     alt="Online store homepage with product grid"
     title="Click to view the live website"
     width="400">
localhost/index.html

What just happened?

Both images now show hover tooltips with extra context. The title attribute adds this interactive layer without cluttering the page layout. Try this: hover over each placeholder to see the tooltip effect in action.

Pro tip: Keep title text short and useful. "Photo of Alex" doesn't add value, but "Professional headshot taken in 2024" or "Click to view live site" gives users helpful context they can't get from looking at the image alone.

Quiz

Which attribute tells the browser where to find an image file?

Why is the alt attribute important for images in Alex's portfolio?

Alex organizes images in a subfolder called "images". What src path loads a file named "portfolio.jpg" from that folder?

Lists in HTML

Organize content with bullet points, numbered steps, and navigation menus using HTML list elements.

← Previous Course Index Next →