Top of the Page

This example demonstrates several principles. It shows how to work with HTML files and images stored in different folders. It also shows some aspects of sizing images.

Note that in this example that the full path and filename is needed when SRC is defined. The PATH is the part before the filename that explains the path of folders used to find the file. Each part of the path is separated by a forward slash. In this example, the image files are located in the subfolder called images. It is a good idea to use RELATIVE paths (which explain the location of the file RELATIVE to where THIS HTML file is located on disk) rather than ABSOLUTE paths (which explain the location of the file in relation to the root directory of a drive letter). Relative paths will continue to work when your site is moved to a different computer or uploaded to a web server. Absolute paths will usually fail when the site is relocated.
If you see a red X in place of an image while browsing the web, it is usually because the image file is stored somewhere other than where the html file SRC attribute is specifying.

This second example demonstrates the good practice of using the WIDTH and HEIGHT attribute to tell the browser the image size. Although they are optional, pages will often load quicker and smoother with these attributes.

This third example demonstrates the use of the WIDTH and HEIGHT attribute to adjust the image size from its default "full" size to a smaller size. In the case of the simple graphic, the text becomes hard to read. And the sloppy resizing of the elk (reducing width without reducing its height in proportion) causes distortion. Finally, resizing images causes extra work (and delay) for the browser and means the modem spent more time to download a larger file than was needed.

This fourth example demonstrates resizing images larger with the WIDTH and HEIGHT attributes. The text in the simple graphic becomes more blocky and distorted. The image, although resized in proportion, has noticeable pixilation.
Although resizing images using WIDTH and HEIGHT might be useful early in the design phase when trying different sizes, it is best to ultimately resize the images in an image editor (such as Photoshop) to the final "ready-to-use" size.

Click here to jump to the second page. Notice that the HREF attribute must specify not only the name of the HTML file, but its location.

Or click here to jump to my favorite search engine.

One can cause links to open a new browser window, preserving the original for easy navigation back.

Click the image to go to the top of this page.