Using the 960 grid system

I have to create a single-page website using the 960 grid system.
I know very little about html and css, so excuse me for maybe asking stupid questions.

1). Going by this rough sketch, under what grid/how would I implement the six images on the right hand side?

 Spoiler

2). Do I actually code the image on the css file..or is there something I need to do to the html file (as in, a div or something)?

3). Can images in seperate grids overlap each other?

I've tried reading over some sites that explain the grid system, and I still don't understand how to use it. I feel retarded and the teacher goes over things way too fast ;-;

I learned HTML and CSS...by pineappleing around, so I do not know what this 960 grid system is.

In a nutshell, CSS is used for styling. CSS can change image size, text color, font, placement, effects, and pretty much anything else having to do with how the page looks.

HTML is used for inserting text, images, embeds, and other things into a page. You would embed your images with HTML, and move them around with CSS.

If you feel like doing some extracurricular learning,

http://www.codecademy.com/tracks/web

http://www.w3schools.com/css/
http://www.w3schools.com/html/default.asp

that should help.

Edit: I just looked up the 960 grid system, thats not so bad. It looks like a plain old framework. The grid system will make it easier to make a page rather than harder by allowing you to use their premade CSS.

Okay, adding on to this, I have the set of "tabs" as a grouped png file (http://puu.sh/24DQT).

The instructor says I should make it a background if I'm going to use it as a group- which if I'm thinking properly, doesn't require the grid system.
However, he mentioned something that I'd need to do to the code similar to this site:

 Spoiler

fff I hate this class and not being able to just google and find what I need to!

So I've got the above problem taken care of, now I have another issue...

The issue I'm having is this is what I'd like those green boxes to look like, with the text overlayed like that:

 Spoiler

Right now it looks like this:

 Spoiler

I can't just adjust the margins due to how the teacher wants me to code it. I don't really know how to explain it but here is the html and css:

 Spoiler

 Spoiler

He told me just add the text under the proper div tags, but upon doing so, I get the result shown in the second image.
Help please?

Adjust the padding?

Adjust the padding?

^

You'll have to add padding into the CSS code under the "tabbg-" class.

To get the centered text effect, you'll also need to add in "text-align".