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 technical jargon, you need to embed the CSS in-line, because Bb Learn strips out the header from the HTML. Throughout this tutorial, we are pointing at the same graphic. There is only one copy.

Just create a Blank Page or Item, go into the Code View by clicking the HTML button in the lower right of the toolbar:

blackboard toolbar

Saint Tropez and its fort in the evening sun

Saint Tropez

This version floated right, scaled to 33%

Copy/paste the following code into the HTML Editor:

<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: 33%;"><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>wrapped 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 33% to anything you like.

How it works line by line:

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


More Examples

Saint Tropez and its fort in the evening sun

Saint Tropez

This version floated left, scaled to 10%

Code for a left side version at 10% size:

<div id="figure" style="float:left; margin: 0.5em; padding: 0.5em; border-width: thin; border-color: silver; border-style: solid; width: 10%;"><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>
<p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">This version floated left, scaled to 10%</p>
</div>

 


Saint Tropez and its fort in the evening sun

Saint Tropez

This version centered, scaled to 15%

Code for this centered version:
<center><div id="figure" style="margin: 0.5em; padding: 0.5em; border-width: thin; border-color: silver; border-style: solid; width: 15%;"><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><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">This version centered, scaled to 15%</p>
</div></center>

Code for a pair of images side by side in a single box. Each of the graphics is set to slightly less than 50% (you have to factor in the margin and pad) so they can sit side-by-side.

Saint Tropez and its fort in the evening sunSaint Tropez and its fort in the evening sun

Compare Saint Tropez 1 and Saint Tropez 2 and discuss their differences.

<center> <div id="figure2" style="border-width: thin; border-color: silver; border-style: solid; width: 75%;"> <img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="width: 48%; padding: 0.25em; " alt="Saint Tropez and its fort in the evening sun" /><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="width: 48%; padding: 0.25em;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">Compare <a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez 1</a> and <a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez 2</a> and discuss their differences.</p>
</div> </center>

Saint Tropez and its fort in the evening sun

Saint Tropez

Image 1

Saint Tropez and its fort in the evening sun

Saint Tropez

Image 2

Code for a pair of stacked images in a single box:

<div id="figure" style="float:right; margin: 0.5em; padding: 0.5em; border-width: thin; border-color: silver; border-style: solid; width: 12%;"><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><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">Image 1</p><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><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">Image 2</p></div>