Forcing a Line Break
I've found adding an extra <br> or two helps keep a "Text List" module tidier if using the module to write a lot of paragraphs for each line entry.
It's not needed in a Text/Write module as you can just use the enter key to move down to the next line.
It's not needed in a Text/Write module as you can just use the enter key to move down to the next line.
Inserting Images
You don't have to rely on the "Upload an optional image to accompany your text" that accompanies each Text/Write module which places an image in the top right hand corner. Though if you decide to insert an image as demonstrated here you will need to get it hosted elsewhere.
Here is an example of an image inserted and place with HTML...
Here is the code that you would use to do it yourself...
<img src="http://www.yourdomain/squidoo/yourimage.jpg">
You will of course change it to the actual URL where the image is hosted.
The advantage of hosting your own images and manually inserting them into your modules is you determine the size you wish the image to be displayed. You can also align the image to the left of the module (Squidoo only allows right alignment) and wrap text around the image. And you can have more than one image per module.
You can also insert a series of images in your lens, see www.squidoo.com/royalty-free as an example.
Here is an example of an image inserted and place with HTML...
Here is the code that you would use to do it yourself...
<img src="http://www.yourdomain/squidoo/yourimage.jpg">
You will of course change it to the actual URL where the image is hosted.
The advantage of hosting your own images and manually inserting them into your modules is you determine the size you wish the image to be displayed. You can also align the image to the left of the module (Squidoo only allows right alignment) and wrap text around the image. And you can have more than one image per module.
You can also insert a series of images in your lens, see www.squidoo.com/royalty-free as an example.
How can I make a clickable icon, button, picture or banner?
Using the HTML code for IMG in conjunction the A HREF will give you an image (no matter what size, whether it's a button, banner, thumbnail or larger) that is hyperlinked to whatever site or webpage to where you want it to go.
You may also use it to create a thumbnail image and then link to that same picture but at it's full size. You will however have to host that image elsewhere, unless it is already uploaded.
This is an example of a thumbnailed image linked to the original larger image (which in this case is embedded in a HTML page, but it could go straight to the image).
This is what the code looks like...
<a href="http://www.yoursite.com/thepageyouwanttolinkto.html"><img src="http://www.yoursite.com/squidoo/yourimage.jpg" border="0"></a>
Note: You need to replace the URL's with your actual domain and file names. The rest remains unchanged.
What you're doing is wrapping the hyperlink around the img (image) tag. Much like a normal text hyperlink that we've already covered previously, but instead of the displayed text you've replaced it with the image information.
The method is identical to having a clickable banner...
You may also use it to create a thumbnail image and then link to that same picture but at it's full size. You will however have to host that image elsewhere, unless it is already uploaded.
This is an example of a thumbnailed image linked to the original larger image (which in this case is embedded in a HTML page, but it could go straight to the image).
This is what the code looks like...
<a href="http://www.yoursite.com/thepageyouwanttolinkto.html"><img src="http://www.yoursite.com/squidoo/yourimage.jpg" border="0"></a>
Note: You need to replace the URL's with your actual domain and file names. The rest remains unchanged.
What you're doing is wrapping the hyperlink around the img (image) tag. Much like a normal text hyperlink that we've already covered previously, but instead of the displayed text you've replaced it with the image information.
The method is identical to having a clickable banner...
Wrapping Text Around An Image
If you absolutely need to have an image in the left hand side of your Text/Write module and you want the text to neatly wrap around it (like I'm doing with this one) then you'll again need to have an image uploaded to some webspace and taking the URL destination of that image you replace it in the bit below that says http://www.yourdomain/squidoo/yourimage.jpg.Here is the code that you'd use...
<img src="http://www.yourdomain/squidoo/yourimage.jpg" style="float: left; margin: 0px 5px 5px 0px;">
You can leave the margins as is, or change it to suit your layout or taste. The 1st margin (0px) is for the top of the image, the 2nd is for the margin on the right, the 3rd for the margin underneath and the 4th for the margin on the left hand side.
Please note: Don't have too large an image when using this technique otherwise it'll look a bit of a mess.
Bold and Italics
<b>Bold</b> and <i>Italics</i> gives you Bold and Italics.
You can also have <b><i>Bold Italics</i></b> which will look like Bold Italics
<strong>Strong</strong> and <em>Emphasis</em> gives you Strong and Emphasis.
Which looks a heck of a lot like Bold and Italics don't you agree?
You can also have <b><i>Bold Italics</i></b> which will look like Bold Italics
<strong>Strong</strong> and <em>Emphasis</em> gives you Strong and Emphasis.
Which looks a heck of a lot like Bold and Italics don't you agree?
Colors
Mr Magicality has some good tips on adding color to fonts.
For those who want to know, he uses a bold tag so he can sneak in the styles he wants. So this is what it looks like as raw code...
<b style="color: green; font-weight: normal;">Green</b>
The font-weight: normal; reverses the effect of the bold.
And this is how it looks... Green
You can change the color for red, blue, yellow... in fact if you use "hexadecimal colors" you can use any one of hundreds of colors. You would replace the name of the color with the hexademical alpha-numeric digits, eg: #B168ED.
A full list of available colors is demonstrated in the new HTML Tips for Color lens.
For those who want to know, he uses a bold tag so he can sneak in the styles he wants. So this is what it looks like as raw code...
<b style="color: green; font-weight: normal;">Green</b>
The font-weight: normal; reverses the effect of the bold.
And this is how it looks... Green
You can change the color for red, blue, yellow... in fact if you use "hexadecimal colors" you can use any one of hundreds of colors. You would replace the name of the color with the hexademical alpha-numeric digits, eg: #B168ED.
A full list of available colors is demonstrated in the new HTML Tips for Color lens.
Underlining
<p style="text-decoration: underline">Create underlined text</p>
Unfortunately doing it that way won't get it to work with one word underlined in a sentence, the whole sentence/paragraph gets underlined.
However using a little trick that Magicality used with sneaking in a style with a bold tag you can easily underline just one word in a sentence.
This is the code you use...
<b style="color: black; text-decoration: underline; font-weight: normal;">underline</b>
Update
This lens has been a vehicle in which Squid newbies can learn, but now the Old Dog has learned a new trick.
AlexandraHubbard points out that the <u>underline</u> tags can be used to underline. Which is correct, though it has never worked at Squidoo.
Seems that it now does!
Thank you to AlexandraHubbard for setting us straight and keeping us up to date!
Create underlined text
Unfortunately doing it that way won't get it to work with one word underlined in a sentence, the whole sentence/paragraph gets underlined.
However using a little trick that Magicality used with sneaking in a style with a bold tag you can easily underline just one word in a sentence.
This is the code you use...
<b style="color: black; text-decoration: underline; font-weight: normal;">underline</b>
Update
This lens has been a vehicle in which Squid newbies can learn, but now the Old Dog has learned a new trick.
AlexandraHubbard points out that the <u>underline</u> tags can be used to underline. Which is correct, though it has never worked at Squidoo.
Seems that it now does!
Thank you to AlexandraHubbard for setting us straight and keeping us up to date!
Offervault is an aggregation service and an affiliate program search engine that displays offers from several affiliate networks (CPA networks). It’s actually a great time saving tool because you don’t have to login to each and every affiliate program to find a decent offer.
