Super Advanced HTML Tips and Tricks to use on Squidoo

Magicality's (whose lenses I found incedentally because of a shared interest in Magic the Gathering ) lens on HTML Tricks shows us to the use of sneaking in style elements either with a <b> (Bold) tag or with the <p> (paragraph) tags along with some basic HTML functionality. N376's lenses on Basic HTML and Advanced HTML covered the basics very well and the advanced HTML elaborated more on the useful things you can do with sneaking in those style elements. All of these lenses are great, but now I wanted to know what else I could do. What if you wanted to have an image as a background, have a link to a specific location within your own lens, or play a song from your lens, all these things you could do if you were creating your own web page on your own web space. Good news for you, you can, well kinda. This lens will show you how.

Disclaimer: Use these HTML Codes sparringly

The folks at Squidoo did a wonderful job making the lens layout clean and efficient. These techniches are meant to be used to highlight certain aspects or give your lens just a little flare. Too much flare is never a good thing.

These basic HTML tags allowed in Squidoo and how to use them were already covered by Magicality and N376, but here's a quick review and what each does:

<strong>

Strong Emphasis, appears bolded

<b>

Makes Text Bold

<em>

Emphasizes Text

<i>

Makes Text Italic

<a>

Desginates HyperLink

<p>

Desginates Paragraph

<br>

Insert text on line below

<img>

Used to insert Images

<ul>

Unordered List (bullited)

<ol>

Ordered List (numbered)

<li>

Needed to start ordered or unordered list

<iframe>

No Longer Supported

<embed>

Embeds an object

You can use a small image repeating like so with text overtop. To use this method you are going to want to find an image and text color that looks good together.

This text has a background image applied with a heighth of 100 Pix, the font color changed to white and bolded text. This is not the best example but it works for now!

And here's the html code for you to plug into most any Squidoo Module for the above results:

<p style="height:100px;background-image:url(http://www.askrandell.com/images/logo-squidoo.jpg); color: white; font-weight: bold;">This text has a background image applied with a heighth of 100 Pix, the font color changed to white and bolded text. This is not the best example but it works for now</p>

Simply replace the image URL and paragraph text with your own!

Or use it to set a border for the top and bottom of your lens module with no text like so:

 

<p style="height:105px;background-image:url(http://www.askrandell.com/images/squidoo-shield.jpg); color: white;"> </p>

For anything discussed on this page in regards to images, animated gifs work, exactly the same way. Animated gifts can make for some neat borders too or can be aligned the same way any non-animated image can be.

Here's the html code for the border along with html codes for aligning animated images on Squidoo.

Borders - like at the top of this module

<p style="height:80px;background-image:url(http://shutupandmakemeasandwichbitch.com/images/animated-fairy-smiley.gif); color: white;"></p>

Aligned Left

<p align="left">Aligned Left<br><img src="http://shutupandmakemeasandwichbitch.com/images/animated-fairy-smiley.gif"></p>

Aligned Center

<p align="Center">Aligned Center<br><img src="http://shutupandmakemeasandwichbitch.com/images/animated-fairy-smiley.gif"></p>

Aligned Right

<p align="Right">Aligned Right<br><img src="http://shutupandmakemeasandwichbitch.com/images/animated-fairy-smiley.gif"></p>

Of course you can use solid colors or solid color patterns as your backgrounds too. I choose a solid orange because, since the Squidoo layout change, I've kinda missed all the orange. I also set the width property to intentionally be larger than the content area, which is 600px, to ensure that the image runs all the way to the side column and used a bolded blue font.

Here's the code for this:



<p style="height:300px; width:625px; background-image:url(http://www.askrandell.com/images/orange.gif); color: blue; font-weight: bold;">All of the text would be here</p>

This background image does not repeat.

Notice I changed font color to display on either background
And the code for that would be

<p style="height:50px;background-image:url(http://www.askrandell.com/images/squidoo-shield.jpg);background-repeat:no-repeat; color: green;">This background image does not repeat. </p>

To re-position it like so

This background image is positioned 100 pixels in from the left.

and that HTML code for Squidoo would be:

<p style="height:50px;background-image:url(http://www.askrandell.com/images/squidoo-shield.jpg);background-repeat:no-repeat;background-position:100px; color: green;">This background image is positioned 100 pixels in from the left. </p>

Let's say you want to link to different sections of your lens or to a specific spot in your lens from another URL. In order to do that you need to know what is called the "A Name" or "Anchor Text" of the section you want to link to. We already know the <A> tag is used for links. Squidoo does not seem to allow for "A Names" to be set, but there is a way around this too.

Luckily the good folks at Squidoo have "A Names" built when you add modules and publish them for each module within your lens. How on earth world you find the "A Name" Squidoo creates?

It's really rather simple.

1. View your lens.


2. Either Right Click on the page and click view source or from the file menu at the top click view and then click source. It will display in notepad


3. Within the notepad file right click and choose find or click Edit from the menu at the top and then click find and type "What's Here" (without quotes)in the search box. Then click find next
   
   You should see something like this
   

   
   <h3>What's here</h3>
   <ul id="toc-preview">
   <li><a href="#module7902664">Expanding on Squidoo HTML</a></li>
   <li><a href="#module7905522">Disclaimer: Use these HTML Codes sparringly</a></li>
   <li><a href="#module7905579">Basics Review</a></li>
   <li><a href="#module7905581">Image as a repeating Background</a></li>
   <li><a href="#module7905582">Image background that does not repeat</a></li>

   
   Those titles should look familiar its what's here.


4. Simply copy the text into your module or customize it to suit your needs.

Like so:

Back to the top

Here's the code

<a href="#module7902664">Back to the top</a>

I just changed the link text but here is the code to #module7902664 which is the "A Name" for "Expanding on Squidoo HTML: or My introduction Module.

So if you want to link to a specific section of your Squidoo lens from another web page you do the same as above but then just add the "A Name" to the end of the link like so.

Check out My Favorite Decks section of my Magic: the Gathering Lens.

And the code is like this

Check out <a href="http://www.squidoo.com/mtgplayers#module7874587"> My Favorite Decks</a> section of my Magic: the Gathering Lens.

If you have other lenses within Squidoo that do not use the standard Squidoo Layout, such as SquidFlix or SquidWho, you might have noticed there is no "What's Here" Section. To link to specific sections of these lenses the method is almost the same as described above. The only difference is that you cannot Search for "What's Here" from the source code. Instead you have to search for the module title. I just created a brand new Squidwho (magic built in less than a minute - no changes yet)on Joey Ramone. I had to use a Squidoowho lens to demonstrate because this a standard lens. I think it is a good idea to add a link to comments section near the top of the lens because comments are usually near the bottom and I want people to comment easily. So please comment of my Joey Ramone Lens (just bare in mind I havn't customized it all yet, but I will soon, so please be kind.)

Now back on topic. I viewed the source as described above and searched for the module title, in this case it was "Shout out", and found

<div class="module" id="module8075149">

Immediatley above it. The ID is what you want to link to so the code above is

<a href="http://www.squidoo.com/joeyramone-rip#module8075149">comment of my Joey Ramone Lens</a>

Simply use the URL of the lens ended with #ModuleID. The # is important and has to be there.

Squidoo states that <embed> is a tag allowed to be used but for some reason it does not work with anything that I have tried. This could be a very useful tool. It would allow all squidoo lensmasters to embed video (other than youtube) or music into a squidoo lens. I think that would be hella cool and would love to see it work but for some reason it does not. :-(

Incedentally, if you want to know how to display the html code on Squidoo without actually having the html code actually executed simply us the following without the spaces:

• &lt ; will display <


• &gt ; will diplay >


• &nbsp ; is good for spaces or empty paragraph lines
  
  

And to get those cool colored backgrounds to ephasize your HTML Code or anything else for that matter simply use the following code:

<p style="background: lightgreen">

<a href="http://www.squidoo.com/htmlsquid">Super Advanced HTML Tips and Tricks for Squidoo</a>

Add the above text to any module of your lens to show your love!

Please

Before Squidoo came out with their engenius Table Generator we used to have to do tables the hard way. I used Magicality's code for tables and modified it for images. This make a really cool header for the Duel Modules. It will make more since if you Check it out

Homer Vs. Randell

 

 

The Stats

Height: 5'9"

Height: 6'

Weight: 260

Weight: 200

# of items sold on ebay: 0

# of items sold on ebay: lots

# of times sold on ebay: lots

# of times sold on ebay: 0

# of Lenses tagged "homer":26

# of Lenses tagged "randell": 3

And of course here's the code, this is just for the images, for both the left and right, the rest is just a repeat (copy, paste) except replace the img tag with text to be displayed, for each row.

this the first box on the left

<p style="float: left; width: 225px; border: solid 1px black; padding: 2px; margin: 0px;"><img src="http://www.askrandell.com/images/me-simpsons-resized.jpg" width="128" height="201" /></p>

this the second box on the right

<p style="float: left; width: 225px; border: solid 1px black; border-left: 0px; padding: 2px; margin: 0px;"><img src="http://www.askrandell.com/images/homer-resized.jpg" width="128" height="201" /></p>