Nicer Graphics in Bb Learn

Making nicer graphics in Bb Learn

The source code below will create a nice framed, text-wrapped, scaling figure in Bb Learn, with an italicized caption centered below. In short, you need to embed the CSS in-line, because Bb Learn strips out the header from the HTML.

Saint Tropez

St. Tropez and its fort in the evening sun. St. Tropez and its fort in the evening sun. St. Tropez and its fort in the evening sun. St. Tropez and its fort in the evening sun. St. Tropez and its fort in the evening sun. St. Tropez and its fort in the evening sun. St. Tropez and its fort in the evening sun. St. Tropez and its fort in the evening sun. St. Tropez and its fort in the evening sun. St. Tropez and its fort in the evening sun. St. Tropez and its fort in the evening sun. St. Tropez and its fort in the evening sun.

Just create a blank page or item, go into the Code View by clicking the < > button, and copy/paste the following code:

<p>text above the graphic</p> <div id="figure" style="float: right; margin: 5px; padding: 5px; border-width: thin; border-color: silver; border-style: solid; width: 25%;"> <img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"> <a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a> </p> </div> <p>text beside and below the graphic</p>

Next, replace the image link and title info with those for your own graphics. You can also change the float from right to left, or change the width from 25% to anything you like.

How it works line by line:

<p>text</p> is a paragraph of text above the image
<div> begins the region where the graphic will be inserted.
<style= controls the visual appearance and properties of the border.
float:right forces the graphic to hang from the right side. You could change that to left if desired.
padding:5px creates a 5 pixel space between the inside of the border and the image.
margin:5px bumps the graphic out 5 pixels to the left from the right edge of the window.
border-width, border-color, and border-style all control the look of the border.
width:25% makes the box with the image scale so that it is always 25% of the page's width.
img src= points to the location of the image.
float:right and width:100% control the position of the image within the border.
alt= gives descriptive text for the image and is provided for users with a visual disability.
<p style= defines the formatting of the image caption text under the graphic.
<a href= makes the image caption a hyperlink and provides the web address.
target="_blank" makes the clicked link open in a new window.
</div> closes the DIV region.
<p>text</p> creates a paragraph of text beside and below the graphic.

Reference: http://www.w3.org/Style/Examples/007/figures.en.html