Lesson 27 – Positioning Your Div Box

So, now you have your Div boxes. Great! You’ve made yourself a simple layout now. But the trouble is, you can only put these boxes on the far left, far right and centre of your page. This is where positioning comes in. Now you can put your Div boxes, wherever you want them. But be careful – this can go very wrong… Anyway, let’s start with the code:

#IDNAMEGOESHERE { border: 2px groove #3399DD; font: 12px Arial; text-indent: 3px; height: 200px; width: 300px; overflow: auto; position: absolute; left: 100px; right: 100px; top: 100px; bottom: 100px; }

• Woah, that’s a lot of coding, isn’t it. Well don’t worry, you already know most of it, from here, so you only need to concentrate on the text that is coloured.
• So what is the coloured text? Basically, that’s what will position your Div box wherever you want it, and you don’t even need all of it
• The “position: absolute;” part, tells the web browser that your Div box will always be in a certain place on the page. For example, it could be 100 pixels from the left of the window, and 100 pixels from the top of the window.
• You can customize everything coloured, except for the “position: absolute;” part (I’ll get onto that in a later post). But you only need to use two of the options (i.e: top & left, right & bottom).
• Make sure that when you position your boxe, they don’t conflict with your padding or margins, or cover up some other text on the page, because it looms messy and unprofessional.
• But finally, the most important tip: don’t position your Div boxes just for your computer, and your computer alone – the chances are, your layout will work for your computer, and your computer alone. Be aware that some people will have different screen resolutions to you.

And that’s it for now. If you’ve forgotten the HTML code for your Div box, then click here. (The positioning will not affect this code). Bye for now, and have fun positioning your Div boxes. (I know that sounds really sad…)

Lesson 26 – ID’s (Part Two)

I’m going to skip right to the chase here, for some reason. As well as all kinds of text, ID’s can be applied to tables, divs, and images, as well (there is some really, really cool stuff you can do with images, as well, but I can’t do them myself). Here’s the CSS code for you, for images:

#IDNAMEGOESHERE { border: 2px groove #3399DD; padding: 3px; }

• Yeah, unfortunately, there’s not much I can really do with images, to be honest. Check back to the borders and images post, for reference on how to customize these.
• Remember to put a new ID for your image, as well. And here is the HTML code for it:

<img src=”yourimageswebaddressgoeshere” id=”IDNAMEGOESHERE”>

• Remember to change the ID name for your image in the HTML, as well as it’s URL, or it won’t work for you.

Unlike the images, I can do a lot more with Divs and Tables. Now, a Div box is like a table, except it only has one column, and it is easier to position on your page. You’re less likely to get in a mess, putting Divs in Divs, than Tables in Tables. Here is some stuff you can put in their ID’s CSS:

#IDNAMEGOESHERE { border: 2px groove #3399DD; font: 12px Arial; text-indent: 3px; height: 200px; width: 300px; overflow: auto; }

• That is a lot of stuff to look at, isn’t it. Well, most of it is stuff that you’ve done before, like the border of your Div or Table, the Text Indent, Height, and Width.
• Now, a good thing about Divs, is that you can specify the font which you want in your Div, and only in your Div. However, you may want to use a <p> tag for your text inside Divs instead, in case you want to use italic, bold, or fancy text in your Divs (excluding headers).
• Then, there’s the “overflow: auto;”, bit. Sounds technical, doesn’t it? Don’t worry. Basically, if your text inside your Table or Div ends up being longer than 200 pixels of height, then it will go into ’scrolling’. Scrolling just means that you’ll be able to scroll in your little box, like you can on most webpages.
• Here’s the HTML code for these two:

<table id=”IDNAMEGOESHERE”><tr><td>Whatever you want inside your little box (text, images, etc) goes here. Remember to code the right amount of columns and rows you want!</td></tr></table>

<div id=”IDNAMEGOESHERE”>Whatever you want inside your little box (text, images, etc) goes here.</div>

---

Now, you may not think it, but that was a very valuable part of making your own webpage layout. You’ve just learned how to make a Div box, and how to specify it’s height and width. You even know how to get it to scroll for you! Have fun with your Images, Divs and Tables!

Lesson 25 – ID’s (Part One)

Yeah, so I’ve spent a while trying to write a post for AJCann, but I then eventually decided that it would be too difficult to explain it in a post, until I’ve covered some other stuff. So basically – I’ve wasted a lot of time. A week or so, to be more precise. But anyway, on to a very important post for you all.

So now you have quite a lot of tags, don’t you? You have your <p> tags, your strikethroughs, your bold text, and don’t forget your links, either. Well, what if you want two kinds of these sort of tags, for instance. What if you want certain text for the left side of your page, and certain text for the other side of the page? (I know, that probably sounds a little weird, but it could happen). That’s where ID’s come in. ID’s can give you two kinds of <p> tag, or header, or whatever kind of text you like. Here’s a code you would use:

#IDNAMEGOESHERE { font: 12px Courier; color: #663399; text-align: left; text-indent: 1px; }

• In case you were wondering, the “#”, which I have put in bold, is something you always need to put before your ID name (which you can change to whatever you want, by the way).That tells the web browser, reading your CSS, that the tag you’ve just formatted is an ID.
• Change the the height, colour, and the font itself to whatever you want. It’s all customizable to whatever you like.
• Due to the fact that you now know about aligning divs, you do not actually need to align your text in the CSS, but it can be quite helpful, depending on the situation you’re in. And you never actually needed the text-indent anyway, so use it if you like.

So now you have your nicely named ID (I hope it has a better name than my one does). The question you’ll probably ask yourself now, is how do you apply this to your text? Actually, it’s very simple. This is all you need to do:

<p id=”IDNAMEGOESHERE“>Text goes here.</p>

• That is, literally, all there is to it on the HTML side. Remember to put the ID name you chose, in between the “”, or else it won’t work!
• Also, you can change it from the <p> tag to what ever text tag you want. It’s really that simple! All you’ll have to do, is replace the two ‘p’s with the name of the tag you desire.

And that’s it for now. But for any of you wondering, this is what the text with the applied ID would actually look like!

Lesson 24 – A Simple Div

Divs are actually used all over the internet. They are a brilliant way of doing many things, and are probably the most popular way of formatting a webpage, (aside from flash perhaps). But flash can get very annoying, and it is very difficult to code. I would show you how to code it, but I’d need someone to show me how, first!

Probably the most simple div I can show you, is a div that will align things to the left, or right, or center. They can also be used to align ‘justify’, like on Microsoft Word, but this only works with text. The rest will work with tables, paragraphs, images, almost anything you can think of. It does save a lot of time, because then you don’t have to put ‘<p align=”center”>’, for instance, all of the time. And here is the code for an aligning div:

<div align=”center“>Anything you want to be aligned center, should go here.</div>

• Pretty self-explanatory, isn’t it? The text in bold, (in between the inverted commas), can be changed to left, right, or justify (only for text, though), to suit you.

These are really useful to align what you want. I generally find myself using them to align several things to the same place, so that I can save myself some typing (yeah, I’m lazy). So anyway, that’s enough for simple divs. Bye.

Lesson 22 – Linking to Your Stylesheet

It may seem a little confusing, the title, but basically this post is about how to set up your CSS for your page. It’s something I have apparently missed out on showing you, which is a little embarrassing. But anyway, on we go. The code required to do this, needs to be placed in the head section of every page in your website. Generally, if you are making a website, you can just copy and paste a document which includes the layout of your page, along with the link to your CSS Stylesheet, on each new page you write, before you start. If you can’t find a head section on your page, look for the tags: <head></head>, and if necessary, write your own. Here’s the all important code:

<link href=”yourcssfilegoeshere.css” rel=”stylesheet” type=”text/css”>

• That’s it really. Make sure the code goes in between those head tags, and it’ll work fine.
• However, if you do get your website set up on the internet, it is a little different. What you need to do, is copy and paste your CSS Stylesheet onto a page onto your website. Here is the updated code you need:

<link href=”http://theurlofyourstylesheet.css” rel=”stylesheet” type=”text/css”>

• As you can see, there isn’t much of a difference. Instead of linking to a file which is on your computer, and only your computer, you’ve linked to a stylesheet that’s on the internet, which everyone can see, if they want to.

That’s the end of this much-needed post. I apologize for forgetting how to show this to you, but, I have now. In case you haven’t noticed, CSSBytes has finally reached a thousand hits and beyond! Yay! I won’t be writing any posts until next Wednesday or so, because I’ll be on a short break. Click here for a little more information. Bye.

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 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!

Lesson 11 – Tables

Okay. I guess I’ll have to admit that I’ve been guilt of a little procrastination up to this post. It was also partly due to the fact that I was trying to work out what to show next, because there are so many things I can show, and now that the choices are growing, it’s getting harder deciding what to pick next. But, anyway:

For a beginner with HTML and CSS, tables can be a great way to set out pages. But in general, it is looked down upon in the CSS community. Also, it can get a bit tricky, if you want to put tables inside of tables, and so on and so forth. Nevertheless, tables are still very useful, so you will need to know how to write them. I’ll show you it in HTML today. Here we go:

<table border=”1″ width=”100%”> <tr> <td><p>Text Here!</p></td> </tr> </table>

• Basically, the table is made up of three main parts – Table, Tr and Td.
• The Table tag should basically start an end your table. Anything you want inside your table should go inside these tags.
• Next, comes Tr. This gives your table a row. If you want more than one row in your table, close the Tr tag, (</tr>), then just make a new one. Very easy.
• As one might expect, the Td tags give your table columns. ALL OF the writing inside your table should be between one set of Td tags. Once again, once you want to make another column, close the Td tag (</td>), and make another one. Be careful though. You’ll want your new column to be in the correct row. Make sure that your column is in between the right Tr tags.
• The border at this point is very simple, without CSS. In this case, it’s a pretty boring 1 pixel wide, slightly shadowed border. You’ll learn how to change that in the next CSSBytes  post. Also, the 1 inside the speech marks is completely customizable.
• And finally, you’ll need to specify the width off the table. In the example, I have put 100%. This means that your table will take up 100% of the webpage. You can change this to whatever you desire. Alternatively, what you can do is replace the 100%, width __px (put a number where the underscores are). This gives the table an exact width. Beware! Don’;t set it just to fit your computer screen perfectly, because other people’s screens might me bigger or smaller.

And that’s it for now. Tables are another valuable technique for HTML, vital for creating your Dreamsite. Goodbye!

Lesson 9 – Images & HTML

Images are definitely a way to brighten up your webpage. They can be fun, colourful, or whatever you want them to be. This is an example of an image, from a great site called: Neopets.com. for it now it if you want.

 

 

About Images

All images have to come from somewhere, right? So how do people get images onto their websites (such as the one above). Basically, all images have their own URL, or website address, on something that is called an image server. In this case, the URL for this image is: http://images.neopets.com/new_shopkeepers/t_62.gif. It might seem quite complicated, but this is just the system that the website happens to use. Anyway, the image’s URL all comes into use when putting one on your site.

 

Getting Images Onto Your Site

There are two way of doing this. You can either go to many websites known as Image Hosting websites. These, basically give you a place to put your images, giving them their own URL. They don’t usually cost money either, and they shouldn’t need too. Two great examples of these are , and (what I use), but remember to read the terms and conditions for both of them! Or, your website might have an image server of it’s own, where you can just place your images.

 

And Finally, The HTML…

I know this is probably what you’ve been waiting for, so I won’t be stalling it any longer. Basically, all images use the <img> tag. As you can tell, “img” is just short for image. The interesting thing about this tag, though, is the fact that it doesn’t close. It is also similar to the tags for links, because you can’t just say “img”, because then the computer doesn’t know what image to display. This is the code for putting up the image that I have:

<img src=”http://images.neopets.com/new_shopkeepers/t_62.gif”>

• Notice how you can see the Image’s URL in that code. Also,you can see that there is no point closing the code, because there is nothing to close in reality.
• For image

Extra Stuff (Optional)

Sometimes you might want to put a border around your image, to make it look snappier, or more defined. This is very simple. Here is the code (which has been extended a little) for it:

<img src=”http://images.neopets.com/pets/happy/scorchio_darigan_baby.gif” border=”1″>

• So you put border=”1″after the image’s URL, but before the end of the tag. This means that your images will have a border, in this case it will just be 1 pixel thick, but you can change the number to make the border thicker or thinner.
• Below, is what the image would look like if you used this code:

 

As you can tell, borders don’t always look right around images, like this one for example. They can sometimes be useful though, if your page has a different background colour to your image, so the border will prevent them from clashing together.

One other thing that you can do, is re-size your image. Firstly, you need to know what size your image is in the first place. If you can’t remember, then all you have to do is open the image in your web browser (as long as you can remember the URL), or open it in an application like, Paint, and check the size. Now that you know the size of the image, it becomes easy to change it. In this case, our image is 150 pixels x 150 pixels. This is how you would change it:

<img src=”http://images.neopets.com/pets/happy/scorchio_darigan_baby.gif” width=”75px” height=”75px”>

• Like when you formatted a border, you just placed your text after the image’s URL. The image size will usually be measured in pixels, so put “px” after your number, to tell the computer that it is in pixels.
• Very importantly, always keep the proportions on your image the same, or else it will look absolutely terrible. In this case, both measurements were the same, so it wasn’t too hard. The only exception to this would be if your image was warped to start with.
• This is what your image would look like:

And that is it for now. There is more that you can do with your images, but again,it is more advanced. But for now, have fun with your images!

Edit: Sorry if this post came out  strangely. I have been wrestling with a bug on WordPress to get it fixed.

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

Lesson 8 – Headers

Using bold text is good up to a point, but of course is does come to a limit. As well as that, all pages do usually need a title. Fairly surprisingly, there are actually 6 headers, but you are never actually going to use that many (most of the time), so you don’t actually actually need to format that many, either.

HTML

Basically, the headers are just called Header 1, Header 2, Header 3, Header 4, Header 5 and Header 6. But these would be quite long tags to write, so they have just been shortened to <h1></h1>, <h2></h2> and so on to make it quicker. That is really allyou need to know about headers, HTML wise, unless you want it a little more complicated…

CSS

At this early stage of CSS, formatting headers is quite easy, although they usually don’t look too interesting, until you start learning the more advanced stuff (which you will get to). A good tip for headers is to make them match your page’s colour scheme. So a quite blue page could have gray headers, or a brown page could have green or yellow headers. Remember to use those hex codes! This is an example of formatting a simple header:

h1 { color: #FF0000; text-align: center; text-transform: uppercase; text-decoration: underline; font: bold 18px Courier, Arial, Verdana, Helvetica, Geneva, sans-serif; }

• This would make a nice, simple header, perfect for perhaps, a purple webpage, because the header colour (#FF0000) is red. Change this part depending on the colour scheme of your page.
• The header would be aligned to the center of the page, but you can alter it, so that your headers are on the left, or right part of the page. It’s your choice.
• Text Decoration has returned yet again! Not all headers are (or should necessarily be) underlined. It does seem to depend on your page, but these days, not many headers are underlined. If you haven’t noticed, none of the headers on this page are underlined.
• The font is nice and big (18 pixels or just “px” for short). Also, the font itself is Courier, which looks quite like a sort of typewriter font, if you’ve never seen it before. This would be great for a FBI style page (just a suggestion!).
• Finally, it is something new. Text Transform is an option in CSS that will change all of the characters in to a certain case. In this instance, it’s uppercase, so all of the letters in the header will be in CAPITALS. Putting “lowercase” there does the opposite. This is optional though.

When you start to format more of your headers (which you probably should do, because it’s nice to have more than one type of header on a page) you should usually make sure that your font gets gradually smaller. So your Header 1, or <h1></h1> will be the largest, and Header 6, or <h6></h6> will be the smallest. Personally, I often make my Header 1 the grand title of the page, then Header 2 slightly smaller, defining sections, and so on. There is loads that you can do with headers, and they are quite fun to format. But these can get a bit complicated, so I shall noty teach them to you now. Happy CSS’in!