HTML And CSS Makes Your Lens Look Great!!!
Many of you start writing your lenses without any HTML and CSS, but as you start understanding Squidoo, you want to learn how to spice your lenses up. HTML and CSS is just the ticket that you may be looking for.
Here, on this lens, you will learn from me how to use HTML and CSS. My name is Trekkiemelissa and I am your HTML and CSS Mentor; a citizen Squid.
To find your answer, look through the links below. If you still can't find the answer, please leave a message in the guestbook below. (Be sure to log in so I can answer your question directly!) If you need to know the direct code, you are better off emailing me through the contact me link.
What Does HTML and CSS Stand For?
HTML stands for hyper text markup language and CSS stands for cascade style sheets. I know this may sound confusing to you, but as you start learning, a lightbulb will start lighting up in your head. Please do not expect to learn everything overnight, because I can tell you it does not happen right away, but as you start using it more, the more you will understand. I know this may sound greek to you right now, but have patience. You will learn HTML and CSS.
Polling Station!!!
My Tips to You
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.
Learn About Squidoo's WYSWYG Editor!!!
-
Doing HTML or CSS With the WYSIWYG Editor
-
Let me tell you something. The WYSWYG editor is one of the best things that Squidoo had introduced. Many lensmasters have been asking for this and now it has arrived. You think that my job as HTML and CSS Mentor is gone. My knowledge in th...
Basic HTML
Basic Codes
These are codes that you will be using on a regular basis so they are very important to know.
Paragraph - <p>
Bold - <b>
Underline - <u>
Italics - <i>
-
Basic HTML for Squidoo
-
Before you start reading all this, you may want to open Advanced HTML in a new tab, because you'll be wanting to check it out as soon as you've finished this! You can use basic HTML in a few of the lens modules. Mostly used to create hyperlinks (the...
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.
Check Out Our Image and Video Mentor. She explains the some of the same things I had explained above.
-
Image and Video Mentor
-
Welcome! I'm Linda Martin, your Image and Video Mentor here at Squidoo. I love working with images and know you will too once you have the right software and a few simple instructions. This lens lists sites where you can find free images on the web....
Here are some more lenses about linking.
-
Squidoo Guide: Linking Tips
-
There are many ways that you can add links to your Lens, improving the experience of your readers. How you add those links often depends on what those links are for. This Lens explains the different types of links, and the techniques available to you...
Basic CSS
Some Information About Fonts
-
Font Information
-
I Was thinking about fonts and how its important when it comes to any type of webpage or lens. When it comes to the letters, that in my book is a font. They all have different types and yes they do have names for them. That is what I am going to cove...
Check These Out For Color Options
-
The Guide to Colors On HTML
-
My HTML and CSS lens has managed to get a bit big so I decided that I need to split it up a bit. This is what this lens is all about. What I am basically going to cover is the different colors that you can use in your own lenses. I know they all work...
-
HTML and CSS Color Schemes
-
This is my second to my series of CSS and HTML related lenses. The first one was a detailed lens on how to put html and CSS into your lenses. This one is more of a cheat sheet where you can pick out your color schemes that I have put in front of you....
-
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...
Borders and Rounded Corners
Do You want to learn about adding borders around your boxes, this explains your options.
-
Borders and More
-
When it comes to HTML and CSS, sometimes we want to have borders around our text to spice up your pages. There are a variety of different types of borders. You have regular ones and then rounded ones. Please remember not everything works in all brows...
Bulleted Lists
Have you ever wondered how to created bullet lists without using the text list module. This explains how its done.
-
Bulleted Lists
-
Bullet list are one of the things we use quite often when we want to highlight facts in a lens. Up until now we were not able to put boxes around bullet lists, but that is changing now. We have come up with a way to do it.
Adding Width and Background Color!!!
To add width, you would have to do this: <p style="border: dotted 2px #000000;width:500px;"> You Should notice that there will be an ending of </p>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 <p style="border: dotted 2px #000000;width:500px;"> and this.</p>
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. <p style="border: dotted 2px #000000;width:500px;padding; 5px"> 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: <p style="border: dotted 2px #000000;width:500px; background: #FFCCCC">
To add text color to this you need to do this: <p style="border: dotted 2px #000000;width:500px; background: #FFCCCC;color: #FFFFFF;">
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%.
Backgrounds and Much More
Here, I am discussing some of the fun things you can do with backgrounds.
-
Background Tips and Tricks
-
In the previous HTML and CSS lenses that I have created, I had talked about backgrounds and how to add it to your lenses. I know you were probably confused and thought maybe it only works with the borders as that seems to be the only place so far tha...
Alignment
<p style="border: dotted 2px #000000;width:500px; float: right; font-size: 20px">
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.
Table Of Contents
-
Make a Fancy Table of Contents
-
A clickable Table of Contents helps visitors navigate webpages. A table of contents also shows what's on a single webpage, which helps visitors decide whether your page is worth reading! A great table of contents within the first screen is a powe...
Other HTML and CSS Related Lenses
-
Advanced HTML for Squidoo
-
The techniques shown here aren't much more advanced then what's in the Basic HTML tutorial. The code being used isn't any more special. But the results and presentation can appear to be more sophisticated. Hence it being the Advanced HTML tutorial. F...
-
Advanced CSS: Layout Tricks and Lab Experiments
-
Columns! Images! Colored boxes! This lens is my CSS sandbox, where I'm testing fancy layout tricks to make Squidoo lenses look great. As I figure out new CSS techniques, I'll share them with you, so you can use them on your lenses! This lens assumes...
-
CSS Codes: Easy Tutorial and Quick Reference Guide
-
SHORTCUTS! Jump to how-to section on: Margins and padding around paragraphs Indented first line Colors of text and paragraphs Squidoo color codes Borders of paragraphs Troubleshooting spacing glitches Aligning Text and Images Text formatting (bold,...
-
My Favourite CSS Tricks on Squidoo
-
The basic tools provided by Squidoo will do pretty much everything you need to get your content out to your audience. But sometimes you want to format it a little differently, and this is where inline CSS comes into play. Here I show some of the tric...
Do You Need HTML and CSS Help?
Feel free to leave your comments here. If you have a question, feel free to ask away.
If you like this lens, please make sure that you rate it
Do you want to create a lens like this one? Just click here to start writing your lens today.
-
Reply
- rtyndall rtyndall Nov 15, 2009 @ 7:29 pm
- Thanks for the great info. I have already utilized them. Have a look http://www.squidoo.com/MaryLand-Crabs
Something that I do and others can do it too. If you see alense that has a feature you like in regards to creating interesting stuff in modules, view the source code of the page and then scroll down to the particular article or module ans see how it was done. Most times you can figure it out. Then you can play with modifying it to suit your lens.
-
Reply
- Jewelsofawe Jewelsofawe Nov 14, 2009 @ 1:51 pm
- Lots of helpful stuff! I am going to lensroll this to my Tools mentor lens.
- Reply
-
Reply
- triathlontraining triathlontraining Nov 2, 2009 @ 11:18 am
- Another great lens Melissa! I'm glad to see that you're still active on Squidoo. :)
-
Reply
- Trekkiemelissa Trekkiemelissa Oct 28, 2009 @ 4:10 pm | in reply to foxx0102
- You have to move the class information to get it to work.
- Load More
Other Mentoring Lenses!!!
Each mentoring lens is run by a citizen squid. Feel free to check each and every one out. We all are here to help you.
-
More Module Mentoring
-
What makes Squidoo so fun are all the different modules. You could try out a new one every day of the year and still not get through all of them (unless you lump all those NBA widgets together as one). Whether you are creating new lenses or looking...
-
"Making your First Lens" Mentor
-
EVERYBODY can Squidoo! You can too! It might take you an afternoon to 'get the hang of it', but that afternoon can be LOTS of fun. You don't need to be an expert in anything 'internet-y' to be able to build a beautiful, useful and successful Squido...
-
Groups Mentor
-
What makes Squidoo different than other help-you-build-it websites? One feature is groups. Groups are, well, groups of lenses that have something in common. Want to get all the computer lenses together? Or the football lenses? Or the lenses about v...
-
Lens Promotion and Traffic Generating Strategies
-
One of the most often asked questions in the Squidu Forums is, "How do I get traffic to my lens?" The most obvious way to generate traffic to your lens is to make sure that it is search engine friendly. But that is a topic that deserves it...
-
Giant Squid Mentor
-
It's true. Squidoo is a great place to create web pages for free. But did you know that part of the magic of Squidoo also comes from the membership? Since Squidoo started in the fall of 2006, our lensmasters have continued to create great lenses and...
-
Image and Video Mentor
-
Welcome! I'm Linda Martin, your Image and Video Mentor here at Squidoo. I love working with images and know you will too once you have the right software and a few simple instructions. This lens lists sites where you can find free images on the web....
