The <PICTURE> tag allows you to insert pictures into your articles. You cannot use off-site pictures on h2g2 due to copyright issues.

Syntax One (Only for h2g2 'Blob' Graphics)

Optional attributes are shown in italics, and the vertical bar character | denotes a choice, so LEFT|CENTER|RIGHT means one of LEFT, CENTER or RIGHT.

<PICTURE

BLOB="...blob..."

BORDER="1"

ALT="...alt text..."
EMBED="LEFT|CENTER|RIGHT|FREE">

...caption...

</PICTURE>

<PICTURE

BLOB="...blob..."

BORDER="1"

ALT="...alt text..."
EMBED="LEFT|CENTER|RIGHT|FREE"/>

Syntax Two (For Non-h2g2 DNA Sites)

Optional attributes are shown in italics, and the vertical bar character | denotes a choice, so LEFT|CENTER|RIGHT means one of LEFT, CENTER or RIGHT.

<PICTURE

NAME="...graphic name..."

BORDER="1"

ALT="...alt text..."
EMBED="LEFT|CENTER|RIGHT|FREE">

...caption...

</PICTURE>

<PICTURE

NAME="...graphic name..."

BORDER="1"

ALT="...alt text..."
EMBED="LEFT|CENTER|RIGHT|FREE"/>

Usage for Both Syntaxes

Both these tags insert a picture into your entry.

• The picture must be one of h2g2's internal pictures (known as 'blobs'), or a graphic that has been uploaded to the graphics area of a DNA site. For h2g2 graphics, the ...blob... argument must be of the form B123456, and for other DNA sites, the ...graphic name... argument is the name of the graphic (eg plane.gif or circus/acrobat.jpg.

• To add a border to your picture, include the BORDER="1" attribute. This is only useful for rectangular, non-transparent graphics, such as photos.

• You should include alt text for the picture, which will be displayed in text-only browsers or in browsers with graphics turned off. To do this, simply include the text as the argument to the ALT attribute. Some browsers, like Internet Explorer on Windows, will show the mouse text if you hover your mouse pointer over the picture.

• The EMBED attribute determines how the picture is positioned and how text flows around it, as follows:

• EMBED="LEFT" - The picture is displayed on the left-hand side, and text flows round its right-hand side.

• EMBED="CENTER" - The picture is displayed in the centre, and text doesn't flow round the picture (so it stops just above the picture, and continues after it).

• EMBED="RIGHT" - The picture is displayed on the right-hand side, and text flows round its left-hand side.

• EMBED="FREE" - The picture is displayed on the left-hand side, and text doesn't flow round the picture (so it stops just above the picture, and continues after it).

• Any text between the <PICTURE> and </PICTURE> tags is displayed below the picture as a caption. If this is left blank, then a shorthand version of the tag can be used by closing the <PICTURE> tag off with /> at the end (the second syntax above).

Known Issues

Previously, the default action was to place a shadowed border around graphics unless the attribute SHADOW="NONE" was present. The SHADOW is now ignored completely, so the default action is not to have a shadowed border.

The <PICTURE> tag used to take a SRC="url" attribute, but this has now been disabled. Such tags are now simply ignored.

Example One

The picture on the right has been created using the EMBED="RIGHT" attribute to the <PICTURE> tag. It uses blob number B80841 for the picture, and has some alt text set that says 'The signs of the zodiac'. If you have Internet Explorer on Windows, then if you hover your mouse over the picture you will be able to read it. The picture has not got a caption, and as a shorthand the second syntax of the tag has been used, though we could easily use the first syntax and simply leave the ...caption... part blank. The version we've used closes off the tag with /> at the end.

Example Two

The following picture has been created using the EMBED="CENTER" attribute to the <PICTURE> tag. It uses blob number B80841 for the picture, and has some alt text set that says 'The signs of the zodiac'. If you have Internet Explorer on Windows, then if you hover your mouse over the picture you will be able to read it. As you can see, the text doesn't flow round the picture.

The picture has got a caption, 'The signs of the zodiac', which is simply the text between the <PICTURE> and </PICTURE> tags. It also has a border.

Example Three

The picture on the left has been created using the EMBED="LEFT" attribute to the <PICTURE> tag, with the text flowing round the right-hand side of the picture. It uses blob number B80841 for the picture. It has some alt text set that says 'The signs of the zodiac'. The picture has also got a caption, 'The signs of the zodiac', which is simply the text between the <PICTURE> and </PICTURE> tags. This differs from a free-floating graphic because the text flows round to the right, rather than starting again underneath the graphic.

Example Four

The following picture has been created using the EMBED="FREE" attribute to the <PICTURE> tag, so it is left-aligned with no text flowing round it. It uses blob number B80841 for the picture, and has some alt text set that says 'The signs of the zodiac'.

The picture has got no caption.

Further Information

• For use on h2g2 only, you can find a collection of graphics you can use with the <PICTURE> tag in the h2g2 Picture Library.

• The DNA GuideML Clinic