Join me @ IBOtoolbox for free.
Curtiss Martin
Member Since: 8/13/2012
  
performance / stats
Country: United States
Likes Received: 2738
Featured Member: 18 times
Associates: 12667
Wall Posts: 474
Comments Made: 26772
Press Releases: 360
Videos: 2
Phone: No Calls Please
Skype:    
profile visitor stats
TODAY: 262
THIS MONTH: 4995
TOTAL: 524238
are we ibo associates?
member advertising
active associates
Athena Gay    
Last logged on: 7/24/2017


Mike Grimes    
Last logged on: 7/24/2017


Ron Miller    
Last logged on: 7/24/2017


Rachid Raoui    
Last logged on: 7/24/2017


Roger Eddy    
Last logged on: 7/24/2017


Hector Jayat    
Last logged on: 7/24/2017


Pastor Harley     
Last logged on: 7/24/2017


Dean Jensen    
Last logged on: 7/24/2017


cory tangye    
Last logged on: 7/24/2017


Robin Robinson     
Last logged on: 7/24/2017


Horst & Leah ScreenSA    
Last logged on: 7/24/2017


Justin Rowell    
Last logged on: 7/24/2017


michael shuttlesworth    
Last logged on: 7/24/2017


Idriys Muhammad     
Last logged on: 7/24/2017


Charlie Newman    
Last logged on: 7/24/2017


other ibo platforms








Curtiss Martin   My Press Releases

HTML for Images

Published on 7/23/2014
For additional information  Click Here

FavIcon
Nove-Noga.com/GetStarted.htmlHTML for Images:

Note: This is the 20th in the “GetStarted” Sequence.

Images New to IBO Last Year:
With the change to IBO Toolbox V2.0 in June of 2013, we were suddenly able to include Images and Videos in our Press Release. Those of us used to the old system had a lot to learn. In many ways, those coming to it fresh had the advantage.

*Note: The effective width of the IBO Toolbox Press Release is about 515 Pixels. Using oversized HTML formats or Images will cause your PR to display poorly. I Recommend a maximum image width of 504 Pixels (The same as Facebook timeline posts.) which you will most likely want to center.*

There have been a couple of cycles of changes with the IBO Press Release Content Editor. With an ever-changing Internet, I doubt that we have seen the last. In the current configuration, July 2014, it has returned to a simpler HTML generator using “span” statements for the body of your Press Release.

*NB: 1/7/2015 There has been another change in the PR Editor. I have found the "span" methods to be simplest. Check my Source Code to see this PR.*

Making it Work:
If you are using a system that generates HTML that is suitable, you can paste your HTML straight into the editor in HTML mode.

Inserting an Image:
For simple, non-clickable images, you can use the InsertImage tool [Mountain&Sun Icon]. You could get away with only knowing the Image URL. However, if you don’t include the Width and Height, you will have display problems on some systems. You may not be aware of it but your Visitors might.

Image Information:
URL: [Image URL in .jpg .png or .gif]
Long Description: [Description of Image]
Alt Text: [Info to appear if your image doesn’t.]
Width: [Image Width in Pixels. Max suggested width = 504]
Height: [Image Height in Pixels.]
Alignment: [For simplicity, select: left or right]

Facebook Fan Page*Note: Feel free to experiment with the others. They may be useful for your needs. For ours; Left puts the image to the left and the Text flows down the right side, Right Places the image to the right and the Text flows down the Left side. *

To simply add images to your prepared Press Release, Select the point in the Press Release that you want the image to appear. (At *Note above.) Click the InsertImage tool [Mountain&Sun Icon], Enter the Image Information, and Click [OK].

For this demonstration, I did that with the Profile Photo from Free Means Free!
URL: [http://www.Nove-Noga.com/images/FMF180x180.jpg]
Long Description: [Profile Photo for Free Means Free!]
Alt Text: [Free Means Free!]
Width: [180]
Height: [180]
Alignment: [right]

This is the HTML for the Image generated by the Content Editor:
<img longdesc="Profile Photo for Free Means Free!" alt="Facebook Fan Page" src="http://www.Nove-Noga.com/images/FMF180x180.jpg" align="right" width="180" height="180" >

*Note: Discrepancy warning. If you repeat this example, you will find the Width and Height in a reversed order. Because the standard for Image Dimensions is to mention Width then Height, I have placed them like that in all my examples. It won’t make a difference here but if you swap them on a 468x60 banner, my ears may start to burn. *

What We Have Learned:
In the previous Press Release, Simple HTML Tips, we went over some of the basic parts of HTML Statements.

URL: Uniform Resource Locator, your Link.

Tags: Code usually marking the beginning and end of an Element.
EG: For an Anchor tag <a attributes> </a>

Attribute: The pieces of information that make an Element Work.
EG: For a Target Attribute to open a link in another window or page. target=”_blank”

Element: Everything from the beginning of a Tag to the End.
<a target="_blank" rel="nofollow" href="http://www.Nove-Noga.com"> Nove-Noga.com</a>

Statement: May be a single element but I often use it to refer to more complex structures such as a Clickable Image Statement.

The Attributes we discussed previously were; target, href, and style. Style is a special Attribute in that the Value it Contains is part of the CSS, Cascading Style Sheet, system commonly used to control the display of our web pages.

It is Just Another Language:
Have you ever heard someone speaking a foreign language and realized that you know part of what they are saying? Frequently that is because English is actually a trade language created by the travelers of the world. If you think of HTML in a similar fashion, you may suddenly see parts of it that are making sense. You don’t need to know it all. You just need enough to achieve your immediate goal. Tomorrow is time enough to learn something else.

The Generated HTML for the Image Above:
This (same as above) is the Image Element HTML generated by the Content Editor:
<img longdesc="Profile Photo for Free Means Free!" alt="Facebook Fan Page" src="http://www.Nove-Noga.com/images/FMF180x180.jpg" align="right" width="180" height="180" >

Notice that the Image Tag <img attributes> is singular. It doesn’t have a closing tag. The Attributes are the information the Image Element needs to work:
longdesc="Profile Photo for Free Means Free!"
alt="Facebook Fan Page"
src="http://www.Nove-Noga.com/images/FMF180x180.jpg"
align="right"
width="180"
height="180"

See how they correlate with the information we entered to Insert the Image. One might think that you could change the Value for align from “right” to “center” but it won’t work. To Center your image, I find it best to put it inside a Paragraph Element with a Style attribute to Center it. *NOTE: Remember to take out the align attribute.* This prepared HTML I inserted over a placeholder in my text. EG: CENTERED IMAGE.

Free Means Free!



<p style="text-align:center;">
<img longdesc="Profile Photo for Free Means Free!" alt="Free Means Free!" src="http://www.Nove-Noga.com/images/FMF180x180.jpg" height="180" width="180"><br>
</p>

This is still not a Clickable Image. Pictures are nice but Clickable Images can take people to the page we need them to see.



IBO Toolbox


IBO Banner Centered:
To Insert my IBO Banner, I prepared the following Statement for a Centered Image. It consists of a Paragraph Element, containing a Hyper-Linked Image.

<p style="text-align:center;">
<a rel="nofollow" href="http://www.IBOurl.net/nnYourIBOInvite" target="_blank">
<img title="Join IBO Toolbox with me Today!" alt="IBO Toolbox" src=”http://www.Nove-Noga.com/images/banner2.png” width="180" height="150"></a>
</p>

Note that the Hyper-Linked Image contains an Image Element where the Link Text or “Anchor” was in our simple Link. You could simply take the format above and insert your own answers. You could copy it directly and put in your own IBO URL. You won’t hurt my feelings at all. (*Note: I have noticed a small problem. That is another Reason for using the IBOurl for my Invitation.)

*Edit Note: The IBO Image I used in the original post was converted to a “Local” URL. It was therefore not visible in the Mobile Version. *

To Recap:
From our Simple Link to the Inserted, Centered Image Link, we have covered.
3 Tags:
<a attributes>Anchor</a>
<img attributes>
<p attribute></p>

9 Attributes and Values:
style="text-align:center;”
rel="nofollow" href="http://www.IBOurl.net/nnYourIBOInvite"
target="_blank"
title="Join IBO Toolbox with me Today!"
longdesc
alt="IBO Toolbox"
src=”http://www.Nove-Noga.com/images/banner2.png”
width="180"
height="150"

1 CSS Property and Value:
text-align:center;

There are two more common tags that you will see in your Content Editor HTML mode. The Span Tags for the Span Element: <span attributes>Span Element</span>
And the Line Break: <br>

While the Span Tag and the Paragraph Tag do not need an extra Line Break, you will find one at the end of each “line” of text and another one to provide the space between “lines”.

If you wanted to place two images in the statement above, you would need to include a Line Break at the end of the first Image Element.

It’s simple. If you see extra Lines, go into HTML mode and hunt them down. If you take out too many, put some back. Do yourself a favor. Check frequently to make sure you are achieving the desired results. One way to test these processes is to copy this PR and go to the Editor for Practice.

*Note: I recommend saving a copy of the HTML from every Press Release in a .txt file. It makes editing a lot easier. In the absence of such a copy, you could copy the existing PR and Paste it into the Editor to Override the extra spaces it throws in during the editing process.*

Centered Clickable Image Sample for Copy and Paste:
<p style="text-align:center;">
<a rel="nofollow" href="http://TARGETURL" target="_blank">
<img title="MOUSEOVER TEXT" alt="SAFE WORDS" src=”http://IMAGEURL.png” width="#" height="#"></a>
</p>

I promised simple HTML. Here it is. I am sure that almost every one of you understand the concept of Copy & Paste. For Centered Images, Copy the Centered Clickable Image Statement above and paste it into a .txt (Notepad) file.

Replace:

TARGETURL with the URL you want the image linked to.

MOUSEOVER TEXT with the text you want to show on MouseOver of the Image.

SAFE WORDS with something to show if the image doesn’t.

IMAGEURL with the URL of the Image you want to display. (.png .jpg or .gif)

# in the Width Attribute with the Width of the image.

# in the Height Attribute with the Height of the image.

*Note: If you don’t have a hosted image, try ImgBox.com. It’s *Free.

Did you read through the replacement instructions above? By the end of it you were beginning to think in HTML. (Don’t fall over.) It really is a very simple language. With CSS you can do amazing things. Just look around the Internet and realize that behind every image is a similar statement. Nove-Noga!

Next “Where do You Start?” PR by Nove-Noga:
Graphics for Your Needs

Nove-Noga.com/Learn.html
Nove-Noga.com
Nove-Noga.com
© 7/23/2014
Edited 1/7/2015

Member Note: To comment on this PR, simply click reply on the owners main post below.
-  Copyright 2016 IBOsocial  -            Part of the IBOtoolbox family of sites.