Home » Squidoo Community » Lensmaking Tips » HTML on a lens

HTML and CSS

Ranked #1,406 in Squidoo Community, #132,345 overall

HTML and CSS

HTML and CSS work closely together. Let me tell you one thing about myself. I've been playing with HTML since 98, but the past few years, i've been using it even more and most of what I have learned, I've learned on my own. I even know css which is a bit different than html, but it really does help you to make great websites. CSS picks up where html does not. One example would be the hyperlink colors. You can change those in css. You can still change the text in html, but css can change the color of the hyperlinks. You may ask what is html and css stand for? HTML is hyper text markup language and CSS is cascade style sheets.

Do you Know HTML and/or CSS?

Loading poll. Please Wait...

Share this poll
- Stumbleupon
- Facebook
- MySpace
- Twitter
- Digg
- Delicious
- Email

Before Jumping In!!

Don't expect to understand HTML and CSS Right away. Rome was not built in one day after all.
Take baby steps. Learn one thing, then come back. This will keep you from getting overwhelmed.
Don't give up. All else fails, contact me and I will try to help you. With HTML and CSS, if you miss one thing, there are problems.
When using HTML or CSS, choose colors that are going to complement each other so that you are not overdoing it.

Basic HTML

So you want to learn HTML huh? Lets start with something simple

HTML Codes you need to know

Bold - 
Bold - 
Underline - 

Italics - 

Webaddress Link - <a href="yourwebaddress.com">Webaddress Name</a> If you want the link to open up in a new window you would have to do this <a href="yourwebaddress.com" target="blank">Webaddress Name</a>

For images its similar but instead its <img src="imagewebaddress.jpg">

If you want to put the link and image together it would be like this: <a href="yourwebaddress.com"><img src="imagewebaddress.jpg"></a>

Remember to always close your tags. Lets take a look at the bold tag above.
 You put your text here.

HTML Mousepad by trekkieandrea

Basic CSS

In HTML, normally to make a color for the background all you have to put in is <BGCOLOR="#colorcode"> Since squidoo does not allow this, we have to resort to css coding for backgrounds.

In CSS, the code would be

For black background you would get: 

Instead of using #colorcode, you can replace it with the colorname instead so you would get  for red.

For text its simular.

So if you want white text, you would do this: White text here. 

As stated for the background the same goes for the text Instead of using #colorcode, you can replace it with the colorname instead so you would get  for red.

Squidoo does not allow html color codes, but if you were to do the html version it would be <font-color="#colorcode">

More color codes are located below in the colors section.

Do You Want To Add Borders and Rounded Corners?

Adding Links and Images

<a href="yourwebaddress.com">Webaddress Name</a> If you want the link to open up in a new window you would have to do this <a href="yourwebaddress.com" target="blank">Webaddress Name</a>

For images its similar but instead its <img src="imagewebaddress.jpg">

If you want to put the link and image together it would be like this: <a href="yourwebaddress.com"><img src="imagewebaddress.jpg"></a> The way to look at this section is when you write a link, and where you put in the text normally is where the image is now. It replaces that.

Bulleted Lists

Font Information

Background Information

To add width, you would have to do this:  You Should notice that there will be an ending of If you want to add text to the inside the borders like I have done with this lense,you need to put the text in between  and this.

If the text seems too close to the edge of the borders, you can move it farther away from the border by adding ;padding to it. This is what you would get with the previous examples.  As you can tell I used 5px as the padding.

The 500px is not set in stone. Experiment with the numbers and you should see what you get. The 2px you see is how thick the border is. You can play with that too.

To add background color you need to do this: 

To add text color to this you need to do this: 

As you do all of this, look at the pattern on how this is done. You may not get everything right away, but as you do it more, you will start understanding how it is done. Basically all I had done was add width: 500px. The 500px does not have to be 500px. The number can be anything you want as long as you add the px right after it. Instead of using the 500px, you can always use percentages also. I usually use that on the top module here. Why? Different computers see things differently. A smaller screen will see one thing and a bigger screen will see another. If you set the width of 400px, it may drop down to the next line if you have a smaller screen and yet if you have a bigger screen, less chance of a new line. With percentage, it works with your screen and does not typically drop down to a new line like the fixed width. Fixed width is like 500px and fluid would be like 50%.

How about alignment?



You notice that I added ;float:right

So if you want left you'd do this:;float:left

Padding and Margins

You probably have seen some things on some lenses and have no idea how they did it. Padding is where you having padding on all sides around a area. Take some of the codes that you have learned before and add padding: 10px; That is all you have to do. Remember you can whatever number you feel is right. If you only one side, then you would put the side to padding like say you just wanted padding on the right, you would do padding-right: 10px;.

If you want to add margins, you would do something similar to the padding. Instead of adding padding, you would add margins instead.

Now that I wrote this, do you understand?

Loading poll. Please Wait...

Share this poll
- Stumbleupon
- Facebook
- MySpace
- Twitter
- Digg
- Delicious
- Email

Looking For the Color Codes?

Since this lens has managed to get longer and longer, we now have a separate lens that covers colors

Are You Looking For Premade Color Schemes?

Check out this lens.

How About Some Graphics For Your Lenses?

Need More Help?

Come check out my HTML and CSS Mentoring lens out. I am here to assist you.

Are you Confused or just have something to say?

Feel free to leave your comments here.
Do you want to create a lens like this one? Just click here to start writing your lens today.

submit

Reply

bcarter Nov 13, 2010 @ 5:58 pm | delete

Is there a way to embed a second CSS paragraph within a first? I haven't found it yet and I found your lenses looking for it.

Thanks,
B

Reply

Trekkiemelissa Nov 13, 2010 @ 10:33 pm | delete

Can you give me an example of what you want to do?

Reply

bcarter Nov 14, 2010 @ 6:37 am | delete

I would like to have a paragraph that has a border around it and then include a link like that found at Squidutils inside of that paragraph.

I've tried this and the second paragraph causes my first one to close itself out. I found a quick fix solution to this for the time being, but it's really not what I'm looking for.

Thanks for your response,
B

Reply

Trekkiemelissa Dec 1, 2010 @ 1:51 am | delete

I do want to apologize for not getting back sooner. I wanted to email you my response, but there is nothing available. Anyways If I am reading this right. Do as you normally do, but in between paragraphs put in . In case this does not show up right its a br in between a less than and greater than sigh but with a slash after the br.

Reply

bcarter Dec 7, 2010 @ 6:57 am | delete

No problem about the delay, I understand you're busy and I didn't expect you to drop everything to give me an answer ASAP.

I'll give this a shot next time I'm working on a lens where I need this.

Thanks again,
B
Load More