It's not that hard...
Before you start reading all this, you may want to open Advanced HTML in a new tab, because you'll be wanting to check it out as soon as you've finished this!
You can use basic HTML in a few of the lens modules.
You can use basic HTML in a few of the lens modules.
Mostly used to create hyperlinks (they are the "live links" to other sites). Though there are also other uses for HTML.
If you find yourself in need of quick tutorial on how to do it, here it is! Being able to grasp this skill (or adding it to favorites so it's only a quick click away) will take your Squidoo Lensmastering talents from beginner to intermediate.
Table of Contents
- Which Modules allow HTML?
- What HTML can I use?
- Making a Hyperlink
- Adding HTML to the Introduction Module
- Making An Email Link
- Forcing a Line Break
- Inserting Images
- How can I make a clickable icon, button, picture or banner?
- Wrapping Text Around An Image
- Bold and Italics
- Colors
- Underlining
- Removing the underline from Hyperlinks
- Centering text and images in your module
- What HTML can't I use?
- Using the iframe
- Advanced HTML
Which Modules allow HTML?
In any module such as affiliate, Text List, Flickr, Guestbook, Poll Module where it says "Give your module a description (optional)" you can include HTML tags.
In the Text/Write Module in the main body where you can have up to 10,000 characters, you can use HTML in there too.
In the Text List itself you want to make each line entry (or part thereof) into a hyperlink.
In the Text/Write Module in the main body where you can have up to 10,000 characters, you can use HTML in there too.
In the Text List itself you want to make each line entry (or part thereof) into a hyperlink.
What HTML can I use?
- <strong>
- <b>
- <em>
- <i>
- <a>
- <p>
- <br>
- <img>
- <ul>
- <ol>
- <li>
- <iframe> iframe functionality is now disabled.
- <embed> This was in the official list of tags that worked but from personal experience I've never got it to work.
Making a Hyperlink
This (for me at least) is the most used bits of HTML code I use on my lenses.
<a href="http://www.domain.com">www.yourdomain.com</a> will become www.yourdomain.com
You can write anything where it says www.yourdomain.com such as click here or read more
Just so long as you get the "a href" destination right. You get that wrong and people won't be clicking through to where you originally intended.
And if you leave out the http:// in the "a href" you'll be inadvertently telling the browser when the link gets clicked to go to a page on Squidoo (or the root directory of whichever website you're adding the html hyperlink to).
To make a clicked link pop open in a new browser window you add the following code: target="_blank"
It would look like this...
<a href="http://www.domain.com" target="_blank">www.yourdomain.com</a>
<a href="http://www.domain.com">www.yourdomain.com</a> will become www.yourdomain.com
You can write anything where it says www.yourdomain.com such as click here or read more
Just so long as you get the "a href" destination right. You get that wrong and people won't be clicking through to where you originally intended.
And if you leave out the http:// in the "a href" you'll be inadvertently telling the browser when the link gets clicked to go to a page on Squidoo (or the root directory of whichever website you're adding the html hyperlink to).
To make a clicked link pop open in a new browser window you add the following code: target="_blank"
It would look like this...
<a href="http://www.domain.com" target="_blank">www.yourdomain.com</a>
Adding HTML to the Introduction Module
ATTENTION: The advanced editor (TinyMCE) that was used in the Introduction module has been disabled.
It was clunky, not supported by all browsers, and difficult to implement (which is why they didn't install it into the other modules).
Particularly in Internet Explorer it would break the entire workshop.
So it's old school HTML for the Introduction Module as well!
In any case all it did was add bold, italics and underline.
It was clunky, not supported by all browsers, and difficult to implement (which is why they didn't install it into the other modules).
Particularly in Internet Explorer it would break the entire workshop.
So it's old school HTML for the Introduction Module as well!
In any case all it did was add bold, italics and underline.
Making An Email Link
Making a live email link is very much like a hyperlink. But instead of http:// you replace it with mailto:.
And instead of the URL you have your email address.
Example:
<a href="mailto:username@domainname.com">name@domain.com</a>
Again, you can replace the bit that's not in the HTML tags with whatever you want:
<a href="mailto:username@domainname.com">Email Me Now</a>
A word of caution: By allowing your email address to be displayed online you are leaving yourself open to being spammed wholesale. Spammers, scammers, phishers and other undesirables harvest email addresses automatically from websites. While I am providing this tip I suggest you instead rely on Guestbooks and the "Contact me" link in the "Look who made this lens!" (Top of the right hand side menu) as the method in which you allow your visitors to communicate with you. Though the method outlined here is suitable for mailing list subscription services such as yahoogroups, aweber and others.
And instead of the URL you have your email address.
Example:
<a href="mailto:username@domainname.com">name@domain.com</a>
Again, you can replace the bit that's not in the HTML tags with whatever you want:
<a href="mailto:username@domainname.com">Email Me Now</a>
A word of caution: By allowing your email address to be displayed online you are leaving yourself open to being spammed wholesale. Spammers, scammers, phishers and other undesirables harvest email addresses automatically from websites. While I am providing this tip I suggest you instead rely on Guestbooks and the "Contact me" link in the "Look who made this lens!" (Top of the right hand side menu) as the method in which you allow your visitors to communicate with you. Though the method outlined here is suitable for mailing list subscription services such as yahoogroups, aweber and others.
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!
Removing the underline from Hyperlinks
Underlined hyperlinks are the default. But you can remove them by simply adding a style="text-decoration: none;" in the HTML tag for the link.
With underline...
Drums and Drumming
Without underline...
Drums and Drumming
And here's the code...
<a href="http://www.squidoo.com/drumsanddrumming" target="_blank" style="text-decoration: none;">Drums and Drumming</a>
With underline...
Drums and Drumming
Without underline...
Drums and Drumming
And here's the code...
<a href="http://www.squidoo.com/drumsanddrumming" target="_blank" style="text-decoration: none;">Drums and Drumming</a>
Centering text and images in your module
Centering images is easy. You're using the p (paragraph) HTML command. Though by doing so if you put images one under the other it will create a gap between each one. This is because it is allowing for a paragraph as if it were paragraphs of text.
Here is an example of how a centered image looks...
And here is an example of the code used...
<p align="center"><img src="http://www.yourdomain.com/squidoo/yourimage.jpg"></p>
The same exact HTML is used to center text. But instead of the "img src" between the P commands, you write your text.
This might be useful for presenting a poem. But I'd advise against using it for other big slabs of text because it's not natural for the eyes to read a jagged line on the left hand side. Here is an example of centered text...
And here is the code...
<p align="center">Centered Text!</p>
Note: Be sure to use the spelling "center" and not "centre".
It seems to work fine in Firefox, but there are reports that it doesn't appear centered in Internet Explorer.
Here is an example of how a centered image looks...
And here is an example of the code used...
<p align="center"><img src="http://www.yourdomain.com/squidoo/yourimage.jpg"></p>
The same exact HTML is used to center text. But instead of the "img src" between the P commands, you write your text.
This might be useful for presenting a poem. But I'd advise against using it for other big slabs of text because it's not natural for the eyes to read a jagged line on the left hand side. Here is an example of centered text...
Centered Text!
And here is the code...
<p align="center">Centered Text!</p>
Note: Be sure to use the spelling "center" and not "centre".
It seems to work fine in Firefox, but there are reports that it doesn't appear centered in Internet Explorer.
What HTML can't I use?
Anything not listed in the "What HTML can I use?" module :-P
But seriously: forms, tables, scripts, span and now iframes... are not allowed.
We used to be able to get around a lot of limitations with the powerful iframe tag, alas, it has now gone.
But seriously: forms, tables, scripts, span and now iframes... are not allowed.
We used to be able to get around a lot of limitations with the powerful iframe tag, alas, it has now gone.
Using the iframe
With iframes you USED TO be able to do EVERYTHING else that you can't do in your Squidoo lens.
Opt-in forms, flash games, printable coupons... and much, much more.
But then it was removed.
At www.squidoo.com/iframe I explained how and why iframes are used. And lament its loss.
Opt-in forms, flash games, printable coupons... and much, much more.
But then it was removed.
At www.squidoo.com/iframe I explained how and why iframes are used. And lament its loss.
Show me some love!
Was this tutorial helpful for you? Did you learn something from it? Leave a message. But please, no links, they get deleted before anyone can see them. In fact links that go to non-Squidoo sites will see the user being banned from posting in all my Guestbooks.
Add this lens to your favorites simply by clicking this link.
submit
-
Reply
- OhMe OhMe Oct 25, 2009 @ 2:49 pm
- I have used this lens so much since I started so just had to come back and give you a blessing now that I have honorary wings.
-
Reply
- harvestscents harvestscents Oct 24, 2009 @ 3:37 pm
- Great info! Thanks for being generouse with your knowledge.
-
Reply
- TheHealthGuy TheHealthGuy Oct 23, 2009 @ 3:31 pm
- Thanks for the resource! You teach well and there are many, including myself, who appreciate you. :-)
-
Reply
- SoyCandleLover-Maker SoyCandleLover-Maker Oct 22, 2009 @ 6:22 am
- Thanks for the great info. 5 Stars Fav. :D
-
Reply
- MannixEnterprises MannixEnterprises Oct 19, 2009 @ 11:21 am
- Very nice, thanks for the free HTML info
-
Reply
- Quickcutters Quickcutters Oct 17, 2009 @ 4:35 pm
- Nice lens i will be saving it so i can go back. Thanks for putting it all together for us newbies.
-
Reply
- Harrispam Harrispam Oct 16, 2009 @ 10:28 am
- Thank you for this great lens, I definitely have to fave this one, just did my first lens and was struggling with getting a banner on it. I'm sure I'll will be visiting quite a bit. Thanks
-
Reply
- Themiscorkscrew Themiscorkscrew Oct 15, 2009 @ 6:55 pm
- Nice Lens very helpful!
-
Reply
- cara_akard cara_akard Oct 7, 2009 @ 12:07 pm
- Very nice! Thank you for the help!
-
Reply
- winstngwaf winstngwaf Oct 6, 2009 @ 2:40 pm
- all i can say is waw what a great len and very informative
- Load More
Advanced HTML
This lens started off as a tutorial about HTML basics... but we've explored some more advanced stuff. I may split it, so as to not scare people off. Once they feel confident they can click through to the Advanced HTML lens.
There'll be a few extra tips and tricks... using different fonts, font size, and whatever else I can dig up that will benefit the adventurous among you.
NEWS FLASH: The lens is done! Go and check it out!
-
Advanced HTML for Squidoo
-
The techniques shown here aren't much more advanced then what's in the Basic HTML tutorial. The code being used isn't any more special. But the results and presentation can appear to be more sophisticated. Hence it being the Advanced HTML tutorial. F...
-
Squidoo vs Hubpages
-
If you're a Lensmaster you may have heard of HubPages. What is it? How does it work? Can I make money? How do they pay? This lens is a close look at HubPages, how it works and what's in it for you, looking from the viewpoint of a Lensmaster. HubPages lo...
by N376
Glen likes to write. If it's something that he hasn't already enjoyed or experienced in life if you so much as throw a topic at him and if he finds it...
(more)
