All of the text fields below (e.g. ) contain HTML. Use you mouse or keyboard to copy and paste the HTML into a "plain text editor" (e.g. notepad, textpad).
Save the file to your desktop as an HTML file, (e.g. file_name.html). Once they are saved, you can double click on them or use your keyboard to open them. They will automatically open in your default Web browser. When the files are open in your Web browser, you will be able to see how the HTML works in your browser.
Various Web browser types will display the HTML differently.
************************************************************************************************************
Lesson 10:
Thumbnails:
A thumbnail, displayed inline using <IMG>, is a small image that acts as a hyperlink to a larger, fuller representation of the same image. Thumbnails are popular in Web catalogs to show several products on a page and allow you to click on any single image to see it in greater detail.
By combining the <IMG> and anchor tags, you can link a small image to a larger one like so:
In the above example, fictitious image file names are used. You will need to supply real images and file names for the code to work in your HTML pages. The "file path" will need to be accurate as well. For more on file paths, use a search engine and these key words (HTML file path syntax). You will also need the right "application helpers" to view the files (a program that supports opening a particular file type).
By inserting the <IMG> tag into the section of the <A HREF> anchor normally used for a link, a graphics link is created. The small image in the <IMG> tag is linked with the anchor to the larger image.
Copy the above source code to your text editor and save it as lesson10.html
Open the file in you browser to see the results! Click on the "image link" to trigger the "thumbnail" to open a larger image. You can use an "image editor" to create a "small" and "large" image to be referenced by the above source code.