# Mr. Emu Tutorials: Lesson 4 - Look at all the Pretty Colours! *Web Design*



## Lenny (Jul 7, 2008)

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:



Lenny said:


> *Some Simple Tags to Play with*
> 
> To make a new line, you use the <br /> tag after a line of text. You'll notice that it's a single tag - what we call a self-closing tag. The same is true of the horizontal rule tag, which puts a line across the page - <hr />.


 
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:



> <img src="url" />


 
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.



> <img src="url" *alt="text"*/>


 
-----

*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):



> <body bgcolor="colour">
> 
> 
> <body background="image">


 
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:



> <body *bgcolor="#F4F1E4"*>


 
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:



> <body *bgcolor="rgb(244,241,228)"*>


 
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:



> <body *bgcolor="sandybrown"*>


 
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:



> <body background="image url">


 
For example, to use the Chons badge as a background image, I would use the image url:



> <body *background="http://www.sffchronicles.co.uk/images/chronicles.jpg"*>


 
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.


----------



## chrispenycate (Jul 7, 2008)

And you don't have to make the entire body of the page the same colour (sorry "color") if you're building with tables,individual tables or individual cells can be colored(?) in. Now I wonder if I can do that with a well washed photo too…


----------



## Lenny (Jul 7, 2008)

Indeed. You could set the body bgcolor to a deep red, and then make table cells every colour of the visible light spectrum, using exactly the same attributes:



> <body bgcolor="#FF0000">
> 
> <br /><br /><br />
> 
> ...


 
Again, the same attribute is used for images, but you also need to set the background-repeat, which is a style option.

Using a handful of tags, and a few attributes, you can do a _lot_ of things. It's like lego blocks - you've only got _*n*_ number of shapes and sizes, but you've got more than *n* ways of putting them together. Much more than _*n*_ ways.


----------



## PTeppic (Jul 8, 2008)

It's worth pointing out how important ALT tags are for the visually impaired (who might be using text-to-speech s/w) and those using text-based browsers (e.g. hand-helds).


----------

