Lenny
Press "X" to admire hat
I've had a change of plan. Seeing as forms are pretty useless without some form (har, har) of code behind them, or thing to point to, there's no real point in informing (I kill myself sometimes!) you all about them. Instead, I'll skip onto Lesson 5, and cover forms when I get to ASP. Which means that this week, I'll cover the last of the basics - putting in images, and all the pretty colours!
----------
Image-ine that!
It shouldn't be news to anyone that a webpage can include images. Indeed, if it is news to you, then maybe you've been under that rock for a bit too long.
To insert an image is simple. We use the self-closing <img /> tag. You may remember me quickly touching upon self-closing tags in Lesson 1:
Now, you can't just use <img /> for an image to appear on the page. You need to combine that with the source attribute - "src". The basic syntax for inserting an image, therefore, is:
And that's that.
Well, that's basically that. When you get into the world of attributes you can do a lot more. As I'm one who strongly believes in copping out and letting people find out for themselves, here and a few common attributes for you to play with (see how many you can combine for one image): align, border, height, width.
There's a fifth attribute which I'm going to explain - alt. The alt attribute gives the image text which replaces the image if it doesn't load. The alt text will also show up as a tooltip if you hover over the image.
-----
Backgrounds
You can use images, or just colours, to give something a background.
There are two ways of doing this - using the bgcolor attribute, and the background attribute. The difference between the two is that bgcolor always uses a colour, whilst background uses images.
One of the most effective uses of both attributes is within the body tag (though they may also be used in table tags):
First, bgcolor. There are three ways to assign a colour to the background - using a hexadecimal number, using individual Red, Green and Blue (RGB) values, or by using a colour name.
Hexadecimal numbers are always six characters long (hence the hexa-), preceded by a #, and can be made up of 0-9 and A-F. For example, solid black is #000000. White is #FFFFFF, red is #FF0000, green is #00FF00, and blue is #0000FF. The incredibly observant among you might have made a connection between RGB and the positions of the FF's in the hexadecimal codes, but I'll leave that for a separate topic.
Chron's Peach (the background colour of posts), if anyone is interested, is #F4F1E4.
A background colour of Chron's peach, then, would be:
All 256bit colours (the standard colours a computer can display) can be split up into RGB values - three numbers, each one ranging from 0-255. Solid black, for example, has an RGB code of 0,0,0. White has a code of 255,255,255, red is 255,0,0, green is 0,255,0, and blue is 0,0,255. Notice any similarities to hexadecimal colours? Also note that there are no spaces in the code.
Chron's Peach has an RGB code of 244,241,228.
A background colour of Chron's peach, then, would be:
Colour names are far simpler - the bgcolor is simply a colour name. Yet, in a way, this is more limiting - rather than being able to create any 256bit colour, you must know the exact name of the colour you wish to input.
Sadly, I can't find the true name for Chron's Peach (which indicates that it is not a web safe colour, and thus won't show up in older browsers), but the closest I can find is SandyBrown. So, a nearly Chron's Peach background would be:
Case doesn't matter with colour names, but no spaces does. Various lists of them, with their corresponding hexadecimal and RGB codes can be found on Google. here are a couple:
Color + Design Blog / Ultimate HTML Color HEX Code List by COLOURlovers
List of colors - Wikipedia, the free encyclopedia
---
To add a background image is far simpler:
For example, to use the Chons badge as a background image, I would use the image url:
That image will repeat until the cows come home. I'll explain how to stop it in the CSS tutorial.
----------
End.
Next week I'll recap on everything I've gone through in these four lessons, explain briefly what's still to come (how you can take this basic knowledge and build upon it), and set everyone a project.
Happy HTML'ing!
Oh, as usual, post your code with any problems.
----------
Image-ine that!
It shouldn't be news to anyone that a webpage can include images. Indeed, if it is news to you, then maybe you've been under that rock for a bit too long.
To insert an image is simple. We use the self-closing <img /> tag. You may remember me quickly touching upon self-closing tags in Lesson 1:
Now, you can't just use <img /> for an image to appear on the page. You need to combine that with the source attribute - "src". The basic syntax for inserting an image, therefore, is:
And that's that.
Well, that's basically that. When you get into the world of attributes you can do a lot more. As I'm one who strongly believes in copping out and letting people find out for themselves, here and a few common attributes for you to play with (see how many you can combine for one image): align, border, height, width.
There's a fifth attribute which I'm going to explain - alt. The alt attribute gives the image text which replaces the image if it doesn't load. The alt text will also show up as a tooltip if you hover over the image.
-----
Backgrounds
You can use images, or just colours, to give something a background.
There are two ways of doing this - using the bgcolor attribute, and the background attribute. The difference between the two is that bgcolor always uses a colour, whilst background uses images.
One of the most effective uses of both attributes is within the body tag (though they may also be used in table tags):
First, bgcolor. There are three ways to assign a colour to the background - using a hexadecimal number, using individual Red, Green and Blue (RGB) values, or by using a colour name.
Hexadecimal numbers are always six characters long (hence the hexa-), preceded by a #, and can be made up of 0-9 and A-F. For example, solid black is #000000. White is #FFFFFF, red is #FF0000, green is #00FF00, and blue is #0000FF. The incredibly observant among you might have made a connection between RGB and the positions of the FF's in the hexadecimal codes, but I'll leave that for a separate topic.
Chron's Peach (the background colour of posts), if anyone is interested, is #F4F1E4.
A background colour of Chron's peach, then, would be:
All 256bit colours (the standard colours a computer can display) can be split up into RGB values - three numbers, each one ranging from 0-255. Solid black, for example, has an RGB code of 0,0,0. White has a code of 255,255,255, red is 255,0,0, green is 0,255,0, and blue is 0,0,255. Notice any similarities to hexadecimal colours? Also note that there are no spaces in the code.
Chron's Peach has an RGB code of 244,241,228.
A background colour of Chron's peach, then, would be:
Colour names are far simpler - the bgcolor is simply a colour name. Yet, in a way, this is more limiting - rather than being able to create any 256bit colour, you must know the exact name of the colour you wish to input.
Sadly, I can't find the true name for Chron's Peach (which indicates that it is not a web safe colour, and thus won't show up in older browsers), but the closest I can find is SandyBrown. So, a nearly Chron's Peach background would be:
Case doesn't matter with colour names, but no spaces does. Various lists of them, with their corresponding hexadecimal and RGB codes can be found on Google. here are a couple:
Color + Design Blog / Ultimate HTML Color HEX Code List by COLOURlovers
List of colors - Wikipedia, the free encyclopedia
---
To add a background image is far simpler:
For example, to use the Chons badge as a background image, I would use the image url:
That image will repeat until the cows come home. I'll explain how to stop it in the CSS tutorial.
----------
End.
Next week I'll recap on everything I've gone through in these four lessons, explain briefly what's still to come (how you can take this basic knowledge and build upon it), and set everyone a project.
Happy HTML'ing!
Oh, as usual, post your code with any problems.
