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 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 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 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 4 – Hex Colours V Colour Names

Colours. You have to admit, this is one of the funnest parts of website coding, or at least it is in my view, apart from seeing your website in action. Anyway, this post is all about how your computer classifies colours.

So what are Hex Colours? Well, for a start, Hex is actually short for Hexadecimal. HTML uses Hexadecimal colour codes, instead of actually just saying: “Red”, “Blue”, or “Green” for example, for a number of reasons, which I will explain to you now.

1. It may be easier just saying colour names, and HTML does allow you to do so, but it does make more sense to use the Hex Codes. If you were to use just colour names, then you quickly reach a problem. What exactly is the shade of red. Many people use HTML, meaning that many people have different interpretations of what a standard red should be. With Hex Codes, the standard red will always be “#FF0000″. Therefore a lot of fairly pointless and time-consuming arguments are prevented.
2. Hexadecimal Codes are what you might call a Universal Language. In the United States of America, black is “#000000″, in England, it is still “#000000″, in Russia, I believe it is the same, as well as France and Germany. It is the same in any country that uses the same symbols for letters and numbers as the Hexadecimal Codes are formatted on.
3. In the end, you are going to run out of colour names, you have to admit. You can always say Red, Dark Red, Pink, Light Pink, Orange, Beige, Tan, but what happens when you want a Dark Blue, that is darker than the computer’s version of Dark Blue? This also links back to the first argument. I hope that is enough evidence supporting Hex Numbers.

So anyway, just to help you, I have given you the codes for about 25, or a little less Hex Numbers. These are just pretty normal ones, like some shades of Blue, Red, Green, Grey and most normal colours. I can’t show you all of them yet, because in actual fact there are 256 different colour codes, and that would take a long time time to write up. 0.0

#CCCCCC	#FFCCFF	#FFFF99	#00FF00
#999999	#FF99CC	#FFFF00	#00CC00
#666666	#FF0099	#FFCC00	#003300
#000000	#FF6666	#FFCC99	#00FFFF
#FFFFFF	#FF0000	#990099	#0000FF
#FF6600	#990000	#663300	#000066

So there we go. Now you know about some of your Hex Numbers. Now, I can freely show you examples of them in CSS, and you will have a clue about what I’m talking about, in case you didn’t already. Have fun with Hex Colours!

Update: You can now access a full list of all of the 256 Hex Colour Codes, from: http://html-color-codes.com – I haven’t counted them, but it looks like there are about that many -__- Thanks to AJCann for showing me this site.