For additional information Click Here
Simple HTML Tips:
Note: This is the 19th in the “GetStarted” Sequence.
No matter how much you fight against it, you will find it necessary to understand at least a little simple HTML if you are planning to do anything on the Internet. Don’t let is scare you. Chances are that you already know far more than you think you do. Here are a few simple HTML tips to get you started.
*Note: An Apology may be in order. I am a programmer by nature. I have been writing programs since 1978. HTML is just another Computer Language to me. This may not come out as simple to you as it is to me. Trust me on this part. For each piece of HTML that you need; find something that works and copy it. Learn what you need to change and go from there. My favorite Resource for HTML Information is W3 Schools.*
Let’s start simply. “URL” is the acronym for “Uniform Resource Locator” and to the rest of us it means the internet address for a page or image. It is also referred to as a Link.
The URL for my website is:
The URL, Image Link, for the Image I am using at the top of the page is:
The examples above are what I would call Complete URLs. They contain the prefix “http://” for the “Hyper-Text Transfer Protocol that tells the internet how to handle the information following it. For secure systems like Facebook you will likely be using “https://” for “Hyper-Text Transfer Protocol Secure”.
Example of https:
For many purposes, this is all you need to know. You could stop here… But, there is so much you can do when you know how things work.
Making it Work:
At HTML Dog or W3Schools you will learn that HTML consists of Tags, Attributes and Elements. Tags “…mark the beginning and end of an Element. Elements are the bits that make up web pages.” Attributes are the extra pieces of information that make the Element work. I go just a little further to consider a complex arrangement of Elements to be a Statement.
Once you know what the parts of the Statement are, you make adjustments to make it come out the way that you want. Notice that the Reference to Nove-Noga above was not a live link. At IBO Toolbox, you make a link (URL) live by Selecting the Link Text in Design Mode and providing the Target URL.
The resulting code for this Link is:
<a target="_blank" rel="nofollow" href="http://www.Nove-Noga.com">Nove-Noga.com</a>
*Note: The CSS, Cascading Style Sheet, used by IBO Toolbox makes it come out the way that it does.*
This is an Anchor Element, the key Element that makes the Internet work. This uses a paired Anchor Tag with a Beginning and an End.
Beginning Anchor Tag: <a attributes>
Ending Anchor Tag: </a>
This Target Attribute tells the system to open a new page: target=”_blank”
The Hyper-text REFerence, Href Attribute specifies the URL of the page the Link goes to:
The Link Text is the text to be displayed and is located between the Anchor Tags:
*Note: While I Capitalize for Emphasis, the actual attributes are always lower case.*
While the attributes within the Tag may be placed in any order, the structure of the Element is precise.
Personally, I dislike the standard links used in IBO Toolbox. (Sorry.) I do not believe that Red is the color to be used by business persons. Put it down to early training by a boss who had a major aversion to red ink. I like my links to look like this one for my newest Fan Page. Feel free to Like it. If you want, feel free to copy it.
Brace yourselves. If you would like to insert a link like the one above into your IBO Toolbox Press Release, you will need to know a little more. The code for this is just a little more complex.
<a rel="nofollow" href="https://www.facebook.com/Nove.NogaOnIBOtoolbox" target="_blank"
style="color:#0000ff;"title="Facebook Fan Page Nove-Noga on IBO Toolbox.">
You may be wondering where that Span Tag came from. Because I liked a larger Font-Size for my IBO Toolbox PR, the PR Editor placed my PR within a Span Element. I have found this to be a very effective tool. (Use the HTML mode button at the bottom of the Content Editor to reveal the HTML generated by IBO Toolbox for your Press Release.) Span tags can be nested. Each of the Paired Tags MUST be Paired. I used this Span Tag to set the color for my Links. The Ending Span Tag </span> Closes the Span Element. Returning the color to that set by the original Span Tag. This Statement is one that I can use in HTML mode to replace the Link Text to create a Link that looks like I want it to.
Notice that in addition to the Href and Target Attributes this Statement uses a Style and a Title Attribute in the beginning Anchor Tag.
<a rel="nofollow" href="https://www.facebook.com/Nove.NogaOnIBOtoolbox"
title="Facebook Fan Page Nove-Noga on IBO Toolbox.">
The Link Text is slightly more complex this time. I am using the Span Element to set the color for my Link Text.
The Ending Anchor Tag Closes the Anchor Element.
*Note: This is a perfect example of Cascading Style Sheets. The local Style Attribute controls the display of the Information that follows it.*
*NB: To get my page to come out the way it does, I prepare my Press Release and place it within a Span Tag. Originally, this was done by the PR Editor as part of the Process. After recent Changes, it is simpler to set this up in a text file. I just have to remember to put the Line Breaks <br> where I need them. This Span Tag sets my Font to 12pt (12 Point), the Color to Black, and the Line Height adds a little space between the lines for a cleaner appearance. *
<span style="font-size:12pt; color:#000000; line-height:1.2;">
To make my URLs (links) come out the way that I want, I have set up a generic Anchor Element that I use as a guide to create the new Links.
<a rel="nofollow" href="TARGET URL" target="_blank" style="color:#0000ff;" title="TITLE"><span style="color:#0000ff;">LINK TEXT</span></a>
Then I simply Replace the parts that need to be changed:
Then, in HTML Mode, I Select my LINK TEXT in the Press Release and Paste in my prepared Anchor Element. If I did it right, it shows up the way that I want.
I am a firm believer in the philosophy; If the world doesn’t work the way that you want it to, change it so that it does. That is part of why I learned to create my own HTML5 pages for my website. If something goes wrong, I want to be able to figure out what I need to do to fix it. It has stood me in good stead. Often the code presented for our use, is incomplete or even wrong. With a little simple HTML you can make it come out the way that you want. Nove-Noga!