So far, your image definition should look something like this:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
However, some attributes can (and should) be assigned to the img element. First of all, there is alt. The text defined here is displayed by the browser if the image - for whatever reason - could not be loaded.
Unfortunately, there are always misunderstandings in connection with the alt attribute. The alt attribute is actually only used if the image is not displayed. However, some browsers display the value of the alt attribute in a tooltip window if you hover over the image with the mouse pointer.
This behavior is incorrect. Instead, the title attribute is there for such tooltips. A corresponding definition would look like this:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="The logo of PSD-Tutorials.de" />
In this case, the value of title overrides the value of alt.
Size specifications
A lot of things in HTML are no longer solved via attributes, but by means of CSS. However, this does not include the definition of size specifications. Height and width are still defined using the two attributes width and height. Here is another example:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="The logo of PSD-Tutorials.de" width="200" height="150" />
If no unit of measurement is specified for width or height, the numerical values are interpreted as pixel values by the browser. In the previous example, the image is 200 pixels wide and 150 pixels high. A percentage would also be possible.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="The logo of PSD-Tutorials.de" width="20%" height="15%" />
The percentages refer to the available ad space. If no size specifications are made, the browsers display the graphics in their original size.
Images and text paragraphs
If you place images in combination with body text, care must be taken.
<p><img src="logo.png" alt="" width="180" height="150" /> This text is displayed next to the image.</p>
img is a so-called inline element. Graphics can therefore be placed directly in the text. If the graphic is higher than the line height, the browser aligns the text within the line. By default, the text is aligned flush with the bottom of the graphic.
The alignment could be influenced in older HTML versions using the align attribute. Please no longer use this, as it has been removed from the HTML5 standard. Instead, use the options offered by CSS. This allows you to have the image flow around the text, for example.
A long description
HTML offers you the option of providing a detailed description for an image. This is always practical if an image actually requires explanations. You can save the additional information in different places and refer to it.
The additional information can be in different places.
<img src="image1.png" alt="Diagram 1" title="Diagram 1" longdesc="#diagram" />
Here it is assumed that there is an area within the page with the ID diagramm.
The most common variant is probably the one in which the information is stored in an external file.
<img src="image1.png" alt="diagram 1" longdesc="diagramm1.htm" />
However, there is still a lack of browser support here. In addition, this attribute seems to present browser manufacturers with the question of how they can implement it in an uncomplicated way.
This is because it is not a really nice and self-explanatory solution in Firefox, for example. If an image has a longdesc attribute, normal site visitors will not recognize it at first. Instead, they have to click on the image with the right mouse button.
The context menu then shows the item Show description. If you click on this, the additional information specified for longdesc is displayed. As I said, this works in Firefox, but it is certainly not elegant.
Opera has a similar solution. If you right-click on the image in this browser, you will see the Long description entry.
This then leads to the specified additional information.
WC3 also suggests specifying the long description in the form of a data URL.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />
If you have not yet gained any experience with these data URLs, you can find detailed information at http://de.wikipedia.org/wiki/Data-URL.
Defining image descriptions
Until now, there were no options for defining captions and image groupings in HTML. This aspect has changed with HTML5. The two new elements figure and figcaption have been introduced.
To anticipate: figure is not exclusively intended for use in combination with graphics. In fact, the element can be used for all elements that complement a document. In addition to images, these can be diagrams, code examples and videos, for example.
In addition to figure, there is also figcaption. This allows content that is not readable for certain user groups to be provided with an alternative description.
Here is an example of the use of the two elements figure and figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>This is our new logo.</figcaption> </figure>
A look at the result in the browser gives the following result:
How the browsers handle the two elements is ultimately up to them. However, you can of course influence the display again using CSS.
Any number of images or other elements can be inserted within a figure element. However, a figure element may only contain one figcaption element. Here is another example:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>This is our new logo.</figcaption> </figure>
In this way, you can also pack several images into one figure element.
There are also numerous innovations in HTML5, particularly with regard to the logical structuring of websites and content. Of course, you will also learn about these in detail in the course of this series.
