In the first part of this guide, we explored the very basics of HTML and CSS. This guide will list several common codes within HTML and CSS, and show you how to use them.

HTML - Creating a Link

Linking is a common aspect of HTML, and can come in very useful if you don't want to be just copy and pasting the address all the time. A link is essentially just a clickable piece of text which will take you from one page to another. This is how it's used:

<a href="http://www.********.com/">link to ********</a>

These are a little bit more complicated than the codes we looked at in the last tutorial.
The "href" part simply means hypertext reference - like a referral. As the name suggests, you go from one page to another by including the URL of the page that you want to go to. The URL is basically the address.
Your link must be between quotes. HTML can be very fussy if you forget or mismatch quotes, so be sure to include them. The name of your link then comes between the two tags.

CSS - Decorating a Link

Decorating links can be quite fun, in all honesty. As with the codes we used when examining how to make your text bold, the same can be done for links - with a few extras:

<style>
a:link, a:active{font-color:blue;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-decoration:none}
</style>

Text-decoration is a great piece of coding which can remove that ugly underline from any links you use.
There's more to decorating links than just this, though. The code above will simply change the appearance of a default link - but after visiting a page, it'll just turn a really ugly, default colour. This is how you can change it:

<style>
a:link, a:active, a:visited{font-color:blue;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-decoration:none}
</style>

This will make any active links (links you've visited) the same colour as it was before you visited it. Remember to separate any extra names by a comma, otherwise you'll just end up with a broken code.
You can also change the colour of the link when you hover over it, by adding an extra set of coding between your style tags:

<style>
a:hover{font-color:green;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-decoration:none}
</style>

Any links you hover over will now turn green. You can still change the size, font family etc too, or even add an underline when people hover over the link.


HTML - Default Text Techniques

Like with links, you can also change the way your default text looks:
<font face="verdana" size="2" color="blue">
text
</font>

The issue with these is that when you're altering the size, you're required to use smaller numbers - like with the font sizes here on the forums.


CSS - Default Text Techniques


You can also change your default text with CSS. It's pretty much the same as the CSS link code above, with one small difference:

<style>
body{font-color:green;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-decoration:none}
</style>

This will simply change all of the text in your web page's body (which will just change everything by default, excluding links or anything else you've assigned custom techniques to) - no need for HTML either!


HTML & CSS - Div Boxes

Div boxes are great for adding text in custom places when creating a web page. Without them, your text is just going to be flying off to either edge of the screen, not looking tidy or neat at all.
If you want to be using HTML alone, this is what you should do:

<div style="position:absolute">
text
</div>

The style property allows you to position your div box anywhere on the page - you could have it halfway down the page if you liked, or all the way to the left. This, however, needs to be paired with a few additional codes:

<div style="position:absolute" top="100px" left="100px">
text
</div>

By using the two new codes, your div box will now be 100 pixels from the top, and 100 pixels from the left of the page. If you remove the position code, it will end up back in the very top left of the page.
You can also assign a few extras to your div box:

<div style="position:absolute" top="100px" left="100px" width="300px" height="150px" border="3px" overflow="auto">
text
</div>

You'll now have a div box which is 300 pixels in width, 150 pixels in height, with a border of 3 pixels surrounding it. With the overflow code, it means that your text will automatically be moved to the next line once it has exceeded the 300 pixels in width.

Note that when you're using HTML, you don't necessarily need to add the "px" part after the number. It's mandatory in CSS, though.

*

We'll now be looking at the CSS method of creating div boxes. Some HTML will be required, but it can be kept to a minimum with the following:

<style>
#divbox{position:absolute;
top:100px;
left:100px;
width:300px;
height:150px;
border:3px;
overflow:auto;}
</style>

It's very similar to the HTML code we just used, but with a little bit of a difference.
You'll be required to give your div an ID - it can be anything you like, providing it isn't already associated with an already existing CSS code (naming it #b for example won't work, because b is used for making text bold). I've chosen "#divbox" for mine, because it's an easy one to remember.
After assigning your div an ID, you'll need to use HTML to put the div into action:

<div id="divbox">
text
</div>

See how much neater that is? No need to include the # in the HTML by the way - that's for the CSS only.


HTML - Using Images

This is the default image code for adding images to a web page:

<img src="http://********.com/forum/customavatars/avatar44975_22.gif">

That's the link to my current ******** avatar.
It's a very simple code, when it's on it's own. Adding extras gets a little bit complicated.

<img src="http://********.com/forum/customavatars/avatar44975_22.gif" width="147px" height="132px">

Because the size of my ******** avatar is 147 pixels wide and 132 pixels high, I made sure that I included the correct width and height in the code. If you make the numbers too small, your image will appear smaller - if you make the numbers too big, your image will appear stretched.
You can also use the top and left codes, just like you did with the div.

CSS - Using Images

Sometimes, you'll be required to assign an image width and height when you're trying to add images to a web page, as well as position it. This can be done with HTML alone, but as always, I find CSS much neater. Both codes will be included regardless.
You'll need to include an ID for this code, as you did with the div. I've chosen "img" for mine:

#img{
position:absolute;
top:100px;
left:100px;
width:147px;
height:132px;
border:0px}


Here's your new and improved HTML code:

<img src="http://********.com/forum/customavatars/avatar44975_22.gif" id="img">

It's so much tidier this way!


CSS - Backgrounds

I currently don't know of a way to use backgrounds via HTML as always though, CSS would be better to use.
This code always looks a little bit confusing at first - if you're using an image for your background at least. I'll explain how to use both an image background, and a solid colour background.

body{background:blue}

Like with the default text code, you're required to use the body tag for your background. This is the simpler of the two background codes, for using a solid colour.
If you want to use an image, you should be using the following:

body{background: url((you need an account to see links)) fixed}

In situations like these, you must use rounded brackets within the curly brackets. If you use another set of curly brackets, you'll end up with a mess.
At the end, you can see the word "fixed" - this will just keep your background in place, so it won't move as you scroll down. If you'd prefer the background to scroll down, just remove where it says "fixed".
You can also tell the code not to repeat the background, or position it in the bottom right corner (or bottom left - any corner you want). No need for the semi-colons here!

body{background: url((you need an account to see links)) fixed no-repeat bottom right}


HTML - Line Breaks

Another lovely, simple code which acts as though you've hit enter in your text. All you have to do is put it at the end of the sentence that you want the line break, like so:

text<br>
text<br>

Your finished result will look like this:

text
text

For bigger breaks, just add two codes instead of one. Simple!


Putting It Together

This is what your finished code should look like, assuming you've been using HTML to a minimum:

<style>
a:link, a:active, a:visited{font-color:blue;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-decoration:none}

a:hover{font-color:green;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-decoration:none}

body{font-color:green;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-decoration:none}

#divbox{position:absolute;
top:100px;
left:100px;
width:300px;
height:150px;
border:3px;
overflow:auto;}

#img{position:absolute;
top:100px;
left:100px;
width:147px;
height:132px;
border:0px}

body{background: url((you need an account to see links)) fixed no-repeat bottom right}
</style>

<div id="divbox">

<a href="http://www.********.com/">link to ********</a><br><br>

<img src="http://********.com/forum/customavatars/avatar44975_22.gif" id="img"><br><br>

Any text you'd like to include can go here.

</div>

*

That's the end of part 2. Part 3 will look at coding a basic Neopets userlookup