🖼️

Web Image Organization and HTML Basics

Sep 15, 2025

Overview

This lecture introduces how to organize and add images to a website using HTML, focusing on file structure, correct coding practices, and best practices for web image management.

HTML Page Structure Review

  • All HTML pages must include the <head> section with a <title>, which appears in the browser tab.
  • The <head> holds meta-information not shown on the page; the <body> contains all visible content.
  • Use lowercase for all tags and maintain clean, indented code for clarity and effective communication.

Image Tag Basics

  • The image tag structure is: <img src="..." alt="..." title="..." height="..." width="..." />.
  • src specifies the image location, including folder and file name.
  • alt and title are for accessibility and will be discussed further in another video.
  • height and width define the image dimensions to maintain aspect ratio.

Organizing Images and File Structure

  • Store all images in a dedicated images folder/directory within your main website folder.
  • Use FTP (e.g., FileZilla) to mirror this organization locally and on your web server.
  • Keep HTML files (e.g., index.html, portfolio.html) in the main directory and images in the images subfolder.

Relative Linking for Images

  • To display an image from a subfolder, use a relative path like images/filename.jpg in the src attribute.
  • The browser locates images based on the path from the HTML file's location to the image file.

Best Practices for Image Files

  • Use all lowercase letters and avoid spaces in image file names; use dashes instead of underscores.
  • Give image files meaningful names that reflect the content (e.g., portrait-bill.jpg).
  • Check image dimensions using "Get Info" (Mac/PC) or image editor (like Photoshop).
  • Always upload both the HTML file and the image to the server for them to appear online.

Common Mistakes and Solutions

  • Not uploading the image file to the server will result in missing images online.
  • Oversized images can be adjusted by setting appropriate height and width attributes or resizing before upload.

Key Terms & Definitions

  • HTML — HyperText Markup Language, used to create web pages.
  • <img> tag — HTML element that embeds an image in a webpage.
  • Relative Path — Directory-based reference showing the location of a file from the current folder.
  • FTP (File Transfer Protocol) — Tool to move files between local and web server directories.
  • Clean Coding — Practice of writing code that is well-organized, readable, and follows conventions.

Action Items / Next Steps

  • Check and update all HTML files to include a <head> and a personalized <title>.
  • Organize your website folder structure: place images in an images folder.
  • Rename image files using lowercase, no spaces, and meaningful names.
  • Add a welcoming message and a picture of yourself (or a representative image) to your homepage.
  • Upload all updated files—including images—to your server.
  • Complete the assigned reading in the textbook for more detailed coverage of images in HTML.

Full transcript