HTML and CSS

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

HTML Codes you need to know

Bold - <b>

Underline - <u>

Italics - <i>

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>

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
<p style="background:#colorcode">
For black background you would get: <p style="background:#000000">

Instead of using #colorcode, you can replace it with the colorname instead so you would get <p style="Background:red"> for red.

For text its simular.
<p style="color:#colorcode">
So if you want white text, you would do this:<p style="color:#ffffff"> White text here. </p>

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 <p style="background:red"> 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.

To add font size, you would have to do this: <p style="border: dotted 2px #000000;width:500px;font-size: 20px">

Please note that I added in is ;font-size: 20px

If you want to change the default font you would need to add this;font-family: Courier

If you want a different font, just change where it says Courier to whatever the font name you want to change to like Arial.

Now I am sure that you have seen it where there is one letter at the beginning of a sentence happens to be bigger but how do you accomplish that? Here is how: <b style="font-size: 100px; float: left; color: black; line-height: 70px; padding-top: 2px; font-family: times new roman">Your Letter Here</b>

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.

Now what did I do to get this image into this box? This is what I did. <p style="background-image:url(http://i302.photobucket.com/albums/nn98/trekkieamber/plain5.png);width:500px;border: dotted 2px #000000; padding: 5px;">

Please note that is the exact address of the image that I am using. Your webaddress would be something different depending on the image that you are using.

To have the text or boxes go to right or left you need to do this: <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

" - &quot;
& - &amp;
< - &lt;
> - &gt;
© - &copy;
® - &reg;