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

Lenny

Press "X" to admire hat
Joined
Jan 11, 2007
Messages
3,932
Location
Manchester
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:

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

resident pedantissimo
Staff member
Supporter
Joined
Aug 10, 2005
Messages
7,287
Location
West Sussex
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

Press "X" to admire hat
Joined
Jan 11, 2007
Messages
3,932
Location
Manchester
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 />

<table width="50%" border="0" cellspacing="0" cellpadding="0" align="center">

<tr>
<td bgcolor="#00FF00">green</td>
<td bgcolor="#0000FF">blue</td>
<td bgcolor="#FFFF00">yellow</td>
</tr>

<tr>
<td bgcolor="#FFFF00">yellow</td>
<td bgcolor="#00FF00">green</td>
<td bgcolor="#0000FF">blue</td>
</tr>

<tr>
<td bgcolor="#0000FF">blue</td>
<td bgcolor="#FFFF00">yellow</td>
<td bgcolor="#00FF00">green</td>
</tr>

</table>

</body>
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

Reetou Diplomatic Corp
Joined
May 31, 2001
Messages
3,337
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).
 
Top