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 23 – More :Hover…

Yes, so if you’ve read an earlier post, showing you about hyperlinks that go on your page, you should already be familiar with the :hover, and what it does. If not, then basically, it’s what something (in the previous post’s case it was a link) will look like, whilst you hover over it with your mouse. But, this feature isn’t just for links. It can be used for many other things too, such as the following:

Text

Yes, so basically, any type of text has a :hover feature. This means normal text (<p>), bold, italic, underlined, strikethrough, overline, links, headers and simply any type of text, including any tags which you might make up yourself!This is the code you need for it:

p { font: 10px Arial; color: #000000; } p:hover { font: bold 15px Times; color: #FFCC99; }

• This was just an example. But anyway, see the bit in bold? That’s what you add to any of the tags mentioned above, if you want them to have a :hover attribute.
• You can also use this to fool people into thinking that piece of normal text is actually a link. They’ll press on it, and obviously, nothing will happen. That’s for all of you mean people out there!

Images and Tables

Those two are generally the more popular tags to have a :hover attribute, especially the images. It will be a very simple hover, at this stage, but you can do some very fancy ones. Here is the code for them:

img/table{ border: 1px solid; color: #000000; }img/table:hover { border: 27px groove; color: #FFCC99; }

• Of course, unlike with the text, your tables and images will have their borders edited instead. What I have showed is a little extreme, from one to twenty seven pixels, but it’s just an example. Try out both of the examples if you like!

That will be it for now. You don’t necessarily have to have the :hover attribute on any of your text whatsoever (not even the links), but it is a nice was to spruce up your text. Until later, ciao!

Lesson 13 – Borders

Oh dear, I hope this post won’t be too unlucky… So anyway, like I promised (in riddle form, at least), here is the CSS guide to borders. There really is a lot of stuff which borders can be used for. In this case, the only real examples will be fore tables. Here we go:

There are quite a few different type of borders, such as…

Solid

As explained before, the solid border is just your normal, standard border, with no gaps, or anything clever, just a solid, straight line. Usually, most of the borders you find on websites are like this.

Dashed

Unlike the solid border, a dashed border has gaps in it, being dashed and all. If used correctly, with the right colours, dashed borders can look pretty good, but if you mess up, they look terrible.

Dotted

This one is fairly similar to the dashed border in reality. The only real difference, is that there are slightly larger gaps between the lines of border, and the lines (or dots) are smaller.

Double

Wow, that’s three borders in a row that begin with the letter “D”. (I really need to get out more…) Anyway, just like the name suggests, the double border has two borders instead of one. Those borders are the equivalent of a solid border, in case you were wondering, so you get two solid borders.

Groove

To be honest, I haven’t quite worked out what this border really is myself. It looks pretty similar to the solid border, except that it has a little shadow, and the border doesn’t meet up at the end, which I don’t remotely understand at all.

Inset

This one and the next one are really cool. Basically, what inset does, is gave your table some dark shadow on the top and left borders, and lighter shadow on the bottom and right. It’s quite similar to the Bevel & Emboss effect, often used in applications such as Adobe Photoshop, or Paint.

Outset

The next super-cool one, is outset. As you might’ve expected, this is just the opposite to the inset border. The bottom and right borders get the darker shadow, whilst the the top and left borders get the lighter shadow.

Ridge

Ridge makes the border look like it has a ridge in it, basically. This one can be used especially well for a 3D looking page, but you do need thicker borders to make it work well.

- – - – - – - – - – -

Firstly, the line above wasn’t a dashed border of any kind, it was just handwritten (or typed) dashes with sapces in the middle. So anyway, this is a reminder of how to format those borders.

table { width: 300px; height: 300px; background-color: #FFFFCC; border: 1px solid; border-color: #000000; }

• The bits highlighted in bold and a different colour are the things that you can customize, from this post. Firstly, there’s the style of border. Change the thickness, and type of border (listed above), to whatever you want. Next, you can change the border colour to whatever you desire, but it generally helps if your border works well with the table fill colour, (if it has one), and page colour scheme.

That’s all for now. I have to apologize for the lack of examples, but it’s something that I will work on getting you. Have fun with all of those tables and borders!

Lesson 12 – Formatting Tables

There really is a bucket load of things you can do with tables. Most of these things are quite hard, or take a long time to write with HTML, so that’s where our good old friends, CSS comes in. You don’t need to use all of these options, but they really a great way to jazz up your webpage. This is the CSS code, which will actually format the table it is in (well, almost):

table { width: 300px; height: 300px; background-color: #FFFFCC; border: 1px solid; border-color: #000000; }

• Firstly, we have the table tag. You can put Td and Tr in, but then it does start to become slightly more complicated.
• Next, we have the width and height. The table the CSS is in, is not 3oopx by 300px, but this is just an example of what you could do, but you don’t have to even put the width and height in. The good thing about this is, is that if you surpass the width with your text, it goes onto the next line. Then, if all of your text is longer than the table, it will go into scrolling, like the bar on the side of your page (on the left).
• Now, you come across the background color. The #FFFFCC really is that light yellow colour, using hex codes. Remember to use those hex colour codes. This is completely customizable, so you can put whatever colours you want there. From grey to orange!
• Another fun bit is the border. You probably remember a bit about borders from the Images post, don’t you? So, this table would have a solid one pixel border. But, now there is another thing you can add.
• That is border colour! Instead of all of your borders being a standard black, they can be any colour you want (using hex codes).You can add this little snippet to your images, as well!

And that’s it for now. It seemed like quite a short post today, for some reason. Anyway, this time I shall give you a little sneak peak about the next post – it has something to do with one of the elements brushed up upon in this post, and the images post. 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 10 – Images & CSS

Okay. I apologize for the late post. This is all because I have been wrestling with the little bug. Fortunately, I’ve got rid of it now, so I’m not going to be held up any longer by it. Anyway, onto the lesson:

Unfortunately, I must admit, that I am pretty when it comes to doing images and all that. I can’t draw them (on the computer, or by hand, it doesn’t matter – either way I’m rubbish)! And we know that you can’t just take someone else’s image without permission, no matter how much you want it. And sometimes it’s hard to get permission. To add to that, I’m crap at formatting them with CSS too. Usually when I use images, I end up having to resort to just HTML, which is a bit embarrassing. Because of this, I’m only going to be able to teach you one CSS trick, with images.

img { border: 1px solid #000000 }

• The tag is called “img” seeing as when you use HTML, you put <”img” src…>. Again, img is short for image.
• When formatting borders with CSS, you can have a lot more fun than with HTML. You can:
• Customize the hex colour code to whichever one you desire.
• Change the border thickness from 1px (one pixel), to whatever you like.
• And, you can change the type of border too. Two different examples of borders are solid, (the one we are using, which is just well… solid), and dashed, (which is well… a dashed border).

That’s it for now. I hope you have more luck creating and formatting images than I do…

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