LCW Business Group - APSense help and tutorials

Making the most of your APSense Business Center. 8. Basic HTML Tips and tricks.

by Bj aka Bill Brown Hosting and Backup Service provider
Bj aka Bill Brown Magnate I   Hosting and Backup Service...
Making the most of your APSense Business Center. 8. Basic Tips and tricks.

This is a section I am adding to try and help you get a decent layout on the pages as the Design option can be a bit tricky at times.

I am going to give some very basic html codes that you can use even if you can’t spell HTML as they say.

"Basic HTML Codes"

<br /> = Start new line
<br /><br /> Will give a blank line between two lines of text.
<font size="5">Text</font> This will give a large text size and is good for a page header
Note the actual number can be 1, 2, 3, 4, 5, or 6 however I strongly recommend you do not use size="6" as it will tend to distort your page layout when viewed.

<font color="#FF0000">Text</font> This will give you the color of the font.
The basic colors are
#000000 = Black
#FFFFFF = White
#FF0000 = Red
#00FF00 = Green
#0000FF = Blue
Note

If you want a detailed list of colors I can recommend visiting BoogieJack's web site at
BoogieJack.com
He also has some good tutorials on using basic HTML and was one of the sites I used way back when I first started learning HTML.

<font size="3" color="#FF0000">Text</font> would give a Red text with the size of 3
as you can see you can combine the size and color commands.
and when you want to terminate the font size the </font> is used.
Font commands can also be nested inside each other.

Example. I want a page with a basic font size of 2 with a color of Black but I need some things to be a bit bigger and some to be in a different color lets say Blue.

The Code

<font size="2" color="#000000">this part is black size 2<br /><br />
<font color="#0000FF">This part is Blue and same size as previous and starts on a new line</font><br /><br />

This text returns to Black and is on a line with one line space between it and the last one.<br />
The next text will be larger <font size="4" color="#FF0000">This is a size 4 text in Red</font> it could be used as a headline for example.</font>

In the above example you will see I open an initial font size of 2 and color of Black (<font size="2" color="#000000">) I leave this open for the complete example and only close it at the end with the last close font command (</font>)
Also note that inside this basic font declaration I have opened other font commands and close them as soon as I have finished with them.

For every open command there must be a closing command.

The result

this part is black size 2
This part is Blue and same size as previous and starts on a new line

This text returns to Black and is on a line with one line space between it and the last one.
The next text will be larger This is a size 4 text in Red it could be used as a headline for example.

Other Basic Font formatting commands are

<b>bold</b> place the text in bold font to give it emphasis
<i>italics</i> place text in Italics.
<u>underline</u> underline the text.

These again can be nested example <b><i><u>text</u></i></b> this would place text as bold in italics and underlined.

Note the order that the commands were opened and closed in. The underline was the last to be opened and therefore must be the first to be closed. So close them in the reverse order that you open them.

"Clickable Links"

The next part is the links to your website you want people to go to if you place them in your descriptions.

To do this you need an anchor command which is opened by using the <a href="...."> and is closed with the </a>

"Clickable URL"

<a href="http://www.eresourceheaven.com" target="_blank">http://www.eresourceheaven.com</a>

In this example the second http://www.eresourceheaven.com will be displayed and be clickable.

http://www.eresourceheaven.com

"Clickable Text"

<a href="http://www.eresourceheaven.com" target="_blank">e resources</a>
In this example the text "e resources" will be displayed and be clickable.
e resources

You could also use "Click Here" or "Visit my Site" as the clickable text, or anything else you want.

"Note"
The target="_blank" tells the browser to open in a new window. The reason for this is that you may not want the visitor to leave your site but you do want them to look at the other site.

By using this command the visitor cannot forget which site they were looking at. When they close out the browser window with the site you sent them to, your site will still be open on their screen and they can explore further, and see what else you are offering.

"Images"

Your images must be hosted somewhere on the internet so that you can address them in the <img src.....> command.
If you make your images too wide this will distort your page so do not use any wider than 468 pixels

"Non clickable image"

<img src="http://www.eresourceheaven.com/images/erhban1.jpg" border="0">
In this example the image will be displayed only and not clickable.



"Clickable image"

<a href="http://www.eresourceheaven.com" target="_blank"><img src="http://www.eresourceheaven.com/images/erhban1.jpg" border="0"></a>
In this example the image will be displayed and be clickable.



To prevent your image getting an unwanted black border around it use the border="0" command. Note its position in the <img src.....> command.

If you have an image wider than 468 you can force it down to 468 by adding the width="468" command as shown here.
<img src="http://www.eresourceheaven.com/images/erhban1.jpg" border="0" width="468">

This will automatically reduce the height in proportionate ratio to the width and so display an undistorted image.

"How to put this basic information to use"

I strongly suggest that you prepare your page content using notepad or word pad.
If you use Word to design you page content you are asking for trouble as it adds all sorts of odd code.

Make sure your "Business Center" is not active in the "Business Exchange"

Once you have the page content ready go to the section of your "Setting up My Business Center" that you want to add the page content to and click on the HTML tab of the description window.

Make sure the window is empty then copy and paste the page content from the notepad/wordpad document into the window.

DO NOT Click on the Design tab.

Simply click on the "Save" button.

Now go and view your page in your "Business Center" and see how it looks.
If its not quite right you can make changes in you Notepad/wordpad document and once ready go back and delete the content from the HTML window and then copy and paste the adjusted content again and save again.

Here is a very easy trick to get an idea of how your content will look before you start adding it to your "Business Center".

Save your prepared notepad/wordpad document to your Desktop.
Right click on this document and then left click on rename.
If your document is called mypage.txt for example change it to be mypage.html.
Now click the save.
You will get a warning window just click on ok.
The document will now look like an html page. Click on it and it will open in a browser window.

You will now see if you have your text colors and sizes correct and you can test your links to see if they work as well.

If you need to edit or change something then right click on the page and left click on View Source. This will open a notepad window and you can make changes and then save it.

To see the changes just refresh the page Using this method you can try different layouts and text sizes / colors then once you are happy with it you can then add it to your "Business Center" as described above.
Aug 7th 2007 12:24

Sponsor Ads


Comments

Mohann Krish Advanced   
Hi Bill, I am learner of HTML and found this article refreshing. However, I learn the font tags are deprecated now by W3C. Can we use style tags here so as to include font size?
May 23rd 2011 22:20   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
This is some thing i need to investigate. I am currently learning to use CSS and write sites without using tables font declarations and so on.
May 24th 2011 07:00   
Rona T. Advanced  Program Analyst
BJ I appreciate you sharing this information; I am chewing on this elephant slowingly! lol!
May 24th 2011 16:57   
Paula van Dun Magnate II   Retired
Thanks for writing this tutorial. I am sure many newbies can make good use of it. Will ad you know where
May 27th 2011 05:12   
You are not yet a member of this group.