Advanced HTML for Squidoo

You can change the font. Provided that the person viewing your website has the same exact font on their computer. So don't try using anything you've just downloaded or installed. Keep it simple.

Squidoo uses Verdana. Which is quite readable. So there's no need to change it for big slabs of text (unless you're planning on going with a Times New Roman style typeface). The fancier the font the harder it is to read, the more strain it is for the eyes, and the quicker the eyes will fatigue.

Here are a few I'd suggest...

font-family: serif;
font-family: Times;
font-family: Georgia;
font-family: sans-serif;
font-family: Arial;
font-family: Helvetica;
font-family: Impact;
font-family: cursive;
font-family: fantasy;
font-family: monospace;
font-family: Courier;

Copy and paste the one you want and slip it into the formatting code that's mentioned in this module.

Here's a few more that are considered "Web Safe"...

Comic Sans MS
Arial Black
Courier New
Times New Roman
Trebuchet MS

Again, don't go overboard. Don't be silly with it. Unless you've got a background and training in Graphic Design and Typography trying to be clever will only break some hard and fast rules, and you may be turning people off reading your pages.

Used most effectively as if you would highlight words or a sentence with a florescent yellow marker.

If you want to highlight a big slab of text you'll need to nest it in a PARAGRAPH tag, otherwise it will highlight the words, but not the space between each paragraphed row.

Unless of course that that is the effect that you wanted... excuse me while I pad out a few extra lines of text so we can see the effect in action. Is that enough now? No? Okay just a few more words... and... I'm... done.

If you want to use it to highlight just a few words in a sentence you can sneak it in with the bold tag.

To pull off this technique use the instructions in the Basic HTML for Colors.

You'll be slipping this background-color: yellow; into the tag. Choose of course a color to suit. Be aware though that if it's a dark color you'll need to change the color of the text so it can still be readable.

Here's a little something I'm working on after a request from an active SquidU participant. Not sure if it's what she's after but here's a shot at it...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

And here's the code...

Orange
<p style="padding: 5px; background-color: #FCF8C0; border: dotted 2px #FF9900;">TEXT GOES HERE</p>

Blue
<p style="padding: 5px; background-color: #E1E8F2; border: dotted 2px #00518A;">TEXT GOES HERE</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Gray
<p style="padding: 10px; background-color: #F6F6F6; border: 1px dotted navy;">TEXT GOES HERE</p>

This is going to look like a proper mess, but it's so you can see the sizes, and also the differences...

With the font-size: medium; nested in the Bold tag (and remember, bold is then turned 'off').

With the font-size: medium; nested in the Bold tag (with bold left 'on').

With the font-size: large; nested in the Bold tag (and remember, bold is then turned 'off').

With the font-size: large; nested in the Bold tag (with bold left 'on').

With the font-size: x-large; nested in the Bold tag (and remember, bold is then turned 'off').

With the font-size: x-large; nested in the Bold tag (with bold left 'on').

With the font-size: xx-large; nested in the Bold tag (and remember, bold is then turned 'off').

With the font-size: xx-large; nested in the Bold tag (with bold left 'on').

The only time I've used the larger font is to do something special, like highlight a quote. [Example]

As you can see, the paragraph spacing leaves a lot to be desired. I'll be looking into how to fix that with the next update here on Advanced HTML.

Okay, I've figured it out! How exciting is that! And I'm just going to ramble on a bit more so you can see that it actually works. You use line-height: 1em; in the code.

Here's an example of the code...

<b style="font-size: xx-large; font-weight: normal; line-height: 1em;">Sample code</b>

A smaller text size could be used for copyright information, disclaimers, fine print... [Example]

Perhaps you need to add some... fine print to your lens. For what ever reason. Maybe it's copyright information that you want communicated but you don't want it distracting from the content.

This is what you nest inside your Paragraph or Bold tags: font-size: xx-small; (be sure to turn the bold off with a font-weight: normal; otherwise it may get a little messy).

It's easy to add a Strike Through on a selection of text.

Use this inside your Bold tag: text-decoration: line-through;

Use sparingly. I think it is best reserved for comedic effect or some other special reason.

With an iframe you can add a printable coupon!

The iframe can be used to target a page that can be printed by itself. Click on the printer icon to see how it prints just the graphics (this no longer works as the iframe has now been disabled site-wide).

A step-by-step tutorial on how it used to do be done can be found here.

You can capitalize and wrap text around letter quite easily. Best used for making a bold statement, perhaps a quote. Certainly if you wish to republish a chapter from a book, or indeed if you decide to publish your own works of fiction as a lens or a series of lenses. It will add the finishing touch to make it look like a squillion dollars.

This is what you use to pull it off: <b style="FONT-SIZE: 100px; FLOAT: left; COLOR: silver; LINE-HEIGHT: 70px; PADDING-TOP: 2px; FONT-FAMILY: times">Put Letter here</b>and continue the text without a break or space...

Here's a few more that I've been playing with, feel free to change colors, fonts, sizes and whatever else you wish to tweak...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aliquam ut nulla. Duis ac dolor. Vestibulum a justo vitae velit adipiscing mattis. Cras suscipit nisi nec eros. Proin euismod arcu ac urna. Suspendisse ipsum elit, tempor quis, laoreet eget, aliquam eu, mi. Quisque id urna a nunc lobortis tincidunt. Suspendisse fermentum. Nulla facilisi. Nullam non felis. Proin quam. Fusce risus sem, gravida eu, gravida ac, faucibus a, arcu. Aliquam rhoncus nisi eget orci. Fusce ut felis sit amet justo dapibus elementum. Quisque congue risus et lorem. Sed et ante. Pellentesque et massa vitae turpis varius venenatis. Cras imperdiet suscipit augue.

<b style="font-size: 35px; font-family: Georgia, Palatino; float: left; margin-right: 4px; line-height: 1em; color: #FFFFFF; background: #CC3300; padding: 0 5px; font-weight: normal;">L</b>orem ipsum, et cetera, et cetera...

Donec erat erat, fringilla vel, aliquet ut, elementum nec, ante. Nunc pulvinar, erat quis aliquet tincidunt, tellus justo pretium nulla, ac dictum nunc purus nec felis. Maecenas urna nisl, vehicula a, cursus nec, cursus non, purus. Fusce ultrices nulla. Etiam vitae dui. Donec urna urna, viverra et, ultrices vitae, convallis et, mi. Phasellus et est. Fusce id dolor. Nulla posuere ipsum ac risus. Donec adipiscing molestie massa. Donec pellentesque, massa nec ornare vestibulum, felis elit pretium odio, eget semper libero nunc vel pede. Donec felis. In porttitor, libero sed vestibulum condimentum, diam velit consectetuer sapien, id luctus magna est ac sapien. Duis viverra. Aliquam lacinia elit at ipsum. Nulla scelerisque dui nec risus. Aenean lobortis arcu id magna. In hac habitasse platea dictumst. Suspendisse a leo. Cras adipiscing risus ac felis.

<b style="font-size: 40px; font-family: Georgia, Palatino; float: left; margin-right: 4px; line-height: 1em; color: #FFFFFF; background: green; padding: 0 5px;">D</b>onec erat erat, et cetera, et cetera...

Proin quis velit. Vivamus nulla ipsum, dignissim et, condimentum et, consectetuer ac, neque. Pellentesque aliquet. Maecenas dolor. Nulla quis mauris quis pede mattis facilisis. Ut nunc. Pellentesque enim nunc, rhoncus sed, cursus vel, molestie sit amet, mauris. Proin tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec sit amet sapien. Quisque imperdiet. Aliquam erat volutpat. Aliquam ultrices

<b style="FONT-SIZE: 100px; FLOAT: left; COLOR: silver; LINE-HEIGHT: 70px; PADDING-TOP: 2px; FONT-FAMILY: times; border-bottom: medium; border-left: medium; border-right: medium; border-top: medium; border-style: groove; margin-right: 4px; padding-bottom: 6px; padding-left: 4px; padding-right: 4px;">P</b>roin quis velit. et cetera, et cetera...

Phasellus elementum turpis sed elit. Sed nonummy, augue in cursus mollis, nibh neque dictum elit, eget gravida metus est rutrum ligula. Morbi a turpis. Cras nec arcu nec ante convallis scelerisque. Ut in libero quis sem facilisis posuere. Pellentesque quam. Fusce id enim. Phasellus feugiat tristique sem. Morbi porttitor luctus enim. Donec mattis. Fusce quam nunc, porttitor non, condimentum in, consectetuer vitae, lectus. Sed non magna id pede lobortis pulvinar. Integer ornare tellus quis diam tincidunt aliquet. In id nisl et erat cursus dapibus. Duis at eros at massa aliquam euismod.

<b style="FONT-SIZE: 100px; FLOAT: left; background: silver; color: white; LINE-HEIGHT: 70px; PADDING-TOP: 2px; FONT-FAMILY: times; border-bottom: medium; border-left: medium; border-right: medium; border-top: medium; border-style: inset; margin-right: 4px; padding-bottom: 6px; padding-left: 4px; padding-right: 4px;">P</b>hasellus elementum turpis sed elit. et cetera, et cetera...

Suspendisse fringilla lectus quis magna. Nulla tristique turpis at est. Pellentesque nec justo. Maecenas auctor pede at sem. Nulla auctor euismod nulla. Fusce eu ligula. Aliquam erat volutpat. Morbi vestibulum. Nunc cursus. Vivamus suscipit, felis ut pulvinar aliquet, neque velit convallis diam, ac sodales pede odio non quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur sit amet sapien. Mauris consequat diam non dolor. Duis et ligula et justo tincidunt placerat. Praesent nisi nibh, pretium ut, varius eu, rutrum non, nisi. Morbi posuere placerat purus. Suspendisse potenti.

<b style="FONT-SIZE: 100px; FLOAT: left; background: #EBEBEB; color: gold; LINE-HEIGHT: 70px; PADDING-TOP: 2px; FONT-FAMILY: times; border-bottom: medium; border-left: medium; border-right: medium; border-top: medium; border-style: ridge; margin-right: 4px; padding-bottom: 6px; padding-left: 4px; padding-right: 4px;">S</b>uspendisse fringilla lectus quis magna. et cetera, et cetera...

You can slip a 'title' into your hyperlinks so when people hover over the top they see a little message telling them where they're going or what to expect.

What are the benefits for doing such a thing?

First, as demonstrated above, you can provide valuable information to your visitors with descriptive link titles and descriptive text about other page elements. Think of it as an enhanced browsing experience.

Also there are many search engine ranking algorithms read the text in TITLE attributes as regular page content. Therefore you can increase your page's keyword density score and relevancy for your targeted keywords.

All you have to do is add title="your text here" in the nested tags of your hyperlink, just after the URL will do.

You can also add the Title Attribute to text that isn't a hyperlink. You can figure out why you'd do such a thing for yourself. It's a good idea though to add a bit of decoration to it so 1) people will know it's there and 2) make it subtly different so they don't mistake it for being a real hyperplink. eg:

Adding extra instructions using the Title Attribute is a clever way to give additional information.

And of course, here's the code!
<b style="border-bottom-style: dashed; font-weight: normal; cursor: help; border-bottom-width: thin; border-bottom-color: Green;" title="put your description here">put your text here</b>

You'll notice I gave it a bottom border, which enabled me to make it dashed. I made the width thin because quite frankly the default was far too thick. I added the question-mark cursor as an extra means of communicating that it's not a link to click on. There are other things a person can do to change the formatting but I'll leave it to the more adventurous to go out and figure that out for themselves.

You may have a lens about... the latest Harry Potter novel, and you've read it, perhaps half your visitors have read it, but the other half?

You may not wish to discuss or reveal some important twists and turns (or fatalities) within the book that would otherwise ruin the experience for those not yet in the possession of it, or have just started reading the latest release.

But you'd also like express an opinion or two that involves such plot twists. What to do?

Hide the spoiler information with HTML!

And you can let people know by saying something like this...

CAUTION: Spoiler warning. Use your mouse and click and drag over the block of gray to reveal the spoiler.

In here you can write ANYTHING AT ALL and not spoil it for those not yet lucky enough to have received the book because they ordered it online and the seller obviously thought a slow boat from China would be the best way for delivery

And here's the code to do it...

<p style="color: gray; background-color: gray;">Put your spoiler content here</p>

You could also use the Title Attribute (see module above) for slipping in some spoilers (Mouse Over for Spoiler Text).

Like a mad scientist I've been working at different HTML tricks and techniques that will specifically work within the Squidoo environment.

I'm working on a way to QUOTE text and have some spiffy looking quotation marks that rely solely on text (no images) with it wrapping the quoted text around the larger text quotation marks. The tricky bit is getting the back end quotation marks to play nicely too. Getting it to indent is a bonus too. So far it's a work in progress.

But I do have this one that is working...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Here's the code...

<b style="float: left; font-weight: normal; font: 14px/22px normal helvetica, sans-serif; margin-top: 10px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #ccc;">PUT YOUR TEXT IN HERE!!!</b>

Lensmaster Asiacue has a very interesting way of quoting people in this lens.

Using List tags they've pulled off a nice effect. It indents nicely. There's a subtle use of grays for backgrounds and borders, though I'm sure a person could find other complementary and tasteful colors to enhance the look. Or if maybe even go for something distracting and disturbing if you're so inclined.

Asiacue used a 1 pixel for the dotted border. Here I'm demonstrating it with a 2 pixel wide dotted border so it's easier to see.

• Add your information here.


• Add your information here.


• Add your information here.

Here's the code...

<ul style="list-style-type:none; font-style: italic;">
<li style="font-size: x-small; background-color: #EEEEEE; border: dotted 2px #CCCCCC;">Add your information here.</li>
<li style="font-size: x-small; background-color: #EEEEEE; border: dotted 2px #CCCCCC;">Add your information here.</li>
<li style="font-size: x-small; background-color: #EEEEEE; border: dotted 2px #CCCCCC;">Add your information here.</li>
</ul>

Here's the code if you just want to use it as a one off...

<ul style="list-style-type:none; font-style: italic;">
<li style="font-size: x-small; background-color: #EEEEEE; border: dotted 2px #CCCCCC;">Add your information here.</li>
</ul>

You can substitute dotted with the following solid, dashed, double, groove, ridge, inset or outset for different border styles.

This works well with the layout and colors that are used in the SquidWho template...

"I had the right to remain silent... but I didn't have the ability."

Here's the code...

<b style="color:#1F94BF; line-height: 1em; font-size:35px; font-family:'courier new'; text-align:left; padding:10px 10px;">&ldquo;PUT YOUR QUOTE IN HERE&rdquo;</b>

The &ldquo; and &rdquo; gives you nice left and right "quotation" marks which for some reason don't work in the Text/Write Module but they do work in the Amazon Module.

So it makes for an interesting way to grab peoples attention to a quote from a DVD or book that you've got in your lens.

See an example of it here.

It's good for quoting an excerpt from a body of text. It draws attention yet also adds a classy design element to the page.

Here's a screenshot of what it looks like...



You can see it in use here.

I am unable to give a blow by blow description on how to customize this code on an individual basis, but I will give the code as is, and for the adventurous among you, you can tweak it to suit...

<p style="float:right;width:220px;margin-top:5px;margin-bottom:15px;margin-left:10px;padding-bottom:10px;font-family:Arial, Helvetica, Georgia;font-size: 28px;line-height:24px; color:#FF6600; text-align: right;"><b style="color:gold;">"As adults, we are</b> discriminated<b> against.</b>As adults, we are an<b style="color:orange"> oppressed majority</b> because nobody writes us fairy tales.<b style="color:gold;">I think the problem</b> is not that we grow out of fairy tales.<b> The problem is nobody</b> writes us fairy tales; <b style="color:gold;">nobody gives us fairy tales</b> that are as satisfying,<b> as meaty, as filled with real</b> people and real incident, <b>as the things that we</b> remember from when<b style="color:orange;"> we were children"</b></p>

Testing testing one two three

What is Superscript and Subscript?

A subscript or superscript is a number, figure, symbol, or indicator that appears smaller than the normal line of type and is set slightly below or above it - subscripts appear below the baseline, while superscripts are above. Subscripts and superscripts are typically used in formulas, mathematical expressions, and descriptions of chemical compounds or isotopes, but have many other uses as well. (Source)

x3

x3

And here is the code...

x<b style="font-weight: normal; vertical-align: super; font-size: 7pt;">3</b>

x<b style="font-weight: normal; vertical-align: sub; font-size: 7pt;">3</b>

You can of course change the point (pt) size to whatever you feel works best.

In typography, small caps (short for small capitals) are uppercase (capital) characters that are printed in a smaller size than normal uppercase characters of the same font. Typically, the height of a small capital will be one ex, the same height as most lowercase characters in the font; classically, small caps were very slightly taller than x-height. (Source)

Small caps are often used for text that is all uppercase; this makes the run of capital letters seem less jarring to the reader. For example, the style of many American publications, including the Atlantic Monthly and USA Today, is to use small caps for acronyms and initialisms longer than three letters

Small caps are commonly used for showing keyboard shortcuts; for example, "The keyboard shortcut in Microsoft Word for small caps is Ctrl + Shift + K".

Here is the code...

<b style="font-weight: normal; font-variant: small-caps;">Ctrl + Shift + K</b>

I wasn't a fan of maths when I was at school. But I know we have some teachers here using Squidoo who are making the subject of mathematics more interesting and easier to understand.

And for them I have put together this module.

multiplication → &times; → ×
division → &divide; → ÷
fraction 1/4 → &frac14; → ¼
fraction 1/2 → &frac12; → ½
fraction 3/4 → &frac34; → ¾
for all → &#8704; → ∀
part → &#8706; → ∂
exists → &#8707; → ∃
empty → &#8709; → ∅
nabla → &#8711; → ∇
isin → &#8712; → ∈
notin → &#8713; → ∉
ni → &#8715; → ∋
prod → &#8719; → ∏
sum → &#8721; → ∑
minus → &#8722; → −
lowast → &#8727; → ∗
square root → &#8730; → √
proportional to → &#8733; → ∝
infinity → &#8734; → ∞
angle → &#8736; → ∠
and → &#8743; → ∧
or → &#8744; → ∨
cap → &#8745; → ∩
cup → &#8746; → ∪
integral → &#8747; → ∫
therefore → &#8756; → ∴
simular to → &#8764; → ∼
approximately equal &#8594; ≅
almost equal → &#8776; → ≈
not equal → &#8800; → ≠
equivalent → &#8801; → ≡
less or equal → &#8804; → ≤
greater or equal → &#8805; → ≥
subset of → &#8834; → ⊂
superset of → &#8835; → ⊃
not subset of → &#8836; → ⊄
subset or equal → &#8838; → ⊆
superset or equal → &#8839; → ⊇
circled plus → &#8853; → ⊕
cirled times → &#8855; → ⊗
perpendicular → &#8869; → ⊥
dot operator → &#8901; → ⋅

At a glance there's not much I think Letter Spacing and Word Spacing is good for. But lets play with it first and then think up some ideas...

Letter Spacing

This is what happens when we make the Letter Spacing -3 pixels

<b style="font-weight: normal; letter-spacing: -3px;">This is what happens when we make the Letter Spacing -3 pixels</b>

This is what happens when we make the Letter Spacing half a centimeter

<b style="color: green; font-weight: normal; letter-spacing: 0.5cm;">This is what happens when we make the Letter Spacing half a centimeter</b>

Word Spacing

This is what happens when we increase the Word Spacing

<b style="color: green; font-weight: normal; word-spacing: 30px;">This is what happens when we increase the Word Spacing</b>

I imagine Word Spacing would be handy if you wanted to hide a spoiler. And to reveal the spoiler a person would have to copy and paste the information to their Word Processor or a text document.

I imagine Word Spacing would be handy if you wanted to hide a spoiler. And to reveal the spoiler a person would have to copy and paste the information to their Word Processor or a text document.

&#9833; = ♩
&#9834; = ♪
&#9835; = ♫
&#9836; = ♬
&#9837; = ♭
&#9838; = ♮
&#9839; = ♯

Move the mouse over the links to see the cursor change...

Auto

Code: <a href="#" style="cursor:auto">Auto</a>

Crosshair

Code: <a href="#" style="cursor:crosshair">Crosshair</a>

Default

Code: <a href="#" style="cursor:default">Default</a>

Pointer

Code: <a href="#" style="cursor:pointer">Pointer</a>

Move

Code: <a href="#" style="cursor:move">Move</a>

e-resize

Code: <a href="#" style="cursor:e-resize">e-resize</a>

ne-resize

Code: <a href="#" style="cursor:ne-resize">ne-resize</a>

nw-resize

Code: <a href="#" style="cursor:nw-resize">nw-resize</a>

n-resize

Code: <a href="#" style="cursor:n-resize">n-resize</a>

se-resize

Code: <a href="#" style="cursor:se-resize">se-resize</a>

sw-resize

Code: <a href="#" style="cursor:sw-resize">sw-resize</a>

s-resize

Code: <a href="#" style="cursor:s-resize">s-resize</a>

w-resize

Code: <a href="#" style="cursor:w-resize">w-resize</a>

text

Code: <a href="#" style="cursor:text">text</a>

wait

Code: <a href="#" style="cursor:wait">wait</a>

help

Code: <a href="#" style="cursor:help">help</a>