(Chef-Editor’s note: This is the first guest post from our fabulous lensmaster Sojourn, aka Erica Stone.)
I am new to Squidoo (two whole months under my belt) and was easily overwhelmed when I made my first lens. The personal challenge, however, to figure out how this all worked was just too much to resist. I’m nowhere near understanding it all but others who have come before have left their trail of breadcrumbs in the form of very helpful how-to lenses. If you’re at all hesitant, I encourage you to just start. You’ll find plenty of help as you go and you’ll learn a whole lot in the process.
Several years ago, I told my parents a few items I’d like for Christmas. This is an annual ritual as we, sadly, live far apart and this helps them shop more easily. I had on my mind two things – I wanted a program through which I could learn Spanish and and I wanted a book on HTML. The Spanish would come in handy living here in Arizona; the HTML was just for fun as I’ve long been fascinated with the internet and how sites are created.
I received both gifts and within a week I’d devoured the book on HTML, marked it with over 50 post-it tabs, highlighted tips I thought might get lost and started a family web page. I’ve since discovered that there are so many helpful HTML lenses on Squidoo that you won’t need the book or any previous experience to start making your lenses look great. (The program on Spanish? Still unopened on my nightstand. Shhh….let’s not tell my parents.)
What does HTML mean?
HTML stands for hypertext markup language and it’s the code through which you design the look and actions within a web page. Squidoo has made it easy by applying some code and styles already through CSS (Cascading Style Sheets), making it much easier for content writers to focus on content. However, just as verbal communication is highly impacted by body language, written content on the web is also impacted by appearance – the HTML that dresses it up.
Last summer, I managed to catch a show on TV that’s hot in Asia and was trying to replicate its success in the US. In the show, three people stood on the edge of a small pool and a moving wall with the shapes of three people cut out in various poses came at them. The three players had to position themselves in the same pose as their respective cutout in the wall. If they were successful, they made it to the other side and stayed out of the pool. If not – splash! – they were pushed into the pool as their unconforming body part hit the wall.
At one point in the show, one player stood alone at the edge of the pool. Blindfolded (uh oh). His teammates stood to the side and it was their task to describe to the blindfolded player EXACTLY how he needed to position himself in order to survive the wall coming at him.
“Put your right arm out to your side. Up a little…straighter. Good. Tilt your head to the left. Ok. Now, lift your left leg and put it out to the side at a 45 degree angle. No…no…NO!! Your other leg…..!!!!!!” Splash.
And how does this relate to learning HTML?
HTML is much like the blindfolded contestant on the team. It makes your lens a blank canvas waiting to obey your every command. It’s sitting there, innocently, batting its long dark lashes at you with sparkling eyes and whispering, “Tell me everything.”
And that’s what you do.
You use the language of HTML to tell your Squidoo module exactly what you want your content to look like:
“I want text in this size and this color to start over there in rows that are this high and I want these words to show up in this color with a border around them that’s this thick and this far away from the words and then I want a picture sitting off to the left and if someone clicks on that one little word in the middle I want you to hyperlink to this address.”
Only one problem. That little box only speaks HTML. You need to translate your request into that language and the box will perform just as you’d like.
How best to get started with HTML?
Copy and paste the following HTML code into a blank lens module:
<p style="font-size: 15px; line-height: 20px; color: black; text-align: justify">YOUR TEXT HERE</p>
The <p style=" tells the module “Pay attention, formatting code to follow”. Your text comes after that. The </p> tells the module to end use of the predefined formatting. The placement of colons, semi-colons, and quotation marks is critical.
Font-size is the size of your text. Change the 15 to something larger to increase text size or to something lower to decrease text size.
Line-height is the row height for your paragraph – like line spacing. Keep this number a few digits higher than your font-size so your rows aren’t all squeezed together.
Color is the color of your text. HTML allows you to use some simple names like black, red, white, green, blue, etc, or you can choose six digit hexadecimal color codes and put a number sign (#) in front of the six digits to tell the module what you’re doing.
Text-align tells your text how to align within the box. You can choose left to make text all straight on the left side, right to make text all straight on the right side, justify to make the text straight on both the right and left, or center to make each row of text center itself on the row.
Now, play with those elements in that code you pasted and save the module to see the results. Go back in, change it again and save. Put in your own text and see what it looks like. These are basic codes and once you master them, you can start to incorporate others with less fear. Eventually, you’ll be creating smashing works of art. I recommend starting with Basic HTML for learning more about HTML.
I’ll leave you with a tip – ever see a lens and think to yourself, “How did they do that?”. Well, you can check. Click “VIEW” on your browser and then click “PAGE SOURCE”. You’re now looking at the HTML code for that lens. To find just the code around the module you were admiring, copy a chunk of its initial text and do Edit/Find for that chunk. Just preceding that text will be the code used for formatting. You’ll have to scroll to the right to see it all. You CANNOT copy the other lensmaster’s photos or content, but you can learn a great deal from seeing how others build their lenses.
And, with that, get going. You have lenses to create. 
[ratings]
On a similar note...
What I am about to say, you are either going to agree or disagree with me. First off, I love the WYSIWYG editor that Squidoo had introduced over a week ago now. For you people whom have no idea what those letter stand for, let me enlighten you on that. Wyiwyg stands for “What you see is what you get”.
With thanks to 
Overheard on twitter...
Recent Comments