A Little HTML goes a long way... Part 3

By
Title Insurance with First American Title

Laying out pictures with text...


When you upload a picture to your Activerain blog you can easily change the size and justify it left or right on the page using the editor. Yet, on occasion I’ve fiddled with trying to wrap text around an image and messed up my entire layout. No fault to Activerain, every editor has its own unique temperament.

You could delete the image or the whole post and start over, but uploading the photo again adds bloat to Activerain’s storage space.

With a little HTML code you can place your image anywhere you like and re-size it on the fly if you need.

1st upload your photo to your draft post and save ( by clicking - post blog entry).
2nd click edit and change the view to HTML by clicking the HTML tab...

Here’s the code that Activerain created for my uploaded image...

<p><img title="Car's cost less in Puyallup!" src="/image_store/uploads/2/9/3/2/9/ar132604695592392.jpg" height="250" alt="Big balloon car sale promotion." width="250" /></p>

Note that Activerain uses the <p> paragraph tags to open and </p> to close. This is used to manage the area for the image just like we did in part 1 & 2 to manage the text.

img = image... any text you put between the quotes will show up in a little pop up when the reader runs their mouse over the photo in your published post.

src = source... the characters between this set of quotes tells us where the image is stored on the servers and the name Activerain gave the photo (ar132604695592392.jpg).

The numbers after height and width are describing the size of the picture in pixels.

alt = alternative, it’s a description that will show up if the picture is blocked for some reason and/or won’t show up in the readers browser because they’re on a network or something...

I usually embed my photos from Picasa but uploaded pictures work the same way.

The first thing I do is upload my picture to my draft post and save it by clicking on the “Post Blog Entry” button.

Then click edit and switch to HTML mode and copy the HTML code that Activerain created for my image and paste it into notepad so no matter how much I screw things up, I don’t lose my photo. As long as I have that snippet of code, I have a way back to my uploaded photo on Activerain.

Let’s create a post with a picture on the left that has text on the right. We’ll do it by creating a simple table.

In the editor in HTML mode... we’ll start the table with the HTML tag...
<table>

Table means we’re going to create a simple spreadsheet like grid layout with rows and columns. In our case we’re just going to create 1 row with 2 columns.

In the table we need to create a place where the content is placed. Photo on the left, text on the right.

Create the row using the tag...
<tr>(= table row) and tell the row where the data goes by using the data tag. HTML is read in your browser from left to right.
<td>(= table data). This is telling your browser there’s a table and on this row there’s data.

Tables are like looking at an Excel Spreadsheet... You’re creating a simple grid with rows and columns...

Used car big balloon car sale promotion.

Using a simple table to create two columns so I can display a picture on the left with text on the right just cuz I want it that way. The width of the column on the left for the image is set to 40% of the viewing area and the text area to the right was set to 60%.


So begin your table, start the row, and place your data.

That will look like this...

<table>
<tr><td>“paste your photo html here”
</td>

Now create the area to the right for the text.
Tell the row there’s more stuff to present by using the data tag again...

<td> “your text goes here”
</td>

Now close up shop...

End the row
</tr>
then close the table using the tag
</table>.

What you’ve created is a simple table with 1 row and 2 columns. By default browsers will give each column 50% of the viewing space. All we need to do now is to adjust the area for the photo and the text and tell the columns how wide they should be.

If I eyeball my picture which is 250 x 250 pixels (in a roughly 640 pixel wide viewing space), I can see the width is less than 50% but more than 25% of the viewing area... I’m going to be really scientific and make the extremely educated guess that 40% will work just fine for the image and I’ll give the rest of the space to the right, 60% for the text. I can always adjust later. The combined width of the 2 columns should equal 100%.

I’ll set up the width for the photo area by telling the data tag to be 40% wide...
<td width=”40%”>

And, I’ll set the data tag for the text to be 60% wide...
<td width=”60%”>

We’re almost there, let’s throw it all together...

1. Upload your photo and if you need to, use the AR editor to size it.
2. Save your post and switch to HTML mode then copy the HTML to notepad for safe keeping.
3. Write your first paragraphs as you would normally do and save.
4. Switch to edit HTML mode and go to the area below your text to create your table.

Type...

<table>
<tr><td width=”40%”>
“paste the photo HTML here”
</td>
<td width=”60”>
<p><big>
“paste your text here”
</big></p>
</td></tr>
</table>

<p></p> (add this if you need a little blank space after your table)

Don't forget to save your file!

A few notes....

Don’t forget every time you switch back and forth between HTML and WYSIWYG mode to save your work (or you’ll lose it)!

Sometimes, when I save my draft from HTML mode then open it to edit in WYSIWYG it won’t open up into full viewing mode. Just save the WYSIWYG again and re-open it and it will be in full size again.

I didn’t mention how tall the row is... In today’s example which ever is taller, the photo or the text, will dictate the height of the row simply based on how much room it takes to present them. So, the row’s height will stretch in height to allow room for the content.

As I mentioned in part 1 & 2, I create my posts primarily in HTML mode to control font sizes using the <big>, “default”, or <small> tag and the layout using the <table> tag.

When I want the text on the left and the photo on the right I reverse my percentages with the data tags within the table and all of these can be changed based on the size I want to use for the photo and how much text I want next to it.

Picture on the right and text on left... Just reverse the data tag width.

<td width=”60%>
Add your text here...
</td>
<td width=”40%”>
Add your photo code here...
</td>

If you standardize a few presentation styles for your blog using a few layouts that support certain photo sizes etc. you can have all that HTML code saved in a notepad. All you need to do is make a few decisions ahead of time as to what size your photo's need to be and what saved code you have will support the layout so all you have to do is copy/past code the image html and the text next to it and you're off and running.

Happy coding... If you experiment and have issues, let me know. I’m happy to help.

Using a simple table to create two columns so I can put text on the left and position a photo next to it on the right. All I did was switch the content and reverse the percentages between the data tags. The column on the left is now 60% and the column on the right is 40%.

A Little HTML goes a long way...

Part 1   Part 2

Used car big balloon car sale promotion.

Posted by

René Fabre

"Where there's conversation, there's opportunity."

Please Note - The views expressed herein reflect only the individual’s personal views and are not the views of the author’s employer.

The Blackberry Chronicles, a blog by Rene Fabre and his travels around the Greater Pacific Northwest and beyond. Connect w/ Rene Fabre on Google+. Rene Fabre on Twitter. Rene Fabre writes reviews on Yelp. Rene Fabre on Linkedin.com The Audiorium YouTube Channel by Rene Fabre. Facebook.com/renefabre Rene Fabre loves digital photography and here are his shares on Flickr. Rene Fabre is a musician and composer and shares some of his orginal music and recordings on Soundcloud. Rene Fabre shares his interests on Pinterest.
close

This entry hasn't been re-blogged:

Re-Blogged By Re-Blogged At
Topic:
Real Estate Technology & Tools
Location:
Washington King County Renton
Groups:
Active Rain Newbies
Photography
Technology
Dedicated Bloggers
Photos
Tags:
html

Post a Comment
Spam prevention
Spam prevention
Show All Comments
Ambassador
1,726,324
Richard Weisser
Richard Weisser Realty - Newnan, GA
Richard Weisser Retired Real Estate Professional

Rene...

Excellent tips for proper hand coding. I suggested this wonderful primer and suggested for ActiveRain feature!

Jan 08, 2012 12:29 PM #1
Rainer
304,441
Ken Brandon
Coldwell Banker Sea Coast Advantage (Jacksonville, NC) - Jacksonville, NC
Camp Lejeune, Jacksonville, NC

I want to thank you for the tips you've provided. They are very specific to things that I want to do and I don't have to be...nor want to be an expert with html...I just want to be able to do the specific things I need to do. You make it easy.

Jan 08, 2012 01:10 PM #2
Rainmaker
524,490
Ralph Janisch ABR CRS Broker
Janisch & Co. - Conroe, TX
Selling Northwest Houston to good people like you!

It's exciting to use HTML to spiffy things up.  Years ago you used to be able to use HTML on Realtor.com but then they decided it was in the best interest of their client..... the consumer to homogenize everyone so we all look the same.... How boring is that.  I quit using Realtor.com when they did that.

Jan 08, 2012 01:19 PM #3
Ambassador
670,499
Rene Fabre
First American Title - Seattle, WA
Marketing in the Digital Age

Richard: Thanks! In our time (regardless if we accept it or not) we must march forward and embrace new skills that are necessary. Some blame technology, but in our times, we need to buck up and learn up so we can create in contemporary terms. A little HTML knowledge goes a long way... That's the world we now live in.

Jan 08, 2012 02:15 PM #4
Ambassador
670,499
Rene Fabre
First American Title - Seattle, WA
Marketing in the Digital Age

Ken: You are very welcome... I'm no pro either, but I love to tinker. What I like about the Activerain editor is you don't need very much HTML and can keep what you use real simple. Good luck!

Jan 09, 2012 02:48 AM #5
Ambassador
670,499
Rene Fabre
First American Title - Seattle, WA
Marketing in the Digital Age

Jeanne and Ralph... Now that you mention it, I do remember some time back that could use HTML on Realtor.com. I haven't thought about that for some time. 

Jan 09, 2012 02:51 AM #6
Rainer
233,428
Mike Yeo
3:16 team REALTY - Frisco, TX

Rene - excellent tips and guide. Thanks fo sharing.

Jan 10, 2012 03:41 PM #7
Ambassador
670,499
Rene Fabre
First American Title - Seattle, WA
Marketing in the Digital Age

Hi Mike: Thanks... more coming soon!

Jan 11, 2012 09:57 AM #8
Rainmaker
204,790
Sham Pathania
SAVE MAX FIRST CHOICE REAL ESTATE INC. - Mississauga, ON
Thanks for sharing important tips.
Jan 21, 2013 06:13 PM #9
Post a Comment
Spam prevention
Show All Comments

What's the reason you're reporting this blog entry?

Are you sure you want to report this blog entry as spam?

Ambassador
670,499

Rene Fabre

Marketing in the Digital Age
Ask me a question
*
*
*
*
Spam prevention

Additional Information