HTML for the masses
Squidoo has a nice editor for your lenses, but things can be improved. This lens will show you some simple tricks to include more than possible with simply using the editor.
These tricks should be used in modules like the link list, or the write module. The introduction has a more advanced editor, already supporting things like links and such.
To make things clear, we will always post the result, then the code to get that result underneath it ...
Contents at a Glance
The basics
Setting text to bold and italic
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.
This will center the text.
<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.
Images to brighten things up
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 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.
Alignment
Order your text and images the way you want
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
<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;"
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;"
Link me up baby
Without links, there would be no world wide web
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>
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>
Colors
O christmas tree, o christmas tree !
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).
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).
Size does matter
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.
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.
Fonts
Default fonts are cool, but what if you want to use a different one ?
Simply selecting the font
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
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
Backgrounds
If you want to make text stand out from the rest, use backgrounds and/or a color.
<p style="background: lightgreen">Simple green background</p>
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.
Tables
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.
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.
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.
Drop some text in the bin
You can leave a note here, or if you need something done in HTML and don't know how, drop your question for all to see.
|
lravidlearner
Lots of help to me as a newbie on Squidoo who's a little rusty on html. Thanks so much Posted October 07, 2008 |
|
A_RovingReporter
This is a ten-star lens. Posted October 06, 2008 |
|
LeighColbourne
Thank You so much for your work here Posted October 02, 2008 |
|
JustAls
great info thank you! Posted October 01, 2008 |
|
LisaMarieArt
Glad I found this lens! I'm already familiar with HTML but I have to admit I was a bit stumped as to how I could recreate the effects I wanted within the limitations of the editor. Great job! Thanks! Posted September 30, 2008 |
