HTML For The Newcomer: Part 2
http://www.codecrunch.com/articles/52/1/HTML-For-The-Newcomer-Part-2.html
By Daniel Phillips
Published on 06/24/2006
The second installment in the series, this tutorial explains background colours - including the use of hex code.
HTML For The Newcomer: Part 2
Welcome to the second installment in the series of basic, user friendly HTML tutorials I am writing.
In the last tutorial we studied a very basic HTML document, it only involved the most basic of tags,, and diddnt look like much more than a few words when viewed in a web browser.
In this tutorial you will learn how to add other features in HTML to make your webpage look better!
First lets take a look at the code we had last time.
<html>
<head>
<title> <b> Hello this is my first html document </b> </title>
</head>
<body>
<b> hello world </b>
</html>
This code will display a page that looks like this in your browser.
What is the first thing you notice about this page, ITS DULL! , there is no colour, it just looks default and boring, so how do you solve this problem, one way is to add a background colour.
In the last tutorial we studied a very basic HTML document, it only involved the most basic of tags,, and diddnt look like much more than a few words when viewed in a web browser.
In this tutorial you will learn how to add other features in HTML to make your webpage look better!
First lets take a look at the code we had last time.
<html>
<head>
<title> <b> Hello this is my first html document </b> </title>
</head>
<body>
<b> hello world </b>
</html>
This code will display a page that looks like this in your browser.
What is the first thing you notice about this page, ITS DULL! , there is no colour, it just looks default and boring, so how do you solve this problem, one way is to add a background colour.
HTML For The Newcomer: Part 2
The Background tag
This is a useful tag for inserting colour into your webpage. The background colour tag need to be put somewhere between the <body> and </body> tags.
The tag is structured like this:
<body bgcolor="green">
Notice that colour is spelt the american way as color, and also that i have put quotation marks either side of the colour I selected.
With your background colour tag in place - your code should look something like this:
<html>
<head>
<title> Hello this is my first html document </title>
</head>
<body>
<body bgcolor="green">
<b> hello world </b>
</html>
This code should output something like this in a browser.
You may notice that this colour, although better than nothing is still rather drab, you can fix this problem by using non-dithering colours, which requires inputting "hex code" into the background colour tag, where you would usually specify the colour.
A good list of hex codes, and thier colours can be found here: http://www.december.com/html/spec/color.html
Inputting the hex code is easy. just take your tag
<body bgcolor="">
And put a hex code between the "", an example being #CDB5CD
This is a useful tag for inserting colour into your webpage. The background colour tag need to be put somewhere between the <body> and </body> tags.
The tag is structured like this:
<body bgcolor="green">
Notice that colour is spelt the american way as color, and also that i have put quotation marks either side of the colour I selected.
With your background colour tag in place - your code should look something like this:
<html>
<head>
<title> Hello this is my first html document </title>
</head>
<body>
<body bgcolor="green">
<b> hello world </b>
</html>
This code should output something like this in a browser.
You may notice that this colour, although better than nothing is still rather drab, you can fix this problem by using non-dithering colours, which requires inputting "hex code" into the background colour tag, where you would usually specify the colour.
A good list of hex codes, and thier colours can be found here: http://www.december.com/html/spec/color.html
Inputting the hex code is easy. just take your tag
<body bgcolor="">
And put a hex code between the "", an example being #CDB5CD
HTML For The Newcomer: Part 2
<body bgcolor="#CDB5CD">
So this tag, placed in the body section of a html document will output this background colour!
As you can see this one is much kinder to the eyes, try experimenting with different hex codes to get the best colour for you!
In summary
For basic colours
<body bgcolor="green">
<body bgcolor-"blue">
etc
For nicer colours
<body bgcolor="#CDB5CD"
<body bgcolor-"#8AA37B">
So this tag, placed in the body section of a html document will output this background colour!
As you can see this one is much kinder to the eyes, try experimenting with different hex codes to get the best colour for you!
In summary
For basic colours
<body bgcolor="green">
<body bgcolor-"blue">
etc
For nicer colours
<body bgcolor="#CDB5CD"
<body bgcolor-"#8AA37B">