To create pictures in the ECEn Web XML, we're going to use <picture> tags.

These instructions assume that you already have a ECEn XML web page to edit and know at least a bit about XML. Most content, such as text, links, lists, pictures etc., belong in the <content> portion of your page, so make sure that you have a page with a <content> portion. If you need a quick tutorial or just a simple starter web page download, check out the Howdy, World Tutorial where you can get brief overview on what files you need to set up a basic ECEn XML web page.

If you need an example, have a look at the Picture Example page. You can view the XML source in your by clicking the 'this XML' at the bottom of the page. Or, the XML source located in the Common Tasks Downloads to the right. (Right click, Save Link Target As...)

Here is some "code" to put a basic picture in your ECEn XML web page:


Here is what the picture would look like on an ECEn XML web page:



To create a picture: Basic pictures appear inline with text. So, if you'd like your picture to sit on side or in the center of the page, or have text wrap around the picture, you'll need to add some style to your picture.

Learn how to make a picture a link up in the Links within Pictures section.

You can change the way a picture looks on your web page by using <style> tags. You can use these style tags to position your pictures left, right, and center, add borders and more.

Here is some ECEn XML "code" to give a picture a border and center it:

<picture> <style>visible border</style> <style>positioned center</style> <file>plain_clyde_halfsize.png</file> </picture>

Here is what the picture would look like on a ECEn XML web page:

You can see that the picture is centered and has a light brown border around it.

To create a styled picture:

1	Create an opening and closing <picture> tag.

2	Place a <file> tag between the <picture> tags. Inside the <file> specify where your picture is. This is simply the location of your image file and like links, this can be a relative or absolute path.

3	After the file tag, add as many <style> tags as you need. Specify valid picture styles, like 'visible border' or 'positioned center' within the <style> tags. For all the possible picture styles, check out the ECEn XML Templates Reference.

If your picture is the wrong size, there is no way to resize it using only the ECEn web XML. There are a few reasons for this:

You can add a caption to your picture using a <caption> tag.

Here is some ECEn XML "code" to create a captioned picture:


Here is what the captioned picture would look like on an ECEn XML web page:


As you might expect, specified caption appears beneath the picture in a small font.

To create a captioned picture: