Code TEST

How to underline text

How to underline and bold text

How to colour text

How to colour and bold text

Note:

To show pictures side by side, use this code:

IMPORTANT: After your very last image, add the following code:

<p style="clear: both;">

That means, "Stop tiling left to right. No more floaty images. We're starting on a new line, here." Otherwise, the text below the image gallery might try to crawl up into the space to the right of it. Usually there's not enough room, but it's best to close the gate to make sure.

What if you want to tile more than three across? Then it's time to do math. Divide 100% by the number of images you want to tile across. That gives you the width of the image AND its margin-right. Now decide how much of that amount you want to be image, and how much you want to be margin.

It's best to fold in a little extra wiggle room, just to make sure.

For example:

Three images across: 30% + 1% times 3 = 99%.
Four images across: 23% + 1% times 4 = 96%.
Five images across: 19% + 0.5% times 5 = 97.5%

Making the Images Into Clickable Links

Each image can be a clickable link. Sometimes this is useful for menus!

Wrap the following code around each image's code:

<a href="URL"><img src="imageLocation" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" ></a>

Replace "URL" with the URL of the page you want the image to link to (but keep the quotation marks). (Copy it from the Location bar at the top of your web browser while viewing that page.)

Multiple Image Photo Gallery With Captions

This Is a Little More Tricky.

What if you want each photo in your image gallery to have a caption? Well, oddly enough, in HTML code, we can say, "Treat a paragraph as a box." And then we can tile those boxes side-by-side just like we did the images in the examples above.

Inside each box can be an image plus a caption.

So, for each image and its caption, use the following chunk of code:

<p style="float: left; font-size: 9pt; text-align: center; width: 30%; margin-right: 1%; margin-bottom: 0.5em;"><img src="imageLocation" style="width: 100%">Caption</p>

Replace the imageLocation with the URL of the image, and the Caption with any text you want. If the text is too long to fit on one line, it'll wrap around.

Repeat that code chunk for each "box" — the image plus its caption— without skipping lines between the chunks.

Finally, to close off the side-by-side image gallery, put this at the end:

<p style="clear: both;">

Again, if you need to have more than three side-by-side images across, then divide 100% by the number of images you want in a row to get the width of the image plus its margin-right, and then allocate most of that amount to the image's width and a little bit to the margin. But again, it's best to give it a little wiggle room (web browsers are often stupid), so maybe start with 99% instead.

And if you want to make something a clickable link, just wrap <a href="URL">[thing]</a> around it. [thing] can be any text in the caption, or it can be an image, in which case [thing] is <img src="....">