Simple HTML tricks to use with Squidoo

bold
<b>bold</b>

One has to start somewhere. Bold in HTML is done by enclosing your text in <b></b> tags. You can use this almost everywhere. In subtitles, titles, the body ...

italic
<i>italic</i>

Italic works by the same principle. Enclose the text with <i></i> tags and you are done.

Center text

<p style="text-align: center;">Center text</p>

This will center the text.

The first thing you need to do if you want to use an image at Squidoo is to upload it somewhere.
If it is an image already on some server, you have to look up the URL of that image.

Take for example the lens logo in the top left. If you view the properties of that image, you get "http://static.squidoo.com/resize/squidoo_images/-1/lens1327835_logo.gif", we will need that later.

Just an image

<img src="http://static.squidoo.com/resize/squidoo_images/-1/lens1327835_logo.gif" />

As you can see, we used the URL found earlier into this code. The src="" is used to specify that URL.

An image with alternate text

<img src="http://static.squidoo.com/resize/squidoo_images/-1/lens1327835_logo.gif" alt="Squidoo rocks!" />

Alternate text is usually not visible (Internet Explorer shows it when hoovering over the image), but it is important for several reasons. First people having images turned off will see the text, instead of an empty image. Secondly, images mean nothing to search engines, but alternate text does.

Resizing an image

<img src=http://static.squidoo.com/resize/squidoo_images/-1/lens1327835_logo.gif" width="58" />

<img src="http://static.squidoo.com/resize/squidoo_images/-1/lens1327835_logo.gif" height="44" />

You can specify either the width, the height, or both. If you do specity both though, make sure the proportions are correct, as it will make your image look funny otherwise. The size is specified in pixels. You can see the original dimentions in pixels when viewing the properties of your image. In our case, the logo was 116 x 88 pixels.
The practise of resizing images this way is not the best way. When the browser fetches the image from the server, it still loads the original one and then resizes it on the local PC. Images are better resized in a photo editor, the size will be smaller and quality better.

If you need a place to store a large amount of images, consider Share a Pic, they even pay you every time someone looks at your picture.

If you have a paragraph of text you can toy with the way your images are placed on the page.

Left & right alignment

There are 2 images here, one is left aligned, one is right aligned. Text floats between them, and will go underneath when running out of space (as you can see with this last line).

<img src="http://static.squidoo.com/resize/squidoo_images/-1/lens1327835_logo.gif" height="44" width="116" align="left" /><img src="http://static.squidoo.com/resize/squidoo_images/-1/lens1327835_logo.gif" height="44" width="116" align="right" />There are 2 images here, one is left aligned, one is right aligned. Text floats between them, and will go underneath when running out of space (as you can see with this last line).

The important part here are the image's align="left" and align="right" attributes.
Always place your images before the text you want them aligned with.

Centering images and text

This text and image are centered

<p style="text-align: center;">This text and image are centered
<img src="http://static.squidoo.com/resize/squidoo_images/-1/lens1327835_logo.gif"></p>

This is an easy way to center items. It works for images, links, ...
The trick here is to wrap everything in <p></p> tags and add style="text-align: center;".

Clearing up any alignment
This text is aligned.
But this text is not.

<img src="http://static.squidoo.com/resize/squidoo_images/-1/lens1327835_logo.gif" align="left" />This text is aligned.<br clear="all" />But this text is not.

The <BR> tag normally just places your text to a new line. When adding the clear="all" attribute, it also clears any alignment set in previous images.

Spacing
Creating space around an image.

<img src="http://static.squidoo.com/resize/squidoo_images/-1/lens1327835_logo.gif" height="44" align="left" style="margin-right: 20px;" />Creating space around an image.

The important part here to note is style="margin-right: 20px;". It creates space between the image and the text.
Use margin-top to create space above the image, margin-left to the left of the image, margin-bottom below the image. Or just use margin to create space all around.
Example:
This creates different space all around the image:
style="margin-left: 10px; margin-top: 20px; margin-right: 30px; margin-bottom: 5px;"

Links are the cornerstone of the web. So it's only logical that you should be able to add some.

The simple link
A link to a lens
<a href="http://www.squidoo.com/magic-the-gathering/">A link to a lens</a>

Links are done with <a></a> tags. Enclose the text with them, and specify the href="" attribute as the URL of the destination.

An image link

<a href="http://www.squidoo.com"><img src="http://static.squidoo.com/resize/squidoo_images/-1/lens1327835_logo.gif" /></a>

Just combine the link, with the code we saw when adding images.

Some other combinations

Partially bold link text
<a href="http://www.squidoo.com/magic-the-gathering/">Partially <b>bold</b> link text</a>

Combine image and text
<a href="http://www.squidoo.com"><img src="http://static.squidoo.com/resize/squidoo_images/-1/lens1327835_logo.gif" />Combine image and text</a>

First thing to be said, don't overdo the color thing.

Simple colored text

Green
<b style="color: green; font-weight: normal;">Green</b>

There are many options to accomplish this, but I have found this one to be the easiest.
First we enclose the text in <b></b> tags. Then we add a style to it.
"color: green;" will set it to green.
"font-weight: normal;" will reverse what the <b></b> tags do.
The color "green" can be replaced by the color you want, ranging from yellow, white, black, darkred to a color you specify yourself.
If you want to specify your own color do so in hexadecimal RGB color (#FFFFFF for white for example).

So you like it big ? Or small ?

Relative size

Smaller & Normal & Larger
<b style="font-size: smaller; font-weight: normal;">Smaller</b> & Normal & <b style="font-size: larger; font-weight: normal;">Larger</b>

The key here is font-size: smaller.
Same for the larger font.

Absolute size

xx-small x-small small medium large x-large xx-large
<b style="font-size: xx-small; font-weight: normal;">xx-small</b> <b style="font-size: x-small; font-weight: normal;">x-small</b> <b style="font-size: small; font-weight: normal;">small</b> <b style="font-size: medium; font-weight: normal;">medium</b> <b style="font-size: large; font-weight: normal;">large</b> <b style="font-size: x-large; font-weight: normal;">x-large</b> <b style="font-size: xx-large; font-weight: normal;">xx-large</b>

That's a whole lot of text, but the important part is still font-size: xx-small. Change xx-small with whatever you want.
Same for the larger font.

Go pixels

30px for the win
<b style="font-size: 30px; font-weight: normal;">30px for the win</b>

Set font-size: 30px to whatever value in pixels you want and see the result.

Default fonts are cool, but what if you want to use a different one ?

Simply selecting the font

This is written in Georgia

This is written in Courier New

This is written in Times New Roman

<p style="font-family: Georgia;">This is written in Georgia</p><p style="font-family: Courier New;">This is written in Courier New</p><p style="font-family: Times New Roman;">This is written in Times New Roman</p>

So what's the key word here ? "font-family" !
Specify a font name after it and the rest of your text will be displayed in the font of your choice.
Warning! Not everyone has the same fonts installed, so stick to the ones that are widely available.

Some examples
Arial,Times New Roman,Verdana,Georgia,Comic Sans Serif,Trebuchet,Courier New

If you want to make text stand out from the rest, use backgrounds and/or a color.

Simple green background

<p style="background: lightgreen">Simple green background</p>

This text floats on the right side, with a nice background to make it stand out.

A nice feature with backgrounds is to make some relevant text stand out from the rest, but not in the flow.

<p style="background: lightyellow; float: right; width: 200px;">This text floats on the right side, with a nice background to make it stand out.</p>A nice feature with backgrounds is to make some relevant text stand out from the rest, but not in the flow.

Squidoo doesn't support your standard <table> tags. They'll be filtered out and you'll be left with nothing.
However, there is a fairly easy way to simulate tables.

Row 1 Cell 1

Row 1 Cell 2

Row 2 Cell 1

Row 2 Cell 2

Row 3 Cell 1 & 2

<p style="float: left; width: 100px; border: solid 1px black; padding: 2px; margin: 0px;">Row 1 Cell 1</p><p style="float: left; width: 100px; border: solid 1px black; border-left: 0px; padding: 2px; margin: 0px;">Row 1 Cell 2</p>
<p style="clear: both; float: left; width: 100px; border: solid 1px black; border-top: 0px; padding: 2px; margin: 0px;">Row 2 Cell 1</p><p style="float: left; width: 100px; border: solid 1px black; border-left: 0px; border-top: 0px; padding: 2px; margin: 0px;">Row 2 Cell 2</p>
<p style="clear: both; float: left; width: 205px; border: solid 1px black; border-top: 0px; padding: 2px; margin: 0px;">Row 3 Cell 1 & 2</p>

That's a whole bunch of code, but don't worry, it's easier than it looks.
First of all, every cell will be represented by <p></p> tags.

The first cell:
<p style="float: left; width: 100px; border: solid 1px black; padding: 2px; margin: 0px;">Row 1 Cell 1</p>&
We mark every cell as float: left. This is because <p></p> tags would otherwise go to a new line every time. Specify the width of your column with width: 100px;, unfortunatly, you will have to do this for every cell.
The first cell has a border all around border: solid 1px black;.
And this padding: 2px; adds a small space between the text and the border. Same for the margin: 0px;, it's used to remove any space between the cells and/or rows.

The second cell is similar:
<p style="float: left; width: 100px; border: solid 1px black; border-left: 0px; padding: 2px;">Row 1 Cell 2</p>
The only addition is border-left: 0px;, because there is already a border on the left, no point in adding it twice.

You can repeat this if you need more than 2 columns.

The next line is exactly the same as the first line, with 1 exception.
clear: both; on your first cell makes them go to the next line.

The third line is an example of merging cells.
<p style="clear: both; float: left; width: 205px; border: solid 1px black; border-top: 0px; padding: 2px; margin: 0px;">Row 3 Cell 1 & 2</p>

clear: both; again makes it go to a new line.
width: 205px; is calculated by taking the with of 2 cells: 200px. Then you add any borders that are now missing (1 pixel, border in the middle): 201px. Then you add any padding that will be missing. Each cell has padding of 2px on the left en on the right, now you are missing a cell, so that's 4 pixels: 205px in total.
The rest is the same.

You've now created the same look as a table, unfortunatly with alot more code than a normal table.