Lesson 21 – Background Music

Now, I personally wouldn’t like having background music on my website, or any website that I may visit, because the chances are, I won’t like the music that is being played. Nevertheless, I’m sure some people would want this, so I’ll post this. Anyway, like the post before, Background is only available for IE users (I believe), but I’m not very clear on the subject, so I may be wrong. My coding hopefully won’t be wrong, but I suggest you do a Google search for some extra help, after reading this post. Here’s the code for it (note – it may be wrong):

<bgsound src=”yourmusicfile.mp3″ loop=’infinite’>

• There is no CSS code for background music, so you will just have to make do with a HTML one. Still, at least it’s a short one!
• I believe it can be almost any format, but you will need to host the file on an internet site. I can’t really help you with this, but I’m sure that another Google search can.
• And finally, the “loop=’infinite’” part, means that your background music will just be constantly repeated until the person leaves the page.  Just remove it, and your music will only play once. Simple.

That is it for now. I hope this post has helped you, as I have told you all that I know about this subject (which isn’t really much). And, to add to that, this is the end of the body section. I shall be moving on to other things now, which I haven’t decided yet. Bye-bye!

Lesson 20 – Formatting the Scrollbar

Firstly, I’m sorry it took ages for the next post to be written. Firstly, I just haven’t been finding the time to go on the computer with my busy (*cough*) schedule, but it’s also taken me ages to think of what to write about next. So, eventually, I’ve decided on formatting the scrollbar. However, this isn’t essential, for the following reason:

Basically, to put it simply, all web browsers are different. So Firefox can do this, and Internet Explorer (simply shortened to IE) can do that, and formatting the scrollbar will only be seen by people using the more recent versions of IE (Internet Explorer). Still, you may as well format it, so that the people who visit your webpage, that are using IE, can enjoy it. Here is the code you need:

body { scrollbar-face-color: #000000; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #CCCCCC; scrollbar-darkshadow-color: #999999; scrollbar-shadow-color: #333333; scrollbar-arrow-color: #AAAAAA; scrollbar-track-color: #BBBBBB; }

• It does seem like a lot of coding, that probably makes no sense to you whatsoever, and yes, the first time I saw this, I was completely confused, but once you know what each “scrollbar-….” is, then it’s quite simple.
• Customize the colours to whatever you like, using Hex Colours. Generally, you should give it colours to match the colour scheme of your page (ie: the background, text colours, etc).
• Still confused? I often go to this really good site, which has lots of generators for your CSS coding. Click here to go to a generator that makes the code above.

That’s all for now. I hope you enjoy the post about formatting the scrollbar. It may not be an essential part of your website, but at least it’s something you can do to make IE users extra special. Bye!

Lesson 19 – Padding

Alright, I won’t blame you to be a little taken aback from what the title of this post is. After all – padding? What could that mean? Well, basically, padding is very similar to margins, although it can be applied to more things than the body. I suggest you click here; it will explain the difference between margins and padding, much better than I would be able to! And finally, here is the CSS code for padding your page:

body { padding: 4px; }

• Yes, that literally is it. I don’t really have much to explain to you. You can increase or decrease the amount of pixels as much as you like, to suit your page.
• But now, you may come across the same problem which you had with margins. What if you want different padding for different sides of the page? Well, it has the same answer. Here is the code:

body { padding-top: 2px; padding-left: 6px; padding-right: 1px; padding-bottom: 3px; }

• Yes, so you just have padding-left, padding-right, etc, just the same as you had margin-left, margin-right, etc. Although amount of padding on each side is different, you generally may as well have the same amount of padding on the left and right, and the top and bottom.

But unlike margins, padding can be used on more things than just the body. And, it is very simple, too. Just add the snippets of code between the brackets ({}), to your CSS code for tables and images. Here is the code added to what I originally did, on their previous posts:

Tables

table { width: 300px; height: 300px; background-color: #FFFFCC; border: 1px solid; border-color: #000000; padding-top: 2px; padding-left: 6px; padding-right: 1px; padding-bottom: 3px; }

Images

img { border: 1px solid #000000; padding-top: 2px; padding-left: 6px; padding-right: 1px; padding-bottom: 3px; }

Yes, some of this may seem like an awful lot of coding, especially with the tables, but in reality it is not, because you already know what all of those things do, as well as padding too now. This shall be it for this post, and I hope it helps you code your Dreamsite. Bye!

Lesson 18 – Page Margins

Say if you do have that background image on your page, but you don’t want any of your text to go over, or under it. A quick way of sorting this, out, as well as helping you with other things too, is with the use of margins, for your page. This post shall tell you how to do it.

Firstly, you could just give your page a standard, full margin. Basically, this will give you a set margin from the top, bottom, left and right. When I say bottom, I mean the bottom of the page, where all of your content ends. I don’t mean the bottom of your web browser’s window. Try not to get this mixed up with the last post! :3 Anyway, here’s the code for you:

body { margin: 4px; }

• Yep, it really is that simple. All you need to do is type: “margin:”, followed by the amount of pixels you want in your margin. That’s in bold, for you to see.
• The margin I have showed you is only an example. Feel free to experiment with the amount. It could be four, it could be a thousand (although that would be dumb), or you could just have zero. See which one fits your page the best.

However, there are drawbacks from just doing this. If you were to use four pixels as your margin, it would be a four pixel margin on all sides of the page. So that’s the top, bottom, left and right. What if you don’t want that? What if you want certain margins to be smaller or bigger than others? Here’s the necessary code for that:

body { margin-top: 1px; margin-left: 4px; margin-right: 4px; margin-bottom: 1px; }

• So all you’ve really done is customize the margins more. Now you have a different margin for the left, right, top and bottom of the page. The bits in bold and colour are the things you need to add.
• Usually, the margin for the sides of the page, and the top and bottom should be the same. If you want, you can have no pixels for your margin, but you still should type that. It is generally best to have at least a one pixel margin, though.
• You don’t have to type them in that specific order which I did. They can go in any order, and you don’t have to have all of them (but again, I think you should).

And that’s the end of this post about margins. There is no “best margin” which you can use. I do suggest that you experiment with them until you find the right kind of margin for your page. Bye for now.

Lesson 17 – Non-Repeating Backgrounds

Sure, having a tiled background for your page is nice, but what if you don’t want it constantly and repetitively repeating? Not many of the top websites actually have that. This is how you do it (remember that the image URL is only an example one):

body { background: url(http://images.neopets.com/new_shopkeepers/t_62.gif) no-repeat; }

• There isn’t particularly much to add, compared to what you would do with a repeating background. All you do is simply type “no-repeat”, after the URL of your background image. Simple, but remember to always keep the dash between the words, or else it won’t work. The image will be in the top left of the page now, not repeated.

But, what if you don’t want your background image

body { background: url(http://images.neopets.com/new_shopkeepers/t_62.gif) no-repeat right bottom; }

• Now, after “no-repeat”, you have told the computer where on the page you want your background to go. In this case, it will be on the very right bottom of the page. Also, you could put: right top, right center, left bottom, left center, left top, top center, bottom center, or just center. Try experimenting with it, to get your background image wherever you want!

Now, this still might not be perfect for you. If your page’s content is long enough to make the window of you web browser (eg: Internet Explorer, Firefox, Netscape), allow you to scroll down, then your page background will only be visible when you scroll down. Sometimes, you might not want this. So, this is the answer:

body { background: url(http://images.neopets.com/new_shopkeepers/t_62.gif) fixed no-repeat right bottom; }

• If you do this, then your background will always be at the left bottom of the Window, not the page.
• However, be careful if you do choose to do that. You don’t want your text to overlap with your background,. so if you do do that, then try putting all of your text in a table, which isn’t wide enough to overlap with the background.

And that will be it for now. There are a couple more background image tricks, but then it gets trickier and trickier from then on. I hope this helps you (I know one person who it has helped, yes, you know who you are). Bye!

Copyright 2000-2007 Neopets, Inc. All Rights Reserved. Used With Permission

Lesson 16 – Tiled Image Backgrounds

Now that we can do coloured backgrounds, why don’t we make it a little more interesting. Using images as backgrounds can give a great effect to your page, but only if they work well. If the image isn’t the right one for a background, (or the right size), your page shall look terrible. Here is our sample image, which we shall once again use for examples:

Remember it? You should, from the images posts, that I wrote before. You don’t have to do the same type of coding, for using images as backgrounds, but you need to remember the bit about URL’s. Here is our code:

body { background: url(http://images.neopets.com/new_shopkeepers/t_62.gif); }

• Once again, the background image option goes in the body section of your CSS stylesheet.
• Basically, after the “url”, you need to place the URL of your image, in brackets. And remember to change “background-color”, to “background-image”, or else it won’t work.
• And finally, you do need a space after “background-image”, but NO space in between “url” and the brackets. I personally don’t understand why it works like this, but it does. Make sure you do that, or else the code won’t work, and your image won’t show up as a background.

There are lots of clever tricks that you can do with images as backgrounds, via CSS, but they are more advanced, so I will show you them later, unless I get some extra special requests. That is it for now, so bye-bye, I hope this post helps you!

Copyright 2000-2007 Neopets, Inc. All Rights Reserved. Used With Permission

Lesson 15 – Coloured Backgrounds

The first thing I’ll show you with the body, is how to give your images a nice, coloured background. This makes your pages a lot more colourful, very easily. Without coding this, the background will always be a plain white, unless you download some extra software, to programs like Mozilla Firefox, or at least something like that…

And, here is that important CSS coding, to give your page a solid background. Make sure you use those hex colours!

body { background-color: #333333; }

• The tag for the page’s background is just body. A lot of other things also go through this body tag, but for the moment, we’ll just be looking at the solid background colours.
• All you need to write, is “background-color:”. Very simple, isn’t it? After that, you just put your wanted hex code. In this case, the page would have an interesting grey background. Even if you want a plain white background, it still is best to write the hex code for it (#FFFFFF).

Important Note: Make sure that if you have a background colour such as black, or another dark colour, that any of your text-colours are black, or the same colour as your page background, or else you won’t be able to see your text! ^^;;

And that is it for now. Have fun giving your pages cool backgrounds!

Lesson 14 – The Body

Sorry about not posting lately, a lot of stuff has just been coming up. This almost means that this post will be short and sweet. But at least it means you don’t have to read a lot. (Yes, that was the best excuse I could come up with).

So anyway, this next section of posts will be about the body. It will cover many things about CSS, and a tiny bit about HTML (which is today). Basically, HTML wise, the body is where ALL of your HTML goes. The body does have it’s own tags, being: <body></body>. In between those, all of your HTML coding will go, but not your stylesheets, unless you are doing something a little different with stylesheets, but that’ll come later on.  Usually, when you use your HTML writing document, the body tags should come up automatically, (I know they do when using Dreamweaver). But if they don’t, just write them at the start of your code, then put everything HTML-wise in between them, and forget about it!

And, that is it. Sorry about the short post, but I will tell you this: The next two posts will teach a very important, and sometimes fun technique, which can make your pages look much better than normally. The only hint I’ll give you, is that it has something to do with a part of the page that is always white, unless formatted. Bye-bye for now!