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

Sarah Pritchard Professional   CEO, Angel Cuddle Publishing
Thanks Bill,

This is very useful.

When I get time, I'll give this a go.

Best wishes,

Sarah
Aug 7th 2007 15:48   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
Hi Sarah,

I have kept it to rock bottom basics. Most experienced users of HTML may cringe at the few commands I have given, but for a beginner it is enough to get a reasonable presentation displayed.

It is enough to show even the total novice that it is not as hard as first appears to manipulate your layout to look how you want it to.

The site I recommend in the article is very good for beginners and sometimes I still refer to it as a first stop if I cannot remember the exact way to write something

Bj
Bill Brown aka Bjantiques
http://www.eresourceheaven.com


Aug 8th 2007 07:04   
Beth Schmillen Professional   
Hi Bj,

this is really a great resource for anyone. There's nothing worse than being in the middle of using html and i can't recall <img src ... which happened just the other day!

Now i can come here and get the code in short order!

thanks,
BEth
Aug 20th 2007 04:18   
Ariela Gonzalez Advanced   
Thank you Bill, this has been very helpful, although I haven't checked it thoroughly yet so that I can learn.
Best wishes
Ariela
Aug 20th 2007 22:07   
Lisa Lomas Professional   
Hi Bill,

Think I will stick to using NVU, its my secret weapon that
really makes me look like I know html, hehehe.
Thankyou once more buddy.
Aug 28th 2007 21:03   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
Hi Beth,

Writing code just comes natural to me I started right from the begining using code and so it has stayed with me.

I don't do it now but at one time I could program in 15 different programming languages including several different versions of Basic plus, Cobolt, Fortran, RPG, dbase4, Pascal, C, HPL for HP programable calculators and also the Psion version of C.
All part of getting my graduate System analisist / programmer certificate.


Now I stick to websites and use HTML and PHP/MySql.


Sep 6th 2007 20:39   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
Hi Ariela,

All part of the service. By splitting it up members can always refer directly to the part they need without having to read through what they dont need to find it.

Also it does not look so intimidating when split up as I have done it.


Sep 6th 2007 20:42   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
Hi Lisa,

Sorry to say this but I just do not like all these different page makers.
I have not found one that does not add things there is no need for making pages much larger than thye need to be.

This in turns slows down the speed the pages open.

I always try to make pages fast opening, I know if I have to wait while it thinks about it I am long gone before it has finished opening, and I also know that most people using the internet these days are the same.




Sep 6th 2007 20:46   
CatHead Advanced   
Hi BJ,

Thanks for the info. Do you know of any good information resources for more advanced html tecniques, like image positioning on the page and creating and positioning tables for example. I'm just learning this and any help is appreciated.

CatHead
Oct 1st 2007 23:19   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
Hi CatHead,

Sorry for the delay in replying I meant to come back and reply a couple of days ago but have been very busy.

I avoide exact positioning on pages as I find it tends to mess up if you are changing the width of your brouser on the screen, or you decide to change a width in the layout of your page.

I work with tables and I never give tables an exact width I always use percentages of the width that way when widening or narrowing a brouser window the page stays in proportion and will only create a scroll bar at the bottom if you really do narrow it below the limits imposed by banners etc.

I will pull a list of sites for you and send them to you through the message system.


Oct 3rd 2007 17:19   
CatHead Advanced   
NP BJ,

I've managed to solve some of my own problems in the meantime through tinkering LOL. But I still am looking forward to the information you are sending. TYVM!

I have discovered that the business centers don't accept "textarea boxes" very well. They show up but not the right size, and also if you re-edit your business center it displays extraneous information in the text area field. So this may be a glitch or i'm using the wrong textarea code for the ABC, IDK.

Anyhoo, no rush, I really don't have a lot of time to develop my ABC right now. But I'd like to make it as nice as I can.

Have A Great Evening,

CatHead
Oct 3rd 2007 21:06   
Jennifer Underwood Professional   Promoter
To me, and please I don't want to sound lazy........but trying to figure out what you can and can't do this and that is really getting to me. *I have 5 kids, and my mind when it comes to taking care of them and then trying to remember html codes and ubb codes and such* is soooooooooooo time consuming.
Why can't all sorts of (bulletins, blogs, subjects, and so on) just except the same. Again, I am learning this and I am sure there is a reason (it may have already have been explained SOME WHERE in here.....lol)
WOW at Apsense.......I am so impressed!
Oct 3rd 2007 21:32   
CatHead Advanced   
I managed to figure out a way around the 'textarea' glitch BJ!

I know what you mean nomorehackers, what a nightmare trying to figure all this stuff out. But I get a real feeling of accomplishment when I have a small victory LOL

Maybe a more uniform system would be a good idea though, in the ABC, blogs, groups, etc. Then all the APSense members wouldn't have to spend so much time creating groups focused on HowTo's and they could get down to business LOL.
Oct 5th 2007 05:25   
Jenny Stewart Professional   
Hi Bj

Thanks for a very useful topic. It will be a great help -

BUT OMG - now my brain hurts. I know you are not a great fan of these page makers - but for someone like me who is a total computer klutz - anything with a what you see is what you get facility is a godsend. This time of year I am lucky to spend a tenth of the time I want on the internet - and learning something new right now is not an option!!

Saludos
Jenny
Oct 26th 2007 15:11   
Collette Johnson Professional   Collette's Naturals
Another helpful article. Thanks a bunch BJ
Oct 27th 2007 11:58   
Susan coils Senior   Web Design & Marketing Services for Small Business
As usual Bj, you astound me.
You make it sound so simple, but to me it is totally foreign. And yes, I should take the time to learn it. I like the tip about saving the word doc. as html and then playing around with that. that would be a big help.
Like anything, practice makes perfect. For now, I don' teven know where the keys are for creating html. so at least learning them would be a good start.
Thanks again.
Oct 27th 2007 16:57   
David Dubb Professional   ESL Coach + InternetWork Marketer
Hi Bill,

Extremely useful resources, I still mainly use my NVU but sometimes need to make changes. This is a very helpful one stop for basics.
Oct 28th 2007 02:27   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
Hi San,

for me it is easy and I write in code just as easily as anyone else would write a letter or the text for an article.

The reason for this is I started over 7 years ago with my first web page and as a programmer with experience in 15 different programming languages ranging from basic, pascal, C, Cobolt, Fortran, RPG and so on It never occured to me to write a site in anything but code.

Here in APSense I only use the basics that are given above and the reason for this is to show you dont need to know all the ins and outs of HTML to get a layout that looks presentable.






Oct 28th 2007 06:12   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
Heads up.
I found an errata and it has been corrected.

I found that the closing </a> in the following section was not showing.
this was due to the fact you have to do some little editing tricks to actually get HTML code to show on an HTML based page rather than have it execute the code.


"Clickable image"

<a href="http://www.eresourceheaven.com" target="_blank"><img src="http://www.eresourceheaven.com/images/erhban1.jpg" border="0"></a>


Oct 28th 2007 06:53   
Fajar Rahadiyan Senior   Web Designer, Marketing
wow....nice. Good information for me as a newbie. thanks alot
Dec 29th 2010 13:23   
You are not yet a member of this group.