HTML for wrapping text around an image like this page: ............................................................ 2
HTML for adding a colored background behind text ................................................................... 3
HTML for adding a hyperlink without having to add a text link block ........................................... 3
HTML for making a bulleted list like this: .................................................................................... 4
HTML for linking to a bookmark within a page: ........................................................................... 4
HTML for photo gallery pictures like this page: ........................................................................... 6
HTML for photo gallery pictures that are inside a table (first try): SBI gave us this code. ............ 7
Use control-click on the bookmarks above to go the instructions
HTML for wrapping text around an image like this page:
http://www.front-porch-ideas-and-more.com/curb-appeal.html
Put some text here. It’s always a good idea to have
text at the top of your page before pictures. Search
engines like that. So text text text. Then insert your
picture by adding this code and update the stuff in
red.
<p><img src="http://www.best-grilling-recipes-andmore.com/images/urinary-incontinence.jpg"
alt="Incontinence Solutions" width="250"
height="166" hspace="6" vspace=”6”
align="left"></p>
And here can be some more text after the photo.
HTML for adding a colored background behind text (i.e. a table):
<table width="90%" align="center" cellpadding="3" border=”1”>
<tr>
<td bgcolor="#DDDDDD">
<p>Porches don’t always protect you from wind, sun, or rain. Depending on which
direction your porch faces, you may not be able to use one end or the other at
different times of the day.</p>
</td> </tr></table>
<br><br>
Search for browser safe colors on Google to replace color letters
Instructions: Copy the above into a text block. It can also come in the middle of a text
block. Replace the text in red with the text that you want to display.
Bgcolor = background color Search browser safe colors to choose different color.
_________________________________________________________________________
____
HTML for adding a hyperlink without having to add a text
link block
Those are the words I read not long ago when I visited the
<a href="http://www.greatday.com/index.html"target="_new">Daily Motivator</a>,
written by Ralph Marston.
Instructions: Copy the above into a text block wherever you want a hyperlink to appear.
This is especially helpful is the hyperlink is in the middle of a sentence. Saves you from
having to create a separate text link box. It can also come in the middle of a text block.
Replace the text in red with the text that you want to display. Notice that the words in red
are the ones relating to the link that you are creating. The words in blue are the words that
come before and after the link (which you will replace with your own.)
_________________________________________________________________________
____
HTML for making a bulleted list like this:
http://www.front-porch-ideas-and-more.com/porch-shades.html
Here are the reasons why shades are a good idea for your porch:
<ul> means indent </ul>
<li> means bullet </li>
<ul>
<li>Shades and awnings can extend the life of your porch</li>
<li>They provide shade during the hottest times of the year - keeping your home
cooler and your porch more comfortable</li>
<li>Shades and awnings can help keep your porch drier on a rainy day - so you can
sit on the swing and read a good book!</li>
<li>A porch shade can also protect your furniture from ultra violet
rays</li><br><br></ul>
So now you know that shades are a great idea!
Instructions: Copy the above into a text block wherever you want a list to appear. This can
come in the middle of a text block. Just change the red text to whatever you want to appear
in the list.
_________________________________________________________________________
____
HTML for linking to a bookmark within a page:
First, define a spot on the page where you want the bookmark to be by naming it – like
“gallery” below.
<h3 id="gallery" >Country Porch Pictures
Then link to that place on the page by something like this:
<font color=navy><b>For more pictures, check our <a href="#gallery">photo gallery
below</a>.</font></b><br><br>
Similarly, in another document you could refer to that bookmark as well.
<a href="http://www.family-vacation-planning-ideas.com/country-porches.html#gallery">go to our
country porches photo gallery.</a>
HTML for photo gallery pictures like this page:
http://www.front-porch-ideas-and-more.com/curb-appeal.html (scroll down)
<div id="thumbnail-small"><a href="http://www.family-vacation-planningideas.com/images/l_colonial_home_page.jpg" rel="thumbnail" title="Description that
shows up on larger picture after you click on it"><img src="http://www.family-vacationplanning-ideas.com/images/s_colonial_home_page.jpg" width="75" height="75"
alt="Country porch on colonial home"></a></div>
Instructions:

First – make sure you have uploaded both the large and the thumbnail size image to
Site Central graphic library. The thumbnail must be 75 x 75 pixels to work in this
scenario. We just crop our pictures into a square.

Second - copy the above into a text block. You do not need a separate text block
between photos.The first photo is the large one and the second photo is the
thumbnail-sized one. Be sure to keep a copy of the original photo intact (i.e. not
cropped).

Third and very important! Copy the following code in the last text block on the
page - should be by itself (you do not need to make any changes to it). If this block
of code is already there, it only needs to be there once.
<style type="text/css">@import url("support-files/gallery-css.css");
</style><script src="support-files/thumbnailviewer.js" type="text/javascript">
/***********************************************
* Image Thumbnail Viewer Script- (c) Dynamic Drive (www.dynamicdrive.com)
*This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.co for full source code
***********************************************/
</script>
OLDER CODE THAT ALLOWED FOR TEXT UNDERNEATH THE PICTURE
<div id="thumbnail-small"><a href="http://www.family-vacation-planningideas.com/images/l_colonial_home_page.jpg" rel="thumbnail" title="Description that
shows up on larger picture after you click on it"><img src="http://www.family-vacationplanning-ideas.com/images/s_colonial_home_page.jpg" width="75" height="75"
alt="Country porch on colonial home"></a><br>Description that shows under
thumbnail</div>
HTML for photo gallery pictures that are inside a table (first
try): SBI gave us this code.
<table width="450"border="1"cellpadding="2"align="center"bordercolor="#999999"bgColor="#ffffff">
<tr>
<td width="150" align="center" valign="top">
<img src="http://www.family-vacation-planning-ideas.com/images/m-country-porch-gabledroof.jpg"border="0" align="Left" WIDTH="150" HEIGHT="102" alt="Country porch"></td><td
width="150" align="center" valign="top">
<img src="http://www.family-vacation-planning-ideas.com/images/m-porch-design-openwrap.jpg"border="0" align="Left" WIDTH="150" HEIGHT="99" alt="Open wraparound porch">
</td>
<td width="150" align="center" valign="top">
<img src="http://www.family-vacation-planning-ideas.com/images/m-porch-design-contempwrap.jpg"border="0" align="Left" WIDTH="150" HEIGHT="99" alt="Contemporary porch"></td>
</tr>
<tr><td><center>Beautiful country porch</center></td><td><center>Open wrap around
porch</center></td><td><center>Contemporary porch</center></td></tr>
</table>
<br clear="all">
<br>
This code puts pictures into a table. SBI gave us this example. Just insert the above into
a text box and change what is red.
Table with Colored Background and Border
Look at this page - the text with the colored background has a border. It actually
looks better in Firefox than in IE. I published it on this page - look at the top two
tables. The bottom table does not have a border.
http://www.front-porch-ideas-and-more.com/about-us.html
Here is the code:
<table width="95%" align="center" cellpadding="3" cellspacing="0" border="1"><tr>
<td bgcolor="#DDDDDD"><border=”1”>
<p>Porches don’t always protect you from wind, sun, or rain. Depending on
which direction your porch faces, you may not be able to use one end or the
other at different times of the day.</p>
</td> </tr></table>
<br><br>