Way Cool HTML Effects YOU Can Use!

by 8 people | Log in to rate

Ranked #2,957 in Tech & Geek, #72,069 overall

Welcome to
Mad Mother Mary's
HTML Laboratory!

Spice up your text with drop-caps, pull-quotes, and other tricks used by professional designers to add interest to their web pages!

This lens is my "mad scientist's laboratory"; this is where I plan to test out fancy effects for my own use. If there's a text effect you want to use that doesn't appear here, or if my explanations confuse you, please let me know!

As I also say below: I LOVE Squidoo's text module structure! I love being able to try out a special effect, test it, save it, tweak it, save it — just that one section, as many times as I want, and be able to see almost instantly how that effect is going to look. All hail Squidoo!

And as I also stress below: If you decide to try out any of these special effects in your own lenses, BE SURE to check your work in as many browsers as you can get your mitts on — at a bare minimum, both Internet Explorer and Firefox. (I like Firefox better anyway.) I had this lens ready to go on April 14, as far as Firefox was concerned. It took until April 18 before I could make Internet Explorer behave itself.

A Really Whoa-Whoa Pull-Quote
Multi-Column Formatting
Faking Tables

more...

A Preliminary Note About Measurements

A preliminary note: For specifying text, some designers advise using points, as designers have for centuries ("font-size: 12pt; " — in the “real world,” there are 72 points to the inch). The problem is that points are a unit of measure that is meant for hard-copy, while the Web is almost always viewed on a computer display. On the Web, a lot depends on what sort of computer and what sort of browser originate that display. Apples typically display text fonts at about 25 percent smaller than computers using Windows. In other words, if you specify "font-size: 18pt;", intending text that's a fourth of an inch tall, a websurfer could see 13pt type, 26pt type, or some other unintended outcome. My advice: Use points for your hard-copy specs, but NOT for the Web.

The question comes down to a choice between accessibility and control. Do you want to be certain that your text displays pretty much the same image whether your websurfer is using a high-resolution 27-inch monitor or a fancy telephone? In this case, use pixels as your unit of font-size measurement. Do you care more about the readability of your work? In this case, use ems.

font-size: 14pt;
font-size: 14px;
font-size: 1.4em;

"Pixel" is short for "picture element," and pixels are the measurement of your websurfers' computer monitors. Most Windows machines (about 90 percent of your viewers) are set at 96 pixels per inch (ppi), while most Apples are set at 72ppi. However, what with huge, high-resolution monitors and fancy telephones, PPI can range from 67 to 313.

Remember how 14pt type in Windows displays as 10.5pt on Apples? As with points, if you specify pixels for your font-size, Apple websurfers will see type that's about three-fourths the size that Windows surfers see. The relatively small number of surfers who use other operating systems, such as Linux and Unix, will see font-sizes that can be extremely jagged and hard to read. . . . The good part of using pixels is that they're the standard unit of measure for screens and monitors, so that the image on your surfers' screens will be closer to the image you intend them to see.

An em is the size of a capital M on your websurfer's computer screen, whether it's zoomed way in or zoomed way out, whether the viewer's screen is 27 inches or someone's fancy telephone. Ems are sized in relation to the parent element, which for most Web pages, including Squidoo pages, is the <body> declaration.

The bad part about using ems as your font-size measurement is that you lose a certain measure of control over the exact look of your page. A websurfer who has poor eyesight may have a much larger default font-size than usual; another surfer may have a much smaller default font-size than usual. In either case, your "1.2em" font-size may look really strange.

The good part about using ems is that your text will be accessible to virtually all browsers and platforms — and, except for the extreme cases I just mentioned, it will look pretty good to virtually all browsers and platforms. In addition, if a given websurfer chooses to change his/her default font-size “on the fly,” your text will scale to that new size.

The bottom line: Use pixels in your font-size specifications if you care more about controlling how your lens appears. Use ems if you care more about readability. In either event, be careful about using small fonts, especially serif fonts. If you specify "font-size: xx-small;", Mac users in particular may curse your name!

Drop Caps

You've seen them in magazines. You've seen them in novels. They're called drop-caps, drop-capitals, or dropcaps. Bigger ones are best for the first paragraph of your module. Smaller ones are great to indicate a transition of thought that doesn't need a subhead but that is still more important than a simple new paragraph. (In other words, don't overdo things and use drop-caps for EVERY paragraph!)

Here's how I did it:
<a style"font-size: 5em; line-height: 0.8em; font-weight: 500; color: #006699; padding-top: 4px; padding-right: 10px; padding-bottom: 0px; float: left; " alt="Squidoo blue">Y</a>ou've

The wonderful thing about Squidoo — no, the magnificent thing about Squidoo is its text module feature. You click on "save," and you can see almost instantly what a particular text effect is going to look like. If it needs tweaking (and it almost always will), you just keep editing and tweaking and saving until you get what you want. I saved THIS module dozens of times before I was satisfied with the way it looked!

Here's how I did it:
<b style="float:left; color: white; background-color: #99090C; font-size: 3.7em; font-height: 3.7em; padding:0.1em; padding-top: 0.3em; padding-bottom: 0.3em; margin-top: 0.3em; margin-right: 0.5em; " alt="white on red BG">The wonderful

Other points to remember: Always specify both a font-size AND a line-height for your "mother" paragraph. This module's serif faces are in 1.2em (120%), to make them easier to read. Professional designers recommend a line-height that's at least 120 percent of the font itself, so this module's line-height is 150 percent (1.2 x 1.2 = 1.44, but I wanted a little extra "air" for readability).

Here's how I did it:
<i style="float:left; color: #6C0099; background-color: #EECCFF; font-size: 5em; font-height: 5em; padding:0.1em; padding-top: 0.3em; padding-bottom: 0.3em; margin-top: 0.3em; margin-right: 0.5em; border-width: 8; border-style: outset; border-color: #990099; font-style: normal; " alt="purple with outset">Other points

At first, I was chagrined that Squidoo did not support HTML's . Then another designer pointed out that several inline tags — including <a></a>, the anchor tag; , the older of the two "bold" tags; and , the older of the two "italics" tags — can be used to do the same thing.

(When you use the anchor tag, be sure to specify a font color, or the browser will assume it's an ordinary anchor and print the text in blue. When you use the bold tag, be sure to specify a font-weight, or the browser will make your text bold. When you use the italics tag, be sure to specify "font-style: normal;" if you don't want your text in italics.)

I would recommend using the "bold" tag () for anything longer than a few characters, just because strange things happen when the viewer's cursor passes over anchored text. You could probably "fix" it with fancy uses of "onover," but why go to all that trouble?

There is one other way to work around Squidoo's refusal to accept , and it may be the easiest yet. (I just discovered it a moment ago!) Every property in HTML is (a) a list-item (<li></li>); (b) an inline element, like boldface, italics, or anchors; or (c) a block element, like paragraphs, tables, or headers.

My Favourite CSS Tricks on Squidoo is an excellent lens. In it, the fluffanutta points out that it's easy to turn an inline element into a block element; all you have to do is add "display: block; " to your style declaration. The fluffanutta recommends this for do-it-yourself tables of contents; you can probably think of other uses.

It works the other way, too: all you have to do to make a paragraph act like an inline element is to add "display: inline;" to your style declaration. Presto! You have an instant substitute for that Squidoo will accept.

Always, always, always check your work in every browser you can, especially Internet Explorer and Firefox. What looks terrific in one browser will frequently look terrible in another!

Pull-Quotes

In editorial jargon, a “pull-quote” is a quotation that is “pulled” out of a given text. The idea is to illustrate or emphasize the main gist of the text. Pull-quotes are an excellent way to add “punch,” especially if your text is difficult to illustrate with photos or artwork. A good pull-quote will draw the reader's attention AND give you the opportunity to show off your skill as a designer. A well-selected, well-displayed pull-quote adds visual excitement, holds your reader's interest, and even increases comprehension!

Choose Your Pull-Quote Wisely
The quote you select should be thought-provoking and (relative to its surroundings) brief.

“Love is our true destiny. The meaning of our life is a secret that has to be revealed to us in love. We do not find the meaning of life by ourselves alone — we find it with another. We do not discover the secret of our lives merely by study and calculation in our own isolated meditations. The meaning of our life is a secret that has to be revealed to us in love, by the one we love. And if this love is unreal, the secret will not be found, the meaning will never reveal itself, the message will never be decoded. At best, we will receive a scrambled and partial message, one that will deceive and confuse us. We will never be fully real until we let ourselves fall in love — either with another human person or with God.”
— Thomas Merton, Love and Living

Here's how I did it:
“First few words <i style="float: right; padding: 1em; margin: 0.5em; margin-right: 0em; margin-left: 1em; margin-top: 1em; font-family: 'Zapf Calligraphic', Palatino, serif; font-size: 1.6em; line-height: 1.1em; width: 30%; color: #663300; background-color: #FFE4C4; border-top: 8px double maroon; border-bottom: 8px double maroon; text-align:center; ">Pull-quote. remainder of paragraph.

Think Contrast and Emphasis
Remember, a pull-quote is a substitute for artwork, so it should offer a strong contrast to the "look" of your body text. The body of a pull-quote should appear in a larger point-size than your body text, and possibly in a different font-family and/or font-color.

“The question is not how we are to contact the world, but how we are to make that contact honest, significant, and worthwhile. ”

“We must begin by frankly admitting that the first place in which to go looking for the world is not outside us but in ourselves. We are the world. In the deepest ground of our being we remain in metaphysical contact with the whole of that creation in which we are only small parts. Through our senses and our minds, our loves, needs, and desires, we are implicated, without possibility of evasion, in this world of matter and of men, of things and of persons, which not only affect us and change our lives but are also affected and changed by us. . . . The question, then, is not to speculate about how we are to contact the world — as if we were somehow in outer space — but how to validate our relationship, give it a fully honest and human significance, and make it truly productive and worthwhile for our world.”
— Thomas Merton, Love and Living

Here's how I did it:

<b style="float: right; font-family: Georgia, 'Zapf Calligraphic', Palatino, 'Times New Roman', Times, serif; font-weight: 600; padding: 1.1em; padding-top: 0.5em; padding-bottom: 0; margin: 0.5em; margin-right: 1em; margin-left: 0.7em; margin-top: 2em; font-size: 1.6em; line-height: 1.5em; width: 44%; color: #016277; background-color: #00FFFF; text-align: center; "> “The pull-quote. ”The "mother" paragraph.

Choose Position(s)
Play around with where a pull-quote appears in your text. It could be above or below the body-text it was pulled out of, or "floated" inside, to the right or left.

“Only when we see ourselves in our true human context, as members of a race which is intended to be one organism and ‘one body,’ will we begin to understand the positive importance not only of the successes but of the failures and accidents Only when we see ourselves in context will we begin to understand our importance to the world around us. in our lives. My successes are not my own. The way to them was prepared by others. The fruit of my labors is not my own: for I am preparing the way for the achievements of another. Nor are my failures my own. They may spring from failure of another, but they are also compensated for by another's achievement. Therefore the meaning of my life is not to be looked for merely in the sum total of my own achievements. It is seen only in the complete integration of my achievements and failures with the achievements and failures of my own generation, and society, and time.”
— Thomas Merton, No Man Is an Island

Here's how I did it:
First few lines of text.<i style="float: left; font-family: 'Lucida Sans', Verdana, sans-serif; padding: 1em; margin: 0.5em; margin-left: 0em; margin-right: 0.7em; font-size: 1.4em; line-height: 1.1em; width: 44%; color: yellow; background-color: #9C0000; text-align: center; ">Pull-quote remainder of paragraph.

Some caveats: Be sure not to overuse pull-quotes. One or two per text module is more than enough. And for goodness sakes, do NOT mix pull-quote styles in the same module, as I have done here. Cake makes a nice dessert, but you don't want a banquet that consists of appetizer, cake, salad, brownies, entrée, fruitcake, cookies, and torte! You are allowed to vary colors and even display faces, provided that you vary only one, color OR face. More is aesthetically displeasing.

A Really Whoa-Whoa Pull-Quote

The idea for this kind of pull-quote comes from the brilliant Glen N376, in Advanced HTML for Squidoo. Thanks, Glen!

Evolution is a fact,
a law of nature. It's the theory of natural selection that “Jesus-olaters” cannot accept.

“Evolution is a fact amply demonstrated by the fossil record and by contemporary molecular biology. Natural selection is a successful theory devised to explain the fact of evolution.” Carl Sagan, The Dragons of Eden, 1986. . . . . “There is so much similarity in the biochemical workings of all organisms, not only if we compare humans and monkeys, but if we compare humans and bacteria, that if it weren't for preconceived notions and species-centered conceit, the fact of evolution would be considered self-evident.” Isaac Asimov, Of Matters Great and Small, 1976. . . . . “Evolution is a law of nature as compelling as gravitation. The evidence for it is as plain as the falling apple. Nobody who knows the process of DNA can doubt the theory of evolution.” Arthur Kornberg, Nobel laureate, 1981. . . . . “As new species evolved, nature didn't throw away old parts of the brain. Rather, new systems were added. Everyone has a fish brain deep inside. Outside the fish brain there is a reptile brain, depressingly similar to the way it would look in a lizard. Wrapped around the reptilian brain there is a mammalian brain, and then, finally, the cerebral cortex in such animals as monkeys and human beings.” Donald Pfaff, Rockefeller University, 1981. [Imagine a multi-layered Tootsie Pop; that's a homo sapiens brain.] . . . . “Evolution on an ancient Earth is as well established as our planet's shape and position. Our continuing struggle to understand how evolution happens (the ‘theory of evolution’) does not cast our documentation of its occurrence — the ‘fact of evolution’ — into doubt. ” Stephen Jay Gould, 1987.

I think this pull-quote is super-impressive! Points to remember: You'll need a "mother" paragraph that's long enough to support your pull-quote; and if you don't pull your quote directly out of your paragraph, it must have some relevance to the text it is illustrating. And finally: this is such a whoop-te-do impressive pull-quote that you should reserve it for whoop-te-do occasions. Use it to adorn your Gettysburgh Address — not your grocery shopping list.

Here's how I did it:
<p style="font-family: Impact, Arial black, fantasy; font-size: 2.7em; line-height: 1.1em; float: right; margin: 0.5em; margin-top: 0em; margin-right: 0em; color: #006699; width: 25%; text-align: right; ">Evolution is a fact, a law of nature.It's the theory of natural selection that “Jesus-olaters” cannot accept.“Evolution is a fact, etc.

Multi-Column Formatting

Every now and then, you may want to display a section with your text in two columns. After all, professional designers have determined that an alphabet-and-a-half is the optimum column width, about 39 characters or five to six words on average. You might even want to live it up for some reason and have THREE columns!

“And God showed me more, a little thing, the size of a hazelnut, on the palm of my hand, round like a ball. I looked at it thoughtfully and wondered, ‘What is this?’ And the answer came, ‘It is all that is made.’ I marvelled that it continued to exist and did not suddenly disintegrate; it was so small. And again my mind supplied the answer, ‘It exists, both now and forever, because God loves it.’ In short, everything owes its existence to the love of

God. In this ‘little thing’ I saw three truths. The first is that God made it; the second is that God loves it; and the third is that God sustains it. But what God is who is in truth Maker, Keeper, and Lover, I cannot tell, for until I am essentially united with God I can never have full rest or real happiness.”

— Dame Julian of Norwich,
Revelations of Divine Love

Here's how I did it:
Left column text here.Right column text here.

grate; it was so small. And again my mind supplied the answer, ‘It exists, both now and forever, because God loves it.’ In short, everything owes its existence to the love of God. In this ‘little thing’ I saw three truths. The first is that God made it; the second is that God loves it; and the

third is that God sustains it. But what God is who is in truth Maker, Keeper, and Lover, I cannot tell, for until I am essentially united with God I can never have full rest or real happiness.”

— Dame Julian of Norwich,
Revelations of Divine Love

Here's how I did it:
Left column text here.Middle column text here.Right column text here.

Notes: Remember to leave enough space between your columns, but not too much. For two-column formatting, I used a column width of 48 percent, with a margin of two percent. For three-column formatting, I used a column width of 31 percent, again with margins of two percent.

When you're using the full column, where word breaks come is not usually a big deal. With narrower column widths, it can be. Remember that the "soft hyphen" () is available to you. For example, suppose that for some inscrutable reason you want to use the word "floccinaucinihilipilification." What you type into your module above the "save / cancel" buttons would look like this:

floccinaucinihilipilification

Make sure that you don't put a hard carriage return (new line) between the paragraphs that are your columns, or your columns will be staggered.

Last, and possibly most important: Remember to follow your columns with before you include any more text. You've confused your websurfer's browser enough as it is! For the first dozen or so iterations of this module, I didn't know this important advice, and my results were not pretty.

Faking Tables

The bad news is that Squidoo does not support the <table></table> declaration. The good news is, there are ways to work around this limitation. The bad news is, because Squidoo does not support CSS, every “table” is a character-hog. If you visit my lens "How to Use HTML's Special Characters," you will see that a table with three columns, each with its own background-color, is so “character-expensive” you will only be able to squeeze in about 15 rows before your 10,000 characters are used up. (A table with five columns I found to be so “expensive” that I had to jettison background colors completely just to squeeze in 13 rows!)

If you don't want to go to the trouble of doing it yourself, the Squidoo Table Generator is the perfect answer. Another great source of help is
Advanced CSS: Layout Tricks and Lab Experiments, by the redoubtable Greekgeek (Ellen Brundige). Thanks, Greekgeek!

. . . Ah, I see you've decided to read on! First, decide how many columns you want and whether you want borders around each table's "cells." Borders add to a table's readability, but they "eat" character space, as do background colors.

The lenses I have found in my research advise you to use pixels as your horizontal measure. A Squidoo module is about 590 pixels wide, depending on whether the lens has been expanded. I would advise using percentages rather than pixels, particularly if you want to vary your column widths and you don't enjoy playing with your pocket calculator. (If you still prefer to use pixels, check out my section "Comments and Horizontal Rules," below, for advice on how to make a hidden-from-your-visitors "Comment" with notes like, "one-fifth of a column plus a 1px-border is 116 pixels.")

Earlier, I talked about the "tweak, save, tweak" technique. When you're faking a table, you'll do this a LOT. Here is the process I used for a sample table with one title and two columns:

Web-Safe Type Faces

Serif

Sans-Serif

Verdana

Bookman Old Style

Century Gothic

Palatino / Zapf Calligraphic

Well, that certainly looks terrible! For your first try, you're not certain how wide you want your column widths to be. Notice that it's too soon to be monkeying around with "frills" like background colors. What you're looking for is a width for your widest cell, which appears to be the Palatino / Zapf Calligraphic cell. Now let's try tweaking it some more:

Web-Safe Type Faces

Serif

Sans-Serif

Verdana

Bookman Old Style

Century Gothic

Palatino / Zapf Calligraphic

Well, that's interesting! 30% plus 30% ought to equal 60%, but for some reason I don't understand, the title row is way too narrow. I ran out of space in this module before I got my table “tweaked” to where I liked it — it took sixteen (!) more iterations before I was happy with this:

Web-Safe Type Faces

Serif

Sans-Serif

Verdana

Georgia

Century Gothic

Century Schoolbook

Tahoma

Rockwell

Lucida Sans

Lucida Bright

Arial

Bookman Old Style

Here's how I did it:
<p style="font-family: Verdana, sans-serif; text-align: center; margin-bottom: 0em; padding: 0.5em; background-color: #006699; color: white; font-weight: 900; width: 62%; border: 3px solid #FF9900; margin-left: 15%; ">Web-Safe Type Faces<p style="font-family: Verdana, sans-serif; font-weight: 900; color: #006699; float: left; text-align: center; margin-bottom: 0em; padding: 0.5em; border: 1pt solid #FF9900; width: 30%; margin-left: 15%; background-color: #FFE8C5; ">Serif<p style="font-family: Verdana, sans-serif; font-weight: 900; color: #006699; float: left; text-align: center; margin-bottom: 0em; padding: 0.5em; border: 1pt solid #FF9900; width: 30%; background-color: #FFE8C5; ">Sans-Serif
VerdanaGeorgia

Comments and Horizontal Rules

HTML offers web designers a way to make comments to themselves that are hidden from websurfers — for example, ""

Alas, as I discovered my very first day, Squidoo does not support the "comment" feature. But fear not, I have discovered a work-around; in fact, I've thought of a couple of ways to do it.

The first way involves adding an invisible inline element to the end of any paragraph. Here is the HTML for the comment at the end of THIS paragraph:Hello.

paragraph:This is a comment meant for my eyes only.

HTML offers an option called "horizontal rule" (<hr>) that allows you to draw a line of any length you wish across the page. While Squidoo does not support <hr>, this is an easy problem to work around:

God forgive the leaders of the Taoist Tai Chi Society for their arrogance, their intolerance, and their fascism.

While there's no law that says you have to say anything in your HR paragraph, this is another way for you to add a comment that only you (and web spiders) will be able to see. Here is the coding for my fake "horizontal rule":

around:Say anything (or nothing) here!

I tried several ways of centering the paragraph, none of which worked. If you don't want your "horizontal rule" to extend across the entire width of your text column ("width: 100%; "), first decide how wide you want it to be (for example, 25%), then subtract that width from 100 and add half the remainder to your left margin ("width: 25%; margin-left: 37.5%; ").

For reasons I fail to understand, you can't achieve the right effect in Internet Explorer by using "background-color" and "line-height"; no matter what you specify, your line will default to a height of one em. If you want a thinner line, you have to use "border-top" or "border-bottom."

Here's another way to fake a horizontal rule:

God forgive the evil Maoist authoritarians who have taken over the Taoist Tai Chi Society.

rule:Say anything (or nothing) here!

Squidoo and Colors

Squidoo's two official colors are blue (006699) and orange (FF9900), depending on what category the lens falls into:

006699FF9900

There are 16 colors that all major browsers recognize. Some of these are obvious (black, white, gray, silver), and some of them I think are ugly (olive, ugh!) or clash with the official Squidoo colors. These are the named colors that I like with Squidoo's colors:

006699FF9900

fuchsia

maroon

red

green

aqua

teal

blue

navy

purple

There are also 256 colors available to you using hexadecimals. Following are some of my favorites for use with Squidoo:

006699FF9900

663300

099990

6C0099

066660

99090C

FF6699

008080

A52A2A

2E8B57

8B4513

FFF5EE

FFFFF0

F0FFF0

F0FFFF

FFE4C4

00FFFF

40E0D0

00DFFF

00FF99

FFFFC9

FFDDDD

EE82EE

BBE9FF

An excellent resource for using color in your lens is HTML Tips for Color, by the amazing Glen N376. Gene provides every color you can think of, and then a few; I think his page is excellent, and I visit it often.

It's important that you check your work on as many different computers as you can. What looks beautiful on your computer at home may look terrible on the computer at the public library. (What looks beautiful on THIS computer looks washed-out on my laptop!)

Squidoo and the "Name" Anchor Tag

The anchor tag (<a></a>) is is used to navigate between and within web pages. Most commonly it is used to set up a link between one document and another, for example, <a href = "http://squidoo.com/YourLens">.

And, as we have discovered, the anchor tag can be used as a substitute for the tag, for brief snippets of text. (Once again I suggest that you NOT use the anchor tag to format more than a few characters, since a visitor's mouse might create an experience that startles and mystifies your visitor.)

The anchor tag can also be used for navigating inside a document. Say for example there's a long lens that you visit frequently, but the section you're interested in comes about three-fourths of the way to the bitter end. You could type "http://www.squidoo.com/YourLens" into the "go to" line of your browser and then use the slide to go to where you want to. OR, you could type "http://www.squidoo.com/YourLens#anchor-name" (the first time, before you bookmark it) and go to that point directly.

This also works inside a document; you would specify <a href="#anchor-name">text</a> as your link.

For non-Squidoo pages, the way to set an anchor name is: <a name = "anchor-name">, placed a line or two above where you want to go. On non-Squidoo pages, you can name your anchor anything you want.

Here's the bad news: Squidoo will not allow you to specify your own text anchors. But the good news is, Squidoo creates text anchors FOR you, automatically! It's a little difficult to find them, but it's doable.

Suppose that "How to Use HTML's Special Characters" is your favorite lens in the whole wide world. But your favorite section, "Weird Characters," comes near the end. In Internet Explorer, click on "Page - View Source," or in Firefox, "View - Page Source." (In some third kind of browser, do you suppose it's "Source - Page View"?)

Scroll down until you reach the list that constitutes the lens's table of contents. It will look like this:

<ol>
<li><a href="#module21166972">Markup-Related Special Characters</a></li>
<li><a href="#module21166982">Standard Letter Variations</a></li>
<li><a href="#module21196122">Punctuation</a></li>
<li><a href="#module21196132">Math & Science Symbols - Part 1</a></li>
<li><a href="#module21445192">Math & Science Symbols - Part 2</a></li>
<li><a href="#module21445452">Math & Science Symbols - Part 3</a></li>
<li><a href="#module21445462">Logic Symbols</a></li>
<li><a href="#module21196142">Greek Alphabet - First Half</a></li>
</ol><ol start="9"><li><a href="#module21421972">Greek Alphabet - Second Half</a></li>
<li><a href="#module21196152">Special Spaces</a></li>
<li><a href="#module21196162">Occasionally Useful Characters</a></li>
<li><a href="#module21196172">Weird Characters</a></li>
<li><a href="#module21196182">Great Products from Cafe Press!</a></li>
<li><a href="#module21166992">Extremely Smart Samples</a></li>
<li><a href="#module21167002">Featured Lenses</a></li>
<li><a href="#module21167012">Reader Feedback</a></li>
</ol>

(Whether it's an ordered or unordered list appears to depend on whether the lensmaster has opted for a table of contents for the lens.)

Now all you have to do is use what you find! If all you want to do is go directly to "Weird Characters," first type this into your "go to" line: http://www.squidoo.com/HTML-and-Amp-Chars#module21196172. That will take you directly to "Weird Characters."

(Once in a while, you'll enter the address correctly, but Squidoo will take you to a generic search page rather than where you want to go. If this happens, try again, putting a slash (/) before the octothorpe (#). My theory to explain this is that each lens might actually be a subdirectory rather than a web page. Suppose your lens has ten modules in it. The actual address of your lens might be similar to "http://squidoo.com/YourLens/index.html," and your modules would be ten individual documents in the subdirectory.)

Or, suppose you have a long lens that tells the story of your life in ten modules, and you want to navigate easily inside your lens. You might end a late module with something like:

Et cetera.

Many thanks to Randell and "Super Advanced HTML Tricks and Tips to Use on Squidoo" for teaching me this important and useful fact!

Keep It Simple, Squidder!

Remember, just because you CAN do something cool with Squidoo doesn't mean you OUGHT to. Sometimes new lensmasters get carried away with all their options, and their lenses become a riot of colors, typefaces, and confusing text effects.

Don't fall into this trap. People don't like being confused or having to work hard at something that ought to be easy. Your goal is to enhance the wonderful time people are going to have visiting your lens — not to dizzy them.

God forgive the evil, arrogant, Maoist leaders of the Taoist Tai Chi Society.

Questions? Comments?

This lens is my "mad scientist's laboratory," where I play around with the power that Squidoo offers you, so I'll be updating it frequently. If you have a conundrum, let me know what it is, and I'll try to help!

submit

Reply

sukkran sukkran Oct 24, 2009 @ 9:16 pm

this is a very useful page for me like a text book. book marked it and going to use for my future references. thank you very much mary.

Reply

kiwisoutback kiwisoutback Jun 2, 2009 @ 4:10 pm

Excellent job! I've learned a thing or two, and your pull quotes really are an attractive addition to a lens if done correctly. Squid Angel blessed!

Reply

Susan52 Susan52 May 18, 2009 @ 7:23 am

More fascinating information. I'm learning, Mary. Keep up the good work!

Show All

Share this Guestbook
- Stumbleupon
- Facebook
- MySpace
- Twitter
- Digg
- Delicious
- RSS
- Email

Featured Lenses

How to Use HTML's Special Characters

“I would like pie à la mode,” said Renée to her fiancé. “I love your naïveté,” he replied. “In fact, I love you ‘to ∞ and beyond’!” Have you ever wanted to use &#...

Extremely Smart, Progressive T-Shirts and Gifts

If The Big Bang Theory is one of your favorite shows, this Café Press shop is for you! We have hundreds of clever, funny designs to please the brainiacs in your life — including, of course, YOU! Come back often to see what new designs w...

HTML Tips for Color

Color can be applied via HTML tags to fonts, borders and backgrounds. squidoo.com/basichtml and squidoo.com/advancedhtml show how to implement these colors. This lens however isn't going to show how the code is applied, but is a repository for the...

Web-Safe Type Faces

You work hard on a lens. It's beautiful. You chose your favorite typefaces, you placed your artwork just so, and you are justifiably proud of what a unique, gorgeous lens you have made. You send the address to all your friends, but they are strangely...

Super Advanced HTML Tips and Tricks to use on Squidoo

These html tricks for Squidoo are not really that super advanced. But they are super cool! Anyone can do this, Yes, you too! This lens would not be possible if it were not for the groundwork of other lenmasters: specifically, Magicality and N376 so t...

Exciting Gift Items from Cafe Press

One of the busiest shops at Café Press is Extremely Smart T-Shirts and Gifts. Make it your first stop when you're shopping for unique and funny designs for T-shirts, sweatshirts, stickers, buttons, mugs, cards, and other gifts.

Our favorite new design is "Please save Rock Ridge, Sheriff Bart!" Remember the Mel Brooks classic Blazing Saddles? Sheriff Bart was handsome, brilliant, funny, quick-witted, forgiving, and black, and he single-handedly saved Rock Ridge from rapacious corporations and corrupt politicians. President Obama is handsome, brilliant, funny, quick-witted, and forgiving (and black), and it may be that only he will be able to save us from what the Greedy Oil Plutocrats have done to the nation over the last 29 years.

We've just created two new designs to appeal to fans of The Big Bang Theory! Of the two, our favorite is "Rock - Paper - Scissors - Lizard - Spock."

Here's how Sheldon explains this elaboration on the familiar "Rock - Paper - Scissors": "Anecdotal evidence suggests that in a game of 'Rock - Paper - Scissors,' players familiar with each other will tie 75 to 80 percent of the time.... [in the new version,] Scissors cuts Paper. Paper covers Rock. Rock crushes Lizard. Lizard poisons Spock. Spock smashes Scissors. Scissors decapitates Lizard. Lizard eats Paper. Paper disproves Spock. Spock vaporizes Rock. And as it always has, Rock crushes Scissors." ... of course, what Sheldon forgot to mention was that when nerds play the game together, they all insist on choosing Spock, every single time!

Another new design is "I Sheldon Cooper," and the heart-symbol has a brain superimposed on it. Everyone loves Leonard Hofstadter, and everyone knows that Sheldon is a wackadoodle — but you don't have to live with him, or even interact with him, thank goodness!

Both of these designs come on a wide range of T-shirts, sweatshirts, tote bags, stickers, cards, and similar goodies, and both would make great gifts. Even though it was well into March, I bought myself a 2009 calendar for "Rock - Paper - Scissors - Lizard - Spock," just because it makes me laugh!

Be sure to visit Extremely Smart Gifts to see these and hundreds of similar unique and clever designs!

Great Stuff on CafePress

The Extremely Smart shop at Café Press offers hundreds of unique, funny designs that can be displayed on literally thousands of gifts, for yourself or your friends. Here are a few samples.

Sheriff Bart Sticker (Rectangle 10 pk)

From: Extremely Smart, Progressive T-Shirts & Gifts

"Please save Rock Ridge, Sheriff Bart!" Use this bumper sticker to protest what greed, corruption, and incompetence did to the U.S. economy between Reagan, Bush Sr., and Dubya. (Clinton, a Democrat, reduced the national debt and handed Dubya a budget surplus, no matter what lies the Replutocrats would have you believe today.)

Price: 27.49

And God Said Mousepad

From: Extremely Smart, Progressive T-Shirts & Gifts

Maxwell's equations comprise Faraday's Law, Gauss's Law, the Ampere-Maxwell Law, and Gauss's Law for magnetism. Together, these laws offer a complete description of electric and magnetic fields and their interaction. Maxwell used these equations to show that light is an electromagnetic wave, that the speed of light is not infinite, and that the Aristotelian conception of space-time that had ruled so many scientists for so many centuries was too rigid to be useful. This design begins "And God said," continues with Maxwell's equations, and concludes "and THEN there was light." It's one of our best-sellers.

Price: 12.99

The Word - Sticker (Oval)

From: Extremely Smart, Progressive T-Shirts & Gifts

If you're a fan of "The Colbert Report," you'll love this design: "In the beginning was The Wørd." It comes on a wide range of products, from T-shirts to stickers — even an apron!

Price: 3.99

Stupid Conservatives Mousepad

From: Extremely Smart, Progressive T-Shirts & Gifts

John Stuart Mill said, "Although it is not true that all conservatives are stupid, it is true that most stupid people are conservatives." Conservatives invented the "trickle-down" theory of economics that states that if you give all your money to rich Republicans, the whole nation will be better off. Reagan and Bush/41 followed this principle and between them tripled the national debt. Dubya followed this principle — and we'll be cleaning up Dubya's mess for decades to come. This design comes on a wide variety of products!

Price: 12.99

Amazon.com Can Help Too!

Did you know? Random Facts

MotherMary44

by MotherMary44

Mary W. Matthews is a freelancer whose skills include writing, editing, desktop publishing, and web design. (more)

Explore related pages

My Favourite CSS Tricks on Squidoo: The basic tools provided by Squidoo will do pretty much everything you need to g...
Squidoo CSS - my favorite code to spice up a lens: I've gathered my favorite Squidoo-code for later reference. I'm tired of...
1968 Ford Mustang: The 1968 Mustang fastback gained pop culture status when it was used to great ef...
How to Use HTML's Special Characters: “I would like pie à la mode,” said Renée to her fianc&...
Web-Safe Type Faces: You work hard on a lens. It's beautiful. You chose your favorite typefaces, you...
Advanced HTML for Squidoo: The techniques shown here aren't much more advanced then what's in the Basic HTM...

Squidoo

Way Cool HTML Effects YOU Can Use!

Contents at a Glance

Contents at a Glance

A Preliminary Note About Measurements

Drop Caps

Pull-Quotes

A Really Whoa-Whoa Pull-Quote

Multi-Column Formatting

Faking Tables

Comments and Horizontal Rules

Squidoo and Colors

Squidoo and the "Name" Anchor Tag

Keep It Simple, Squidder!

Questions? Comments?

Featured Lenses

Exciting Gift Items from Cafe Press

Great Stuff on CafePress

Sheriff Bart Sticker (Rectangle 10 pk)

And God Said Mousepad

The Word - Sticker (Oval)

Stupid Conservatives Mousepad

Amazon.com Can Help Too!

HTML, XHTML, and CSS, Sixth Edition

Head First HTML with CSS & XHTML

HTML, XHTML, and CSS All-in-One Desk Reference For Dummies (For Dummies (Computer/Tech))

Did you know? Random Facts

by MotherMary44

Explore related pages

Related Topics

About MotherMary44

MotherMary44's Pages

About Squidoo

Help & Feedback

Support Charity

Fancy meeting you here.

Loading Workshop

Report this Lens

Join Squidoo for free!

Way Cool HTML Effects YOU Can Use!

Contents at a Glance

Contents at a Glance

A Preliminary Note About Measurements

Drop Caps

Pull-Quotes

A Really Whoa-Whoa Pull-Quote

Multi-Column Formatting

Faking Tables

Comments and Horizontal Rules

Squidoo and Colors

Squidoo and the "Name" Anchor Tag

Keep It Simple, Squidder!

Questions? Comments?

Featured Lenses

Exciting Gift Items from Cafe Press

Great Stuff on CafePress

Amazon.com Can Help Too!

Did you know? Random Facts

by MotherMary44

Explore related pages

Related Topics

About MotherMary44

MotherMary44's Pages

About Squidoo

Help & Feedback

Support Charity

Fancy meeting you here.

Loading Workshop

Report this Lens

Login

Join Squidoo for free!