28.2.3. How to insert an image in HTML

To insert an image in an HTML file (or PHP-Nuke news article (see Section 6.1), or PHP-Nuke theme (see Section 14.1)), we use the <img> tag. For example, to insert an image called photo.png, located in the same directory as the file that is going to show it, we write:

<img src="photo.png" alt="description of the photo"></img>

The alt tag serves as an alternative, textual description of the image. This description is shown when we hover with the mouse over the image, but it is also used by speech browsers like JAWS, or text-only browsers like Lynx, instead of the image file, to convey an idea of the image object to people with disabilities, see day 23 of the 30-day Dive Into Accessibility tutorial on Providing text equivalents for images.

In case your image is included in a different folder, say images/, as is often the case with PHP-Nuke, the code looks like:

<img src="modules/PHP-Nuke_HOWTO/images/photo.png" alt="description of the photo"></img>

Note that we only need to specify a relative path to the image file, relative to the PHP-Nuke root directory, that is. The reason for this is that in PHP-Nuke all articles, stories etc. are shown through the modules.php file (which is passed the right module name through an URL parameter, as shown in Section 28.2.2), which is located in the PHP-Nuke root directory (by the way, this is the same directory where the config.php file (Section 3.7) is also located).

Also note that, to remain compatible with the HTML standards, you have to include the values of the attributes, like src or alt, in double quotes, as in the examples above. You can check your site for HTML standards compliance with the W3C HTML validator.

You can also make the image clickable, combining the two techniques of creating a link (see Section 28.2.2) and inserting an image:

<a href="http://www.karakas-online.de/EN-Book/">
<img src=" http://www.karakas-online.de/EN-Book/images/nuke.png" 
alt="PHP-Nuke HOWTO"></img></a>