| << Chapter < Page | Chapter >> Page > |
The
<media> element is the primary building block for including multimedia files in your module. In its simplest form, a
<media> element contains three pieces of information:
<image> The code snippet below shows a simple example of
<media> element:
<media id="media_example" alt="a dog on a bed"><image mime-type="image/jpeg" src="image1.jpg"/></media>
This code results in the following display:
Note that the resulting image displays
inline ; when included as the child of another element, such as
<para> , the media element will display in line with the surrounding text by default:
<para id="myparagraph"><media id="media_example2" alt="a dog on a bed"><image mime-type="image/jpeg" src="image1.jpg"/></media>This is my dog. Isn't he cute?</para>
This code results in the following display:
This is my dog. Isn't he cute?
Each
<media> must contain a
media subtype element from the following list:
<image> <video> <flash> <audio> <java-applet> <labview> <text> <download> The
<figure> element allows you to set a media element apart from the surrounding text and highlight it as a labeled figure within the module. In it's simplest form, a
<figure> contains two pieces of information:
<media> elementThe code snippet below shows an example of a
<figure> element:
<figure id="figure_example"><media id="dog_on_bed" alt="a dog on a bed"><image mime-type="image/jpeg" src="image1.jpg"/></media></figure>
This example results in the following:
You'll notice that the figure is labeled as "
[link] " - this information was not provided in the CNXML code, but is instead supplied automatically by Connexions based on the figure's place within the document. As you add, move, and delete figures in your module, you do not have to worry about keeping track of the figure numbering - this is done for you when the page is displayed to the reader. Also, unlike the
<media> example shown previously, the image in this example is displayed in
block mode rather than
inline mode.
<link> that points to the
<figure> ; in this case,
<link target-id="figure_example" /> results in the following link:
[link] .
<equation> ,
<example> ,
<exercise> , etc.The
<figure> also provides additional options that allow you to further highlight and describe an enclosed
<media> element. The following example illustrates several additional elements:
<title> , which adds a title to the figure.<caption> , which adds a caption allowing the author to provide a description or context for the figure.<label> , which overrides the default 'Figure' label; this is especially useful for modules not written in English.<figure id="figure_example_extended"><label>Figura</label><title>Mi Perro Benny</title><media id="dogpic" alt="Perro sentado en la cama"><image mime-type="image/jpeg" src="image1.jpg" /></media><caption>Este es mi perro Benny haciendo lo que hace mejor.</caption></figure> This example results in the following display:
Notification Switch
Would you like to follow the 'Ideas and tools for improving connexions modules and collections' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|