BBC Home

Explore the BBC


3rd August 2015
Accessibility help
Text only
default banner
BBC Homepage

DNA Hub
Knowledge Base
Feedback
Search
Who's Online

h2g2
360
iCan
collective
Book of the Future
Talk Buffy
Get Writing
WW2
Parent's Music Room

Contact Us


Like this page?
Send it to a friend!

 
New visitors: Create your membership
Returning members: Sign in


GuideML: PICTURE Tag

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 signs of the zodiac

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 signs of the zodiac
The signs of the zodiac

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 signs of the zodiac
The signs of the zodiac

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 signs of the zodiac

The picture has got no caption.


Further Information

Discuss this Article

People have been talking about this Article. Here are the most recent Conversations:
my picture (Last Posting: Jan 4, 2003)
Share and enjoy? (Last Posting: Dec 29, 2002)
Not-Blobs? (Last Posting: Aug 16, 2002)
?????? (Last Posting: Jul 30, 2002)
URL (Last Posting: Mar 26, 2002)
A SHADOW Question (Last Posting: Nov 27, 2001)
Lack of pictures (Last Posting: Nov 22, 2001)
A question. (Last Posting: Sep 24, 2001)
Alt tags and titles. (Last Posting: Apr 11, 2001)
Picture not displaying (Last Posting: Apr 3, 2001)
Click here to see more Conversations






Article Data
Article ID: A184961 (Help Page)
Written and Researched by:
Bruce

Edited by:
Mark Moxon

Date: 07   October   1999


Related BBC Pages
h2g2 Picture Library

Most of the content on this site is created by our Members, who are members of the public. The views expressed are theirs and unless specifically stated are not those of the BBC. The BBC is not responsible for the content of any external sites referenced. In the event that you consider anything on this page to be in breach of the site's House Rules, please click here to alert our Moderation Team. For any other comments, please start a Conversation below.