HTML CODE - Squidoo Edition

To start this off with something very simple, we're going to go ahead and learn about changing your font sizes, type, and coloring. With even something as simple as changing your fonts, it can add a dramatic style change to your lens.

Note: Just because you have the option to change the way your font looks, don't go overboard! Just use it when it's really needed.

This first portion will explain how to easily change your text to so that it comes out as bold, italic, strong, underlined, and colored. When it shows a <i> for example, don't forget to use the finishing </i> tag (the forward slash "/" it tells it when to stop using the effect).

Using the bold, italic, strong, underline, and font color codes.

<b> which gives you This is sample text.

<i> which gives you This is sample text.

<strong> which gives you This is sample text.

<u> which gives you This is sample text.

To change the color of the font use the following code.

Code: <b style="color: red; ">This is sample text.</b>

This is sample text.

To change the background color behind the text, use the following code.

Code: <b style="background-color: #008fff; ">This is a sample text.</b>

This is a sample text.

You can also do a mixture of various codes to give you an additional variety. You can mix both underline and bold, colored and underline, strong and italic, and the list goes on. You could even use all of them at once if you felt like it.

<i><u><b>This is sample text.</i></u></b> which gives you This is sample text

Using strike through

<b style="text-decoration: line-through;">Example Text</b> which gives you Example Text

Using different text sizes.

<b style="font-size: xx-small; ">Sample Text</b> which gives you Sample Text

For the following, use the above example but just replace the "xx-small".

x-small
small
medium
large
x-large
xx-large

One of the most important aspects of any website, is knowing when to turn a piece of text (or more) into a link for people to follow to another part of your site, or someone else's site. Aside from what you've learned in lesson 1, this will probably be your more frequently used html code.

Note: Just because you can link something, don't get all link happy and link huge portions of text or linking every other word. Use it sparingly.

Standard use, you'll most likely be using this the most.

<a href="http://www.example.com">Your Link Here</a> which gives you Your Link Here

You can also dress your links up with what you've learned in Lesson 1. The following are two examples of what you can do. The first uses the italic and underline html codes, while the example after uses the italic and font color changing html codes.

Linking using italic and underline.

<a href="http://www.example.com"><u><i>Your Link Here</u></i></a> which gives you Your Link Here

Linking using a font color change and italic.

<a href="http://www.example.com"><b style="color=red; "><i>Your Link Here</b></i></a> which gives you Your Link Here

Adding pictures to your lens is very important, especially if you want to make it a bit more colorful and lively rather than just having a huge wall of text for a lens. In Lesson 3 we'll be talking about the various methods of adding pictures, which includes sizing, linking, and alignment.

If you want to find places online to store your images online or your in the need for royalty free images, please visit my other lens at: Free-Images-for-Squidoo

For the following examples, we'll use this handy-dandy image I whipped up! Nuh-nuh-nuh!

Inserting your image.

The following method is something that you'll most likely be using the most. It's sweet and short, and easy to do. Note, I reduced the size of the original image, it is now 200px by 200px in size, and it will remain that way throughout the rest of the examples.

Code: <img src="http://www.yourdomain/image.jpg">

Gives you the result of..



Changing your image size

This is a nice feature if you ever want to use a picture but you don't want to open a graphical program to reduce the picture's size, instead you can do it right in the code. In this example I'm telling the code to change the size of the picture from 200px by 200px to 50px by 50px, you'll notice the size "50" in the code below.

Code: <img src="http://www.yourdomain/image.jpg" width="50" height="50">

Gives you the result of..



Aligning your image.

Code: <img src="http://www.yourdomain/image.jpg" align="right" >

Gives you the result of..

You can also use another format to align your images, with the "p align" html code.

Code: <p align="center"><img src="http://www.yourdomain/image.jpg" /></p>

Gives you the result of..

Using borders on your images.

You can easily add several different variations of borders with just changing a few of the components, such as having a solid 3px border, to a dashed 5px border, and so forth. Below I will give you several different examples of how it can be used. You see where it says "solid" in the line below? Just change that word to dashed, dotted, double, and so on.

Code: <img src="http://www.yourdomain/image.jpg" style="border: 4px solid #858585; padding: 2px;" />

Gives you the result of..



This is with dashed



This is with dotted



This is with double



This is with groove



This is with ridge



This is with inset



This is with outset

Without bogging down the previous image lesson, we'll make a quick short lesson here for you to learn how to easily make an image linkable. This is especially handy if your making image buttons linkable or even using this for clickable banners. Trust me, it's a piece of cake!

Code: <a href="http://www.yourdomain.com"><img src="http://www.yourdomain.com/image.jpg" ></a>

Gives you the result of.. (the picture links to my Images for Squidoo lens)

If you want to have text on the left or right side of your image, then the best way to go around that is to wrap your image with text. Below is an example.

Code: <img src="http://www.yourdomain/image.jpg" style="float: left; margin: 0px 10px 10px 0px;">

Gives you the result of..



What does the 2px 4px 6px 8px mean? Good question. The first number (#px) dictates how much spacing you have above your image. The second number dictates how much space you on the right side of your image, the third is the bottom of your image, the forth is the left side of your image.

So if your going to have your image align top-left while the text wraps around it, then the best method would be is to have your spacing 0px 10px 10px 0px (example). This would represent that you have spacing on your right and bottom area, so it makes a nice buffer between your image and your text.

If you find that you need a space in between your picture, text, or whatever try one the following. Each of these should work.

<p></p>

or

<br>

All you need to do, is just put one of these under your picture or text that you wish to have a space for. This is especially helpful if your writing a lot of text which has spacing between paragraphs. In Squidoo you don't need to use this for text-modules, like the one your reading right this second, just hit your return or enter key to make the space.

People have used their email for multiple purposes, such as regular communication, sending out newsletters, error reports, and more. In this lesson your going to learn how to make an email link, so all that people need to do in order to email you is to just click that link.

Note: Just remember that when you post your email on the internet, you may start receiving a lot of spam from bots. Just something to keep in mind.

This is a simple little thing to do. The format of the email link is basically the same as a hyperlink, except for one little detail. Just replace the http:// with mailto:, and presto you have made an email link.

It should look something like this:

<a href="mailto:yourname@example.com">My Email Link</a>

People love lists, I know I do! It's formal, keeps things looking clean, and it automatically indents itself too, which is always nice.

What do you like?

• I love carrots.
• I love chocolate.
• I dislike coconut.
• I dislike olives.

The code..

What do you like?
<ul><li>I love carrots.</li><li>I love chocolate.</li><li>I dislike coconut.</li><li>I dislike olives.</li></ul>

Instead of using the standard round bullet, you can use your own images if you want to by just putting a small image in front of the text, such as this..

List Item One
List Item Two
List Item Three
List Item Four

The code...

<img src="http://i461.photobucket.com/albums/qq340/LordofSaxony/bullet.jpg" /> List Item One
<img src="http://i461.photobucket.com/albums/qq340/LordofSaxony/bullet.jpg" /> List Item Two
<img src="http://i461.photobucket.com/albums/qq340/LordofSaxony/bullet.jpg" /> List Item Three
<img src="http://i461.photobucket.com/albums/qq340/LordofSaxony/bullet.jpg" /> List Item Four

Usually hyperlinks are underlined by default, as you've most likely seen throughout the internet, except for those sites where it's hidden. You may have a Squidoo page where underlining is enabled, or it may be disabled by default.

If you have a page where it is automatically disabled, just use the <u>text</u> in your link code, as shown below.

<a href="http://www.example.com"><u>Your Link Here</u></a>

would look like

Your Link Here

If you have a page that has underlining enabled by default, you can easily remove the underlining by adding the following.

<a href="http://www.example.com/" style="text-decoration: none;">Your Link Here</a>

would look like..

Your Link Here

Depending on how you want it, underlining your link can be a nice feature for those who are not in the habit of browsing online, since their more likely to relate "underlining" with "linking". But, on the same token sometimes removing your underline from your link can make it look a bit more clean. Your to judge how you want it, since in my book neither is really bad nor good.

You've probably noticed that I've been using that a lot here, I usually do that so it spices things up a bit, but I try not to do it too much.

I'm talking about this..

Hello, this is a sample, hi hi.

The code for it looks like this..

<p style="padding: 4px; background-color: #dcdcdc; border: dashed 3px #8a8a8a;">Hello, this is a sample, hi hi.</p>

If you look at it, the first portion says that it's going to use a "padding" around the text area, and it says how thick the pixel padding will be by stating that it's going to be 4px. The next portion says what color the background color will be, the numbers you are seeing are color codes that most graphical programs will have. The part after that is talking about the border, which states that it is going to be dashed and 3px (pixels) in size.

You can tweak the padding sizes up reducing or increasing the pixel amounts, such as 1px, 2px, 3px, 4px, and so on. Just becareful not to make it too large it may be a bit obnoxious otherwise.

The different types of borders besides dashed that you can use are..

• none - Specifies no border


• hidden - The same as "none", except in border conflict resolution for table elements


• dotted - Specifies a dotted border


• dashed - Specifies a dashed border


• solid - Specifies a solid border


• double - Specifies a double border


• groove - Specifies a 3D grooved border. Depends on the border-color value


• ridge - Specifies a 3D ridged border. The effect depends on the border-color value


• inset - Specifies a 3D inset border. The effect depends on the border-color value


• outset - Specifies a 3D outset border. The effect depends on the border-color value


• inherit - Specifies that the border style should be inherited from the parent element

Sample Gallery...

none

Hello, this is a sample, hi hi.

hidden

Hello, this is a sample, hi hi.

dotted

Hello, this is a sample, hi hi.

dashed

Hello, this is a sample, hi hi.

groove

Hello, this is a sample, hi hi.

solid

Hello, this is a sample, hi hi.

double

Hello, this is a sample, hi hi.

ridge

Hello, this is a sample, hi hi.

inset

Hello, this is a sample, hi hi.

outset

Hello, this is a sample, hi hi.

inherit

Hello, this is a sample, hi hi.

Now that you've mastered the fancy little box, lets take it a step further, shouldn't we? Have you ever wondered how to have a border around a single side, or multiple sides without going all the way around?

In this example, we're only using the bottom as our border area as shown below.

Hello, this is a sample, hi hi.

How about only the right side?

Hello, this is a sample, hi hi.

How about only the top?

Hello, this is a sample, hi hi.

How about only the left side?

Hello, this is a sample, hi hi.

I'll tell you how to do one of them, it's not hard to figure it out after because your only adding "-left, -top, -bottom, and -right" to the border code. As shown below.

<p style="padding: 4px; background-color: #dcdcdc; border-left: dashed 3px #8a8a8a;">Hello, this is a sample, hi hi.</p>

With that you are giving it the command to only show on a single side, if you were to say border-left: it would only show on the left side, for example.

Now your feeling very daring right? How about you only want to show the top and bottom borders, but NOT the left or the right?

Hello, this is a sample, hi hi.

The code would look like this..

<p style="padding: 4px; background-color: #dcdcdc; border-bottom: dashed 3px #8a8a8a; border-top: dashed 3px #8a8a8a;">Hello, this is a sample, hi hi.</p>

All I did was just add a little extra code right after the ; which would be this.. border-top: dashed 3px #8a8a8a

With that you can do all sides but the right side, or the left side, or the top, or the bottom. If your really nuts you can make different types of borders on each side for something truly hideous!!

Hello, this is a sample, hi hi.

If your feeling very spunky today, feel free to give this a shot. This is the ability to put a picture background behind your text, so you can use this for menus, titles, and more. This is a bit advanced, the best method to learn how to do this one is to just use what I did (code below) and apply it to your own creation. Tweak a little of this, and a little of that.

Your Title Here!!!!

I'm just giving you an example of what you can do if you want to make background for your text. You can get pretty creative with this if you want, and depending on your image sizing you may have to do a bit of shoehorning and experimenting.

Here is the code I used.

<p style="padding: 8px; background-image: url(http://i461.photobucket.com/albums/qq340/LordofSaxony/background4.jpg); border: solid 2px #ffbb03;"><strong><b style="font-size: large; ">Your Title Here!!!!</b></strong></p>

In all seriousness, the best way to do this is to make a test site of your own or just test it inside one of your text modules and play with the padding and image size.

Sometimes you want a totally different font on your Squidoo lens, with the following types of fonts you can do that. A piece of advice, only use the fonts that people normally would have, such as the list below, do not use one that only you have that you downloaded at some point, it may show up for you but it won't show up for them. So be safe, use standard font families.

The following is a list of "should be safe" font families that usually come installed on your computer

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Here is an example..

Hello, this is a nice example isn't it? This is using the Comic Sans MS font style. Fun fun!

The code for this would look like..

<b style="color: #ffb400; font-family: Comic Sans MS;">Hello, this is a nice example isn't it? This is using the Comic Sans MS font style. Fun fun!</b>

As you noticed, it says "font-family: Comic Sans MS;" and that is where you would put the font name.

More examples..

Arial

Arial Black

Bookman Old Style

Comic Sans MS

Courier, monospace

Courier New

Garamond

Georgia

Impact

Lucida Console

Lucida Sans Unicode

MS Sans Serif

MS Serif

Palatino Linotype

Symbol

Tahoma

Times New Roman

Trebuchet MS

Verdana, Geneva, sans-serif

Some people like to have a unique hover option for their cursor, below are several methods and styles for you to change the way it looks when a person hovers over your link.

Tip: Hover over the links to see.

Pointer
<a hred="#" style="cursor:Pointer">Pointer</a>

Wait
<a hred="#" style="cursor:Wait">Wait</a>

Crosshair
<a hred="#" style="cursor:Crosshair">Crosshair</a>

Move
<a hred="#" style="cursor:Move">Move</a>

Col-Resize
<a hred="#" style="cursor:Col-Resize">Col-Resize</a>

All-Scroll
<a hred="#" style="cursor:All-Scroll">All-Scroll</a>

No-Drop
<a hred="#" style="cursor:No-Drop">No-Drop</a>

Not-Allowed
<a hred="#" style="cursor:Not-Allowed">Not-Allowed</a>

Progress
<a hred="#" style="cursor:Progress">Progress</a>

Url
<a hred="#" style="cursor:Url">Url</a>

Vertical-Text
<a hred="#" style="cursor:Vertical-Text">Vertical-Text</a>

NE-Resize
<a hred="#" style="cursor:NE-Resize">NE-Resize</a>

NW-Resize
<a hred="#" style="cursor:NW-Resize">NW-Resize</a>

The following quote box is similar to the one I have in one of my forums, and it's similar also to the one at vbulletin.org (what I use for forum software). Although mine is written with div tags, you can still get the similar feel of it without using divs at all.

This first quote box uses no images.



"

This is where the text is! I'm going to keep on typing text to see how this stretches out! Yay! Here is more text, and even more coming at ya!!


Here is the code

<br />
<b style="font-size: 60pt; font-family: Times New Roman';">"

<b style="float: left; font-weight: bold; font: 22px normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; margin-top: -50px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #ccc;">This is where the text is! I'm going to keep on typing text to see how this stretches out! Yay! Here is more text, and even more coming at ya!!</b>
</b>

This quote box below uses an image. On the plus side, you can replace this image with anything that you want to make it look pretty. You could use flowery quotes, gothic quotes, shapes, anything. Just upload your image to a free image hosting site, such as talked about here. You may want to keep it the same size as whats being used, unless you want to fiddle with the padding to make it line up right. **Please use your own image or copy and upload this one to your own hosting place!!**

This is where the text is! I'm going to keep on typing text to see how this stretches out! Yay! Here is more text, and even more coming at ya!!


... and the code

<br />
<b style="margin-left: 10px; margin-top: -10px"><img src="http://i461.photobucket.com/albums/qq340/LordofSaxony/quote3.png" border="0" alt="quote3" />

<b style="float: left; font-weight: bold; font: 22px normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; margin-top: -50px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #ccc;">This is where the text is! I'm going to keep on typing text to see how this stretches out! Yay! Here is more text, and even more coming at ya!!</b>
</b>

The following is an example of a more.. colorful quote. You can easily just replace the image with anything you want. **Please use your own image or copy and upload this one to your own hosting place!!**

This is where the text is! I'm going to keep on typing text to see how this stretches out! Yay! Here is more text, and even more coming at ya!!

A lot of people out there copyright their works, afterall it's important so that no one tries and steal your work. You wouldn't want to work several months on something just to have someone come along and swipe it, would you?

These are the most commonly used copyright and trademark symbols, also feel free to come back here at any time and copy and paste these symbols into your own works.

© This is the copyright symbol. To use the symbol, hold the ALT key, press 0, 1, 6, 9.

TM This is the trademark symbol. To use the symbol, hold the ALT key, press 0, 1, 5, 3. Note: The small TM symbol isn't working in this module, but the instructions to use the symbol are correct.

® This is the 'registered' trademark symbol. To use the symbol, hold the ALT key, press 0, 1, 7, 4.

Sometimes it's nice to make your text a bit different with borders and backgrounds, and make it stand out among the rest of your text. There are several methods to make this happen.

The infamous double underline, it's pretty simple to do really. All your doing is placing a bottom border below your text, and using an additional "u" underline with it.

This is some text.

The code...

<u><b style="border-bottom: 1px double #000;">This is some text.</b></u>

The line on the top and line on the bottom method (you can also use this for linking!)

This is some text.

The code...

<u><b style="border-top: 1px double #000;">This is some text.</b></u>

I'm not sure what you would use this for, but who knows you might think of something interesting. This is borders on the right and left side of your text only.

This is some text.

<b style="border-right: 1px double #000; border-left: 1px double #000;">This is some text.</b>

This is just putting a border around your text.

This is some text.

<b style="border: 1px double #000;">This is some text.</b>

The infamous dashed underline (sometimes people use this for links)

This is some text.

<b style="color: #0084ff; border-bottom: 1px dashed #0084ff;">This is some text.</b>

Using a background color with your text.

This is some text.

The code..

<b style="background-color: #0084ff; ">This is some text.</b>

Using a background color with border.

This is some text.

The code..

<b style="border: 1px double #006acc;background-color: #a2dbff;">This is some text.</b>

Here is a bordered box with multiple types of inner text, the bold colored title, the italic description, and the regular text below.

Title Is Here.
This is where your Italic Font is.

This is where the text is! I'm going to keep on typing text to see how this stretches out! Yay! Here is more text, and even more coming at ya!! Oh wait, and there is even more text to see how this stretches? Uh huh, yuppers.. even more here..


The code..

<br />
<b style="float: left; margin-top: 0px; margin-bottom: 0px; margin-left: 20px; margin-right: 20px; padding-left: 0px; border: 4px solid #000;"><p align="center">
<b style="font-size: 24px; color: red;">Title Is Here.</b>
<b style="font-size: 18px; color: black; "><i>This is where your Italic Font is.</i></b>
</p>
<b style="float: left; font-weight: normal; font: 18px; margin-top: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 15px; padding-right: 15px;">This is where the text is! I'm going to keep on typing text to see how this stretches out! Yay! Here is more text, and even more coming at ya!! Oh wait, and there is even more text to see how this stretches? Uh huh, yuppers.. even more here..</b>
</b>

What you learn here on this lens, you can also use on your own website. If your thinking about having your own www.yourname.com then feel free to check out my other lens entitled, The Best Hosting Plans.