This site contains an Introduction to SDL Video. You'll find the information there to properly set pixels.
I also highly recommend you download the official documentation from the SDL website: http://www.libsdl.org/docs.php.
The code on the site you linked to is quite hack-ish, and not very clear.
For one thing, it's hard-coded only to work with specific resolutions at 32 bits-per-pixel color depth. The versions of getpixel() and putpixel() that are in the first link are safer (but don't forget to SDL_LockSurface the screen first, and SDL_UnlockSurface it afterwards).
You don't need to understand every detail of how these functions work in order to use SDL effectively. Basically they're providing you an interface to work directly with the pixels, without needing to worry about the low-level stuff, like memory alignment and bytes-per-pixel, etc.
But maybe you should play a little with SDL_FillRect() and SDL_BlitSurface() to get used to SDL first :)
But, here's some background info that may help interpreting the code:
You probably know that an SDL_Surface holds image data. It can also provide access to the screen. Raw access to pixels can be obtained using SDL_Surface's pixels member, after locking the surface. You can treat pixels as an array of bytes.
One would assume the size of the pixels data array is just the Width * Height * BytesPerPixel, but it's not. It's Pitch * Height. The pitch is the length of one scanline. Why would the length of one line not be Width * BytesPerPixel?
For one thing, scanlines are aligned to a 4-byte boundary for efficiency reasons. Secondly, if you request an irregular resolution for a hardware surface, SDL will give you a different resolution, with the width set to one you requested, but using the pitch of the real video surface.
So you must use pitch when dealing with the raw pixel data.