HTML Squidoo Tricks How To Lens with sample codes step-by-step

Table of Contents

HTML Squidoo Tricks
How To Lens
Table Of Contents
Module Definition
Background Colors
Change Fonts
Upload And Resize Images
How To Program A Button
HTML Table Grid
Create Your Own Graphics
Image Animations
Sample Codes
HTML Sign
------------------------------------------------------------------------------------------------------

Welcome to the HTML Squidoo tricks How To lens. This online HTML guide will provide sample codes to enhance the appearance of lens modules. After reading the step-by-step instructions, you will know how to change, create, add, and modify:

* Fonts
* Background colors
* Table of contents
* Modules
* Images
* and more

This lens was created for lensmasters (Squidoo webmasters) so that they might gain some insight about what can be accomplished within a lens.

In addition to seeing what can be done in a module, you'll want to use some of the tricks on this lens in your own modules.

Are you wondering how to use html to enhance the appearance of your lens? Would you like to fancy up your lens to stand apart from other lenses, impress visitors, or increase sales? If you answered "yes" to any of the above then you'll find this lens helpful.

I've learned quite a bit by reading various html tips, tricks, 'n secrets lenses and more by experimenting on my own. Using html and css is fun and easy. You'll really enjoy it, I promise :)



In lenses, much of the code behaves differently than it does on hosted sites. You have to trick it at times and for html tables you have to actually "cheat" :)

I will show the sample code for every one of my tricks. I will show you everything I know and the code will be available for copy/paste :)

For the code samples I will use fictitious module numbers and link addresses. You'll be changing those to suit your own module numbers and link addresses. Thank you for visiting and I hope that you find this lens to be fun and useful :)

Here are the topics that will be covered:

Module links (Table of Contents)
Image links
Picture links
Hyperlinks
HTML Table Grid from scratch and how to display one
Logos, buttons, and banners
Font types
Font colors
Font sizes
Drop Caps
Aligning images
Aligning text - left, center, right
Image width
Strike-throughs and underlines
To The Top links
Site Map
Background Colors including the featured "Chalkboard" look



A few things you have noticed and will notice throughout this lens are that I like to show how to add color to the background of a module. I also like to add formatting to fonts. You've seen it twice above in a couple of modules.

Squidoo only allows a limited variety of HTML and CSS within a lens module. So you have to experiment quite a bit to see what works and what doesn't work. Furthermore, when you start combining HTML and CSS elements, it can create unexpected results.

Module Notes

The introduction module - the very first module - has a background color that is different from the default white background. The same is true with the table of contents module, two modules above this one. I'll explain how to do that and how to change font color among other things a ways below :)

Warning: The variety of fonts and background colors is for demonstration purposes only. It's a bad design decision to do this with a lens or with any document. Do experiement but don't create the wide variety of colors and styles you see here. It will turn your visitors off. Stick with one background color and two font families and two font colors at most.

To Table of Contents

Before we get into HTML Squidoo Tricks, let me introduce you to some basic html concepts. Then we'll have some fun with background colors and other stuff as we get farther into the html css tutorials. Towards the end of the how to lens, we'll explore some slightly more advanced html (but nothing difficult!).

HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets) are tag-based web formatting languages.

Don't let the names scare you, they are among the very easiest coding languages in the history of coding.

Most HTML tags come in pairs. The tag text is enclosed in an opening less than symbol "<" and a closing greater than symbol ">". The pairs appear together like this "<></>". A small handful of tags such as the break tag <br /> is a singleton (single or lone) tag rather than a pair of tags.

So the "break" singleton tag would look like this: <br />. It has no closing tag. It just stands alone. If you want to use two or more break tags to create more space between lines, line 'em up right next to each other like this: <br /><br />. You can use more than two if you need to :)

I'll give you a few brief and simple examples of html so that you can get a quick idea of what it looks like.



To make font bold just type: <b>Some Bold Text</b>

Bold text will come out like this: Some Bold Text

You might refer to these bold tags as "b" tags.

To create italic letters:

For html italics or to italicize your text (slant)

Sample code: <i>Slanted text</i>
Italic text will come out like this: Slanted Text.

You might refer to these italic tags as "i" tags.

Instead of explaining all of the html tags and results right here, I'll do it in each module that introduces a new concept below :) Next, let's talk about that table of contents you saw near the top of the how to lens.

To The Top HTML

The table of contents (T.O.C.) module has some font size formatting and some clickable hyper links. But the hyperlinks are local. They link to sections within this very lens.

The code is a series of local hyperlinks containing a number sign followed by the word "module" and each module number. Each hyperlink starts out with an opening anchor tag <a href= and then the address is quoted.

The first tag is closed with a >. The closing tag goes at the end and it looks like this </a>. Inbetween lies the text that you want the visitors to see.



Code sample for T.O.C.

<a href="#module1234567">HTML Squidoo Tricks</a>
<a href="#module4433221">How To Lens</a>
<a href="#module1122334">Sample Codes</a>
<a href="#module7766554">Table of Contents</a>
<a href="#module2468135">Background Colors</a>
etc...

But how do you find out what the module numbers are? There are two ways: the easy way and the way the HTML experts go about it.

I'll tell you the harder way first, which comes in very handy from time to time. You view and read the source code. Don't worry, you won't have to do this if you don't know much about HTML. But, here is how:

You go to the View menu on your browser while visiting a website. From the browser menu you select Source or Page Source depending upon which browser you are using. You may have to also enable Wrap Long Lines To Window (or something like that) to view all of the source code. Now you can browse the code to find what you are looking for.



Now for the easy way :) While in edit mode, select the desired modules one at a time. Hold your mouse pointer over (this is called a mouse-over or a hover) the arrow next to the word Edit, which is located in the upper right of a given module.

Look in the lower left hand corner of your browser. This area is usually just above the Windows Start button and it's called the progress bar. You can do the same when hovering over a hyperlink to see where you will actually be led to.

The address should look something like this: http://www.squidoo.com/lensmaster/move_module/how-to-lens/1234567/4.

The seven digit number is what you want! The single number after the last slash is the "temporary" module order number. In the sample case above, it is the fourth module. That number changes when you reorder modules - thus "temporary".



The introduction module is always number zero and you can't use a mouse-over to find out it's 7 digit module code.

Okay, don't forget to include #module in the path and use the right module number for your own modules. So, do this for each module you would like to list in the T.O.C.

To see how this works in practice, scroll back up to the table of contents. Mouse over a link there and look in the progress bar area. You'll see the path that was mentioned above. You can click a link to experience it in action.

That's all there is to it! More html squidoo tricks below. But first, let me tell you about Squidoo and modules.

Go to T.O.C.

What is a module anyway? I'll give you a module definition right in this very module :) What is Squidoo? What's a lens? What's a lensmaster?

If you don't know much about it but you're curious, you might like to read the next few sections of text. I think you'll like what you see. It'll clear up some terms such as lens, lensmaster, and SquidU.

This part of the html squidoo tricks how to lens is for those of you who are either new to Squidoo or are still considering joining.

Q: What is Squidoo?

A: WWW Squidoo Com is a social network composed of lensmasters who create lenses in order to share their view on various topics. Each creation is an independent lens yet it is a part of a network of a very friendly social group. There are many great things about Squidoo.

* You can create as many lenses (pages) as you like for free just like the HTML Squidoo Tricks How To Lens right here.

* You can express your own point of view on a chosen subject.

* You can monetize in several different ways - adsense, money modules, lensmaster referral, affiliate links, and more.

* Search engines such as Google love Squidoo! This means your lens gets indexed fast, it shows up very high - often on the first page - of SERPs (Search Engine Results Pages), and you gain high page rank in a very short time (often less than 2 months)

* You can also join the SquidU Forum (Squidoo University) for free to learn about marketing, lens crafting, and making money with lenses. The forum is active and friendly.



* You can learn about being a webmaster (lensmaster) and experiment with html, marketing, and making money online.

Q: What is a lens?

A:A lens is what you are looking at right now. It is Squidoo speak for web page.

Q: What is a module?

A: A module is a section or a component of a lens. Each module is at first in template form so you don't have to make them from scratch. You don't even need to know HTML though it does help to fancy up a lens to change fonts, background colors, & images.

Once you add a module by clicking the Add Modules button located at the top and the bottom of a lens while in edit mode, you can tweak them to your liking. You can place your modules in any order by clicking the Reorder Modules button and dragging them up or down :)



You can save your new additions as a draft by clicking the Keep This Draft button while in edit mode until you are ready to publish the changes. To publish the changes you just click the Publish button while in edit mode.



It's easy to add and customize modules!

Q: What is a lensmaster?

A: A lensmaster is a Squidoo webmaster who has one or more lenses.

Squidoo is easy to use and easy to update. Create your own lens for free today! Just click the blue CREATE LENS button below:



Now how 'bout them fancy background colors?

To HTML Menu

Background colors can add style to a lens. Does green font against a yellow background hurt your eyes? Is it bright and cheery or is it calming? You can learn HTML to make your lens look more interesting than other lenses.

Knowing how to create a lens, add modules, and tweak modules is good. If you don't know HTML, that's okay. You can still create a good lens.

If you want to take it to the next level, know HTML and how to apply it to a Squidoo lens.

I have two degree in Information Technology (I.T.) and I've been a webmaster for over 10 years. Part of the advantage to having these degrees and the webmaster experience is that I was heavily trained in HTML and other web coding languages.

I'm able to use those skills to an extent at Squidoo to really fancy up my lenses and create something of a "wow factor". Wow factors help to impress. Not only do they impress but they give visitors something to talk about and they aid in putting visitors in buy mode. They may even become return visitors. Here's the good news: you don't need a degree in I.T. to code in HTML :)



HTML is simple and fun to learn. Not only that, but if you learn to understand HTML, you'll be able to peak at the source code of other sites to get an idea of how they do things. So do yourself a big favor, learn html and learn to read the source code of websites.

You can change the background color by using style tags.

Here is what I used to turn the background color light yellow, change the font size to 13 pixels, change the font family to a fun font known as comic sans ms, and make the font color green.

Code:

<p style="background: lightyellow; font-size: 13px; font-family: comic sans ms; color: green">

To make the green header font bigger and more bold than the body text, we use bold tags and add some CSS within the tags. B tags come in pairs. Here's how it is done:



<b style="font-size: 19px">How To HTML</b>

Be sure to place a closing </p> at the very end of your last paragraph. The p tags are paragraph tags. They come in pairs.

Warning: Don't use more than one set of p tags when using background colors. You'll get a big white gap in the background color. Instead of using p style=, use b style= or i style=. It depends on whether you want your text bolded (b style=) or italicized (i style=).

I have the "To The Top" hyperlink at the end of the last paragraph and outside of the p tags so it's a little more noticeable.

Oh, while we're at it, let's display the code for the "To The Top" clickable hyperlink. It leads to the banner near the top of the site. It's just below this module where the yellow background colors end. After you study the code, try clicking it to see it in action.

Code:

<a href="#module1234567">To The Top</a>

Tips: Be sure to code the whole link path along with the appropriate 7 digit module code and include "#module" at the beginning of it :)

Now that we know how to decorate with background colors, let's play around with some fonts.

To The Top

You can change fonts by altering their properties within the bold tags, italic tags, or even the paragraph tags that we spoke of earlier. You can have fun with fonts in modules by creating cool fonts effects. You can make color fonts, play with font size codes, or change font styles. Let's take a look at what can be done.

Kewl Stuff You Can Do With Fonts


List price: $24.00 Now only $9.99

Blue Italics Sans Serif - Fun Font

Red Hand Writing
Black Hand Writing bold
Decorative Headline

Bold Green Serif - Headline Font


Quick notes - At the very top we have:

A font family of "times" and brown is the font color.
The red handwriting is font family Bickley Script within i tags.
The black handwriting is Bickley Script in bold tags.
The Decorative black headline is bold Algerian.
The Bold Green serif font is bolded times.

Woohoo! You can have fun with fonts in modules! Hey, that's a big part of what this html squidoo tricks how to lens is about.

We have some new concepts in this module. We have the strike-through effect and the underline effect above. We have the large drop cap or starting cap below.

For the strike-through and underline effects we start with a b tag and CSS decorations, followed by some red display text and then a closing b tag. We insert a break, followed by an i tag with some fancy CSS within, followed with some blue display text and a closing i tag.

Code for strike-through and underline text effect:

<b style="text-decoration: line-through">List price: $24.00</b><b style="text-decoration: underline; color: red"> Now only $9.99</b><br />
<i style="font-size: 16px; font-family: comic sans ms; color: blue; line-height: 16px">Blue Italics Sans Serif - Fun Font</i>



For the red drop cap, we use "strong" tags. A strong tag creates a bold effect in some browsers and an italics effect in others. You can also use "em" (emphasis) tags instead of i tags. Don't worry about that for now.

Code for red drop cap, which spans three lines:

<b style="font-size: 70px; float: left; color: red; font-family: times">H</b>ey how about...

The font size is 70 pixels, it floats to the left, the color is red, and the font family is called "times". Notice that we place the letter to receive the coded properties within the strong tags and the rest of the words are placed right after the closing strong tag.

Hey, how about a nice big Hawiian Punch, er, starting cap to spice up your paragraphs. This one is red, has serifs (font feet), and it spans three lines. Use it on just the first paragraph or on every one within a module to fancy up your text. How To have fun with fonts in modules - as you can see above - is the topic of this module.

Combine this trick with your background colors and table of contents tricks and you'll blow away the average lens. I'll add more in the future. So, y'all come back, hear?

Hey, if you feel motivated to learn HTML you might check out the book below this paragraph. An earlier version of it was one of my own required college textbooks. It's a great book.

HTML Home

How To Program A Button

How 'bout that chalkboard look? Do you like it? The color is coded like other background colors. This color is darkslategray and the font color is mostly white.

How to program a button for PayPal or affiliate programs. If you overlook this module, you might miss out on something valuable. So, what is the value contained in this little dot of a section on the big and mighty Squidoo you might wonder.

It's more than an experiment with colors, fonts, backgrounds, and linked pictures. It's about creating and coding a clickable button. If you're a lensmaster and you still don't think it matters much then read on.



You can make a button like the one below and use it for anything. PayPal comes to mind. Affiliate buttons come to mind. All you have to do is code it and it becomes a clickable graphic! You'll have to make your own button from scratch and change the words on it, but that's easy and it's fun!

On the other hand, if you'd like to create your own lens, click the button below. Get paid $5.00 dollars to make your own page. It's easy, it's fast, and it's free. Just click the blue CREATE LENS button below.

To make a button active, you have to put it in the middle of an external hyperlink. It is different from the local hyperlinks in that it leads outside of the lens when it is clicked. I happen to have my own referral code listed in the path so that I get credit for any referrals.

The referral code portion will be fictional but the rest will be actual. Note that we use href (a contraction of "hyperlink" and "reference") tags and an img (image) tag. The href makes the image clickable. The img tags pull the image from another host site such as Photo Bucket or Flickr.

---------

Warning: Images don't like to center within colored backgrounds via code. You have to cheat by centering it with characters. I chose to use dashes with the above image. There are 9 of them in the lower left hand corner before the image :)

How to program a button. Let's reach into our bag of html squidoo tricks and grab the sample codes for the live button below (the rel= and target= are explained elsewhere on this lens):

<a href="http://www.squidoo.com/lensmaster/referral/8bb9kkkk66jjj5876bbbb8383uu5566i" rel="no follow" target="_blank"><img src="http://a235.photobucket.com/albums/aa267/squidooman/buttonName.jpg" border="0" alt="Click Me" /></a>

So how do you get your own referral code? You hover over the green "Make your own page" buttons that are built into Squidoo (one is typically right below the bio on a lens) and you'll see a long number and letter combo (about 32 characters long) right after "/referral/...". That's your own referral code. Replace the one shown with your own but keep the rest of the path displayed for the href part.

For the image code, replace the whole path with the path to your own hosted image.




Hey, those are some handy-dandy html squidoo tricks. How 'bout some tips on images?

I want the table of contents

Upload And Resize Images

Changing background colors is great but a picture is worth a thousand words. But placing any old photograph or image of any old size isn't the same as picking good images that span the entire width of a module. Though small pictures have their uses, it's BIG pictures that impress. To impress, we'll upload and resize images.

You can set the image width by coding it right in the module. You just have to tweak the HTML image size. But let me tell you a juicy secret: You should use a photo editing program to resize the image before you upload it to Photo Bucket or Flickr for linking. It will look much better and it won't warp.

Update: Squidoo increased the text area width from 510 wide to 590 wide. It may change again in the future so keep an eye out.

Now let me tell you another juicy secret: The magic Squidoo module width number is exactly 590. This will create an image that will perfectly span the entire width of a module :) Just use the image tag (explained elsewhere on this lens) to link from Photo Bucket or Flickr.

Update Reminder: Squidoo increased the text area width from 510 wide to 590 wide. It may change again in the future so keep an eye out.



So pick your pix carefully, tweak them with a graphics or photo editing program, and make them large enough to impress. Even better, snap some original shots with your own camera. Unique things on a web page impress more than borrowed images.

If you don't need much power or many options, you can grab and download a couple freebies off the net:

- Picasa download for editing photos - Edit and add effects to your photos: Photo Editing Software

- IrfanView - View and resize photos: Resize Images

If you'd like to try some powerful and professional grade programs from very affordable through expensive, then look right below the photo series, which follow these paragraphs.

If you're thinking here's what I want to do: "Add image to website" or "add pictures to web page" then this module is for you. You can use this method to add to the wow factor. Now you can add the resize images formula to your bag of html tricks











Squidoo Tricks Menu

HTML Table Grid

We'll stick with the chalkboard look for a while. It's one of my favorite background colors :) You might find it mighty convenient and stylish to add an html table grid to your mix. There's more to coding a table than meets the eye. There are some things to take into consideration such as:

* Cell Height and cell width
* Table height and table Width
* HTML Table Header
* HTML Table Alignment - right, left, center
* Whether to use CSS or not
* Formatting of a table row and table column
* To update or not to update, that is the question!
* Oh, and what data to include in the table

All this table-talk! Now I'm all excited about making one. But wait, how do I get a table on a lens? That's easier said than done but I'll explain right below the sample table. But not to worry. We have more goodies in our bag of html squidoo tricks.

Okay, so what does it look like in a lens?

HTML Table Grid pictured below (coded from scratch):



Wait a minute!!! Squidoo doesn't allow table tags! What gives, man?! That's right - you can't use table tags directly in Squidoo modules. At least not as of this writing. I'm sure there's a good reason or two for this.

I had to Cheat...

So, how the heck do you pull this one off?

How to lens to the rescue!

Before we go any further, let me give you a heads up (with some orange and green chalk, hee):

Warning: Linking images of a table may show the table data in search engine image directories such as Google. This is great if you want it that way in order to drive traffic to your site. However, if you have sensitive data displayed, the public may end up seeing it in the search engine results. Careful what you put into your tables while using this method.

First of all, don't be afraid to do this. It's a little advanced as far as basic HTML goes, but you can handle each mini concept and you can handle the whole thing. Most of you won't use a table in your lens anyhow.

--------

1. Create the html table grid on your desktop by using notepad. But use the proper number of rows and columns. Change the data too or folks will think you're as weird as me :)
2. What's the magic Squidoo width number?! 590! Set the width to 590. I also coded the Address and City headers.
3. Save it as sometable.htm.
4. Open it up in a web browser by double clicking the saved file.
5. Take a screenshot of it (program suggested below this module).
6. Save the screenshot as a jpg.
7. Upload the screenshot to Photo Bucket, Flickr, or the like.
8. Link to it.

Make sure you change the data in each cell and create the proper number of rows by adding or subtracting rows. Do this by copy/pasting (for adding) <td> tag pairs and everything in between the pair. To remove rows, just cut one or more td pairs plus the info between them.

There are two sets of code you will use for this: HTML to make the table and an image tag to link to it.

The HTML table grid tags list:

<html></html> HTML tags are the first and last tag
<body></body> body tags - second and second to last tag
<table></table> table tags go just within the body tags
<th></th> table header tags come out bold
<tr></tr> table row tags for each row
<td><td> touch down tags, hee, just kidding :) why the heck don't they label these tc for table cell or table column tags??? I have no clue but that's what they are. Some folks call them table column tags to contrast them with table row tags for the sake of description.

Now that we have our list of table tags, let's talk about width, alignment and other stuff.

You only need to set the width once and that is done in the opening table tag as you can see below a little ways down. You might refer to this as html fixed width. You also set the border there if you want border lines to appear around each cell. I took the liberty of altering the cell width of street and city just so you could see how it's done. You can see it right in the table headers (th) below.

If you want to set text alignment, you do it within the th and tr tags as you can see below in the code sample.

(More commentary below the table code)



Sample Codes for the actual HTML table:

<html>
<body>
<table width="590" border="1">
<tr>
<th align="left">Last Name</th>
<th align="left">First Name</th>
<th align="left" width="135">Address</th>
<th align="left" width="100">City</th>
<th align="left">State</th>
<th align="left">Zip</th>
</tr>
<tr>
<td align="left">Rock</td>
<td align="left">Squid</td>
<td align="left">1234 Squid Ave</td>
<td align="left">Squidland</td>
<td align="left">FL</td>
<td align="left">33130</td>
</tr>
<tr>
<td align="left">The Squid</td>
<td align="left">Billy</td>
<td align="left">4321 Squid Circle</td>
<td align="left">Squidville</td>
<td align="left">FL</td>
<td align="left">33130</td>
</tr>
<tr>
<td align="left">D' Squid</td>
<td align="left">Seth</td>
<td align="left">21 Squid Street</td>
<td align="left">Salt Water</td>
<td align="left">FL</td>
<td align="left">33130</td>
</tr>
<tr>
<td align="left">Squiditor</td>
<td align="left">Megan</td>
<td align="left">1854 Tentacle Terrace</td>
<td align="left">Ocean View</td>
<td align="left">FL</td>
<td align="left">33130</td>
<tr>
<td align="left">Squidcode</td>
<td align="left">Gil</td>
<td align="left">0101 Bit Wave Court</td>
<td align="left">White Beach</td>
<td align="left">FL</td>
<td align="left">33130</td>
</tr>
<tr>
<td align="left">Squidwell</td>
<td align="left">Kimberly</td>
<td align="left">4224 Ink Drive</td>
<td align="left">South Breeze</td>
<td align="left">FL</td>
<td align="left">33130</td>
</tr>
<tr>
<td align="left">Le Squid</td>
<td align="left">Francis</td>
<td align="left">911 Fish Lane</td>
<td align="left">Big Splash</td>
<td align="left">FL</td>
<td align="left">33130</td>
</tr>
<tr>
<td align="left">Squidoo</td>
<td align="left">Idoo</td>
<td align="left">1122 Sunny Road</td>
<td align="left">Warm Side</td>
<td align="left">FL</td>
<td align="left">33130</td>
</tr>
<tr>
<td align="left">O' Squid</td>
<td align="left">Patrick</td>
<td align="left">1600 Hot CT</td>
<td align="left">Humid</td>
<td align="left">FL</td>
<td align="left">33130</td>
</tr>
</table>
</body>
</html>

Okay, that was a little more complex than the other teachings. Here's the easy part. Here is how you link to it in your Photo Bucket or Flickr account:

Use the image tag. And yep, you guessed it: In this case, it's a singleton. There is no closing tag. Everything is enclosed within the single tag.

Linking to images from modules:



Image Link Code:

<img src="http://i1234.photobucket.com/albums/aa123/musicresource/sometable.jpg" border="0" alt="HTML Table Grid" />

If you follow the step-by-step instructions it should work fine. Things to remember:

Rename the data in the cells of the html table grid. Create the proper number of rows (tr) for your own use of the html table grid. Make sure the table width is set to 590 if you have enough columns to allow it. Otherwise tweak around with the width settings. Replace the img link code with your own :)

Taking that perfect screenshot is the first step for placing a table in your lens modules.

Up to Table of Contents

Create your own graphics

The first impression is absolutely critical. What's the first thing a person sees when they arrive at a site? The interesting graphics thingy at the top :) Make a good first impression on a lens, a blog, or a website by designing banners, a fancy logo, & 3d buttons. Create your own graphics.

There are three routes to go when deciding how to make cool logos or color banners:

1. Free route 1: Use software that you already have. You might be surprised at the power of your existing software such as MS Word (word art), MS Power Point, MS Publisher, and MS Paint.

Give them a try before you decide to spend any money! This is also a good route to go since you are probably already comfortable using these programs and you don't have to download or install anything new.

2. Free route 2: You can download free programs from the net or you can use them right on a website. Here is the link to a good free online logo maker: Cool Text.

3. To really create the wow factor you can consider purchasing a professional graphics program. You can create site branding with proprietary graphics software.



Paid versions offer more power, flexibility, creative expression, and uniqueness for branding purposes. With decent graphics software you can create a professional custom web banner, a professional logo, an attractive web button, and other interesting graphics.

These abilities go a long way in creating a true wow factor and setting your site apart from all of the generic sites out there. We want all of the html Squidoo tricks we can get our tentacles on :)

* You can make good logos and color banners (logos that span across a page).

* You can make comment buttons or call-outs for birthdays, Valentine's Day, Christmas, New Years Eve, Independence Day, Mother's Day, Halloween, Father's Day, your anniversary, and other special occasions.

* You can create web buttons that are either coded or uncoded (mentioned a few modules up).

* You can make textured or scenic backgrounds with text in the foreground.

Graphics are kewl and fun. Along with photographs, they can really spice up a page if used creatively and sparingly.

Below are some examples of what you can create with a graphics program and add to your pages:

Hyperlink T.O.C.

Adding image animations is no different than adding motionless images. You just upload your animated gif pictures to your favorite image site and link to it.

This is one of the html squidoo tricks that is quite easy to pull off.

Don't forget to substitute my sample codes path with your relative path to the image. To center the images, use the paragraph tags:

<p align="center"><img src="http://r235.photobucket.com/albums/zd167/animated gif how to/imagename.gif" border="0" alt="animated gif picture" /></p>

Sample Codes for html sitemaps.

Notice how the text is centered - even in the site map below?

A site map is a list of pages on your website.

It's useful for linking related lenses.

Normally it goes at the very bottom of a site.

To center paragraph text use the code below for each line or paragraph:

Code:
<p style="text-align: center">Centered Text</p>

To create html sitemaps like the one below with background colors, centered text (text-align: center), a certain font size, a fun font family, and slightly darker dividers, use the code below:



<p style="background: lavender; text-align: center; font-size: 13px; font-family: comic sans ms; color: violet">
<a href="#module1234567">You Are Here</a> | <a href="http://www.squidoo.com/how-to-lens-2" rel="no follow" target="_blank">How To 2</a> | etc...

Notice the You Are Here link has a module code in it? It leads to the How To Lens banner near the top of the site. Also included are the rel and target commands. The rel command in this case prevents PR bleed. It's more or less a SERPs (Search Engine Results Pages) tactic.

Hopefully it will help a little with listing a bit higher in the SERPs. The target command in this case opens up a new window. When visitors close the new window, your site will still be open behind it ;)

Below is a mock example of a site map. It isn't clickable since that would confuse the search engine spiders. It's actually just an image. When you go to make one, make sure that you don't make images. You want your links clickable :)



To HTML Beginning

HTML Main Menu